I am creating a website with form fields, tables with headers, etc...
My problem is that I am afraid that when I change the language, some of the formatting will be messed up. Such things like 1 lines becoming 2 and headers being cut off by the small width of a column will make the page look weird.
What are some options and paths to go down. Do they scale well for an application with almost 100 pages?
Well - you always should create websites with flexibility in mind. To solve the problem, you must ensure you aren't using fixed sizes (width, height and others).
No need to localize, just add more english words and see how the layout reacts. Resize the screen to mobile and you can also check the behavior.
To easily allow flexible content, I almost always end up using CSS flexbox and calc to create layouts based on relative units.
Related
I'm hoping someone can help.
I'm recently watched a video on responsive web design on a well know site.
I'm puzzled by the method taken by the tutor. He basically creates three styles sheets (large / medium / small) and in each stylesheet he gives the PX widths of DIVS and swaps images where necessary.
Surely, this method is flawed , he could just use percentages for fluid layout instead of different styles sheets called via media queries??
Is there any advantages to his method?
many thanks,
There is a distinction between a flexible design and a responsive design.
According to some of the books that I read, you can make a layout flexible by using % length
values, so the layout adapts to the exact dimensions of the viewport's width.
If you build a responsive design using media queries, you can make a design that uses
absolute lengths (pixels) and adjust those hard-coded values to differ according to
the screen size limits defined in your media queries.
So, a flexible design may work well as a responsive design, and a responsive design may
be based on a fixed-width layout.
Needless to say, the approach that you use will depend on the design that you are trying to
build and how it must work in various devices.
The author of your tutorial is not necessarily wrong, but their approach may not be
the most efficient approach to building a responsive design. In some cases, if you use
% values, you may achieve your design with a much more concise CSS stylesheet.
You can use both fluid layout and responsive queries together - responsive media queries take up where fluidity no longer manages.
For instance, content in four columns, with column widths in percentages, will shrink the column size for smaller screen widths. But there comes a point where the columns are so narrow they are holding just one or two words per line, which looks naff, and is hard to read, and causes content to overflow its containers. By the time it gets down to mobile size everything is far too small to read at all.
To solve this, you can write media queries to relocate one or more of the columns elsewhere - queries allow you to completely rewrite a page, not simply shrink it. And, unlike the use of floats (often used for images) where only the end one drops as things get smaller, with media queries you can decide which is the most logical div or column to move, and where to relocate it to (or even to hide it completely).
It's good also to get away from using PX units everywhere, especially to keep text content on our pages accessible by poor-sighted people. Note that the point where text is just one or two words per line comes much earlier, at much wider column widths, if the user is running with a higher text zoom (as I often have to do). I wrote about this recently on my blog at http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness, which you might find useful. The answer is to use EM units for containers holding text, and for media query breakpoints (if you are just starting out with media queries, its good to get into that habit right at the start). Divs with both fixed height and width are especially to be avoided - as soon as the user zooms the text size, everything bursts out of the div and defaces other stuff!
By the way it is not usually good to do as that tutor you mention and put your media queries in multiple stylesheets (he was probably only trying to illustrate the separate nature of the queries) - that increases load times (separate HTTP accesses) which is especially bad news for mobiles.
I hope this helps. Huge numbers of commercial sites are being made responsive now, to cater for mobile phones. It's the way the world is going.
In my early years of learning how to code with a graphics and design background. I found it rather awkward to use pixels over percentage. It's this simple if the product you are designing is for a specific screen size/sizes then and only then could adapt to using pixels ( which in any case % would still make your work easier). When coding we should keep one thing in mind i.e. "aesthetics". You want your content to be fluid, adaptive kindly stick to % and save time.
Regardless of whether it is HTML, XHTML or HTML5 you find those annoying percentages littered throughout the place. Yet... I see an awful lot of websites dare not go near them. Yet I was always encouraged through uni to use them.
So which should I be using? Which would lead to better site design and why?
I'm aware to avoid the use of height although HTML5 really doesn't like me not specifying height if I want to use percentages.
Thanks for taking the time to read.
It really depends on what you do you want to build up.
Sometimes I need to build a website which could be read by people with certain disabilities. If for example also older people visit your site its good to use % so that they could zoom in your page and the layout still looks pretty.
Fixed Design Layouts Fixed design layouts have a specific width and do
not scale to fit the browser window. Websites that make use of it can
be aligned to the left, centre or even aligned to the right as and
when required.
Benefits of Fixed layouts: With fixed design layouts you have control
over the line length, flow and placement of the elements on the web
page. The designer has a fixed space to work with and the line lengths
of the text and the placement of images can be designated easily.
Drawbacks of Fixed layouts: Fixed design layouts tend to leave lots of
empty space on either side of the design when viewed on high screen
resolutions. This dwarfs the size of the web page and gives an
impression that it is floating on the screen.
Fluid Layout Fluid design layouts use percentages instead of pixels to
define their width and they fill the entire browser window. They are
also called fixed or dynamic designs.
Benefits of Fluid layouts: One of the major benefits of fluid design
layouts is their accessibility features. They cater to more number of
users. This is because, whatever may be the screen resolution or
device of the user, fixed design layouts adapt better. It makes use of
the entire browser window by spreading out. This maximizes the area
for the content to e displayed and more information can be seen at one
go. Therefore, there is no empty space on the window screen. This is a
better bet as compared to fixed layouts that leave a great deal of
empty space.
For fonts, you should use percentages (or em's, or rems) if you don't wish to fix the font size in Internet Explorer. If you use pixels, then users of Internet Explorer who change their default font size in their browser settings won't see the fonts increase/decrease. So this makes your text potentially less readable for users in that browser.
A great resource for this is the first chapter of Dan Cederholm's Bulletproof Web Design.
For layout, using percentages or em's will make your design more flexible to changing font sizes/localization etc. This is also covered in the book.
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.
I've been working on a layout for a site recently and have gotten stuck with the CSS. I like to think that I could follow the simple tutorials for a 2 column footer layout, but I keep getting stuck with the content of one of the columns.
The two column design would be left-side fluid Google Map and right side fixed width sidebar. I have tried following many examples of this sort of layout, but I always come to the problem with maintain the fluid side with the Google Map. Mainly the Google Map doesn't like to remain fluid. I have tried every CSS solution I could find with negative margins, floats, abosulte positioning (GMaps really hates this), and even tried tables (shudder).
Does anyone have any idea to handle this problem?
Take a look at Yahoo YUI grids.
Yahoo YUI grids
The YUI CSS framework provides a very customizable number of grid layouts. Page widths vary from 750px, 950px, 974px and 100% & there are templates that provide both fixed left & right column widths - all guaranteed to work correctly across multiple browsers. Their choice of sizes is also related to common advertising dimensions, making it easier to fit ads if you so desire. All pages on Yahoo use these layouts..
You also have the option to incorporate 'reset' capabilities so that all browsers are set to a common layout with regard to fonts, padding, margin, etc.
It has made foundational web page development a much easier, less finicky process for me!
I'm asking this question purely from a usability standpoint!
Should a website expand/stretch to fill the viewing area when you resize a browser window?
I know for sure there are the obvious cons:
Wide columns of text are hard to read.
Writing html/css using percents can be a pain.
It makes you vulnerable to having your design stretched past it's limits if an image is too wide, or a block of text is added that is too long. (see it's a pain to code the html/css).
The only Pro I can think of is that users who use the font-resizing that is built into their browser won't have to deal with columns that are only a few words long, with a body of white-space on either side.
However, I think that may be a browser problem more than anything else (Firefox 3 allows you to zoom everything instead of just the text, which comes in handy all the time)
edit: I noticed stack overflow is fixed width, but coding horror resizes. It seems Jeff doesn't have a strong preference either way.
Raw HTML does just that. Are you changing your data so that it doesn't render so good in random sized windows?
In the olden days, everyone had VGA screens. Now, that resolution is most uncommon. Who knows what resolutions are going to be common in the future? And why expect a certain minimum width or height?
From a usability viewpoint, demanding a certain resolution from your users is just going to create a degraded experience for anyone not using that resolution. Another thing that comes from this is what is fixed width? I've seen plenty of fixed size windows (popups) that just don't render right because my fonts are different from the designer's.
In terms of web site scaling I like fixed sized web sites that scales nicely using the browsers "zoom" function. I don't want a really wide page with tiny fonts on my 1920 res monitor. I don't know if the web designer has to do anything to make it scale nicely when zoomed, but the zoom in FF3 is awesome, the one in IE7 is useless...
The design should be fluid within sensible bounds.
Use CSS has min-width and max-width properties (which work in every browser, including IE7+) to prevent design from stretching too much.
The important thing is never to have a block of text stretch too wide. If a window is expanded, no block of text should indefinitely stretch to match because reading becomes a difficulty.
Like people have said, it really depends on what information the site is displaying. Two good examples are StackOverflow, and Google Images..
If stackoverflow stretched to fit the screen, longer answers would be annoying to read, because the eye finds it difficult to scan over long lines - this is exactly why newspapers use columns for everything, and why books are the all the same sort of width.
With Google Images, where the content is basically a bunch of 200px wide images, it stretches to fit the browser width and is still perfectly readable.
Basically, bear in mind the eye hates reading long lines of text, and base your design on that. You can design your site so when you increase the font size, all the layout scales nicely with it (The only site I can think of that does this is www.geektechnique.org - press Ctrl+-/= or Ctrl+scrollwheel, and the layout changes width with the font size)
I guess like a lot of things: it depends. I usually do both. Some content stays fixed width to look good or if it can't benefit form more space. other stuff is set to 100% if it seems like it'd be usefull.
This should be decided on how complicated the design of your website is. The more complicated, graphically or component wise (amount of content divs), will determine how well your website will scale. Generally you will find most graphic designers website will not scale because they are graphically intensive. However informational website will scale to make the best use of readable space on the screen and are not complicated for ease of use. Its a matter of preference really.
I think it depends on the content of the site. Sites like SOFlow, Forums, and other sites have an emphasis on reading lots of details, so having more real estate to do so is a big benefit in my mind. The less vertical scroll, the better.
However, for sites a little less demanding on the reading level, even blogs or retail sites where you're simply displaying an individual product, having a fixed width allows you to keep things more concise.
I'm a big fan of fully-fluid designs. As to the usability complaints about lines of text that are too long... if they're too long because of the size of my browser window, then I can just as easily make the window narrower as I can make it wider.
This is a matter of styling preference. Both can be equally usable depending on implementation. Columns can also be used, if the screen gets wide enough. Personally, I find it annoying when there is a single, narrow column of text going down the screen.
Edit for 2012: Yes, your website should respond to the size of the window it is being displayed in.
There are many places to read more about this, including:
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://www.abookapart.com/products/responsive-web-design
http://en.wikipedia.org/wiki/Responsive_Web_Design
Note: if you use the zoom functionality in your browser, a fixed layout squashes the text, whereas a fluid layout allows it to take up the whole screen.
Maybe this is just a browser problem, but it's definately an argument in favor of fluid
Paragraph widths larger than your display make a web site completely unusable. You have to jiggle the horizontal scrollbar back and forth for every single line you read. I'm doing a web design subject at university and the textbook calls the designs which adapt to your screen width fluid layout.
I'm designing my big class project using fluid layout, it's a bit more trouble than fixed width. I suspect none of the other students will use it, the markers won't notice and none of the professional sites we're imitating are fluid either.
I'd say fluid all the way. The user can always go back to a smaller size window if he doesn't like the result of enlarging it, but he can't do anything about a fixed layout.
If you really, really hate the idea of your site looking ugly because of something a user with a large screen does, then for the sake of all that is true and beautiful, at least never use pixel-based fixed layouts! CSS has these neat text-relative size units like "em" that allow parts of your page to scale with the font size while others (like images) stay in their "natural" size.
Why not use them and make your page scale well without relying on the less flexible "scale everything" of FF3 that's really just a workaround for sites that use a dumb pixel-based fixed layout?
A lot of people are saying things like "this is a matter of taste" or "I don't like big fonts on my high-pixel display." Number of pixels has nothing to do with it, and it's not a matter of taste. It's a matter of DPI, which is directly related to display resolution and font size. If your layout scales along with the DPI of the fonts (by being specified in ems for instance, and using SVG), then you end up with very beautiful, very crisp websites that work optimally with any display.
http://www.boutell.com/newfaq/creating/anyresolution.html
There's probably a compromise design between fixed and fluid designs. You can design a site fluid-like but set the css property max-width to 1024 (or whatever). This means you get a fluid layout when the window width is less then 1024 and fixed width when it is greater.
Then narrow screen users (like my 800 pixel eee 701) don't have to twiddle the horizontal scrollbar to read every single line and wide screen users (who don't know how to resize their browser window) don't get 500 character wide, 1 character high paragraphs.