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.
Related
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 am developing a website.
I heard that it is best to have a website with a fixed width.
What possibly could be the best fixed width I can allocate to my website ?
As Yahoo says:
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
I recommend using yahoo styles and follow their advice.
Another helpful resource is Display Browser Statisics from w3schools.com.
While I agree to a point with those who say variable width has its benefits, I find that unless there is significant content, when a site stretches the content winds up looking pretty sparse as it's stretched out to wider widths. It's for this reason alone that many of my client request fixed-width skins. Keeping a site narrow can help frame the content and maintain a more 'constant' appearance (when that's a concern). Usually, when designing fixed width sites I use the stats over at the W3C for the most popular resolutions. Currently, I've been designing with ~980px wide, this allows for 1028 wide, with scroll bars and some background to still be seen. However, I am noticing a shift in statistics towards wider resolutions as more people adopt wide screen monitors.
However, it really does come down to what you feel is a good fit for the site, content and client.
960 Grid System argues that 960 pixels is a wise choice since the number has so many divisors. I am not sure that I agree, but they sure have an impressive list of demo web pages on their site.
You can find a link to a fluid alternative at the bottom of the page.
In my experience the fixed vs. fluid debate seems to be a designer vs. programmer discussion. Designers generally prefer a fixed layout because that will give them more control, while programmers generally prefer a fluid layout because that will let them choose the width they want, by setting the width of the browser window.
Ideally your website should scale with the width of the screen resolution. But that is difficult in most of the cases. Since most of the users still use 1024x768 resolution, so any width such that all the content appears on such a screen without needing to scroll is a good width.
Where did you hear that? A website with a fixed width comes with the problem that it (most times) only looks good where the screen suits the width. Think of a website with a fixed width of 768px, how would that page look on a resolution of 1920x1200?
You should develop websites that scale with the browsers resolution.
Here is a little hack that might come in handy. On the larger screens I find that not having a 100% width is good as the amount of horizontal eye scrolling is more than what is comfortable. About an A4 or foolscap page is what people like their content width to be.
However on very small screens if you set your width to 70% or 80% you will be wasting valuable screen resolution. So workout what is the smallest width in pixels that you will allow - for argument's sake let's say it is 800px.
Create a 1x1 pixel image the same color as your background. Then put this image into your content pane (div, table whatever you are using for layout) but set width="800px" height="1px", this will force your content to always be at least 800px wide but not cover the fullscreen on resolutions that have width greater than 800px.
As I said it's hack, and it may or may not be exactly what you were looking for.
Because websites can appear in any number of browsers, on any number of devices, at any number of resolutions, (phone, netbook or cinema screen?) a fixed width is a kludge. Kludges can work, but it would be better to design for a purpose, instead of deciding on some arbitrary rules and then sticking to them without really knowing why.
Don't just go with 1024px because most people can handle that in most cases. Know what you're trying to achieve, and use that to inform your decision.
So, who're you targetting, and what do you want them to do?
This kind of question really has to do with theming/templating and if you are using a CMS like drupal (and many others) can be flexibly handled to provide you anything you want. Fixed or fluid - whatever. You even can let your users decide.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent.
To be honest though, I personally prefer looking at fluid websites that stretch to the full width of my monitor. My question comes from the fact that in most modern browsers you can hold control and scroll your mouse wheel to basically resize any website.
So is creating a fluid website worth the trouble?
It depends on your audience and your content.
The following are sites I respect and I think are example to imitate.
Fluid Examples:
Amazon
Wikipedia
Static Examples:
Apple
eBay
MSN
StackOverflow
MSDN
Some Mix it Up!
CNN
I think I prefer static most of the time. It is easier to make it look good in more browsers. It is also easier to read.
Making a website fluid, but adding a min/max-width attribute seems to be the best of both worlds, for me. You support fluidity, but you limit it at a certain width (say, 800px and 1200px).
It is up to you - here are some things to consider:
Text is hard(er) to read when lines are very long.
Your audience may have larger or smaller resolutions than normal, and picking an 'incorrect' static width will annoy them.
Maintaining a fluid site can be, but doesn't have to be much more difficult than its static counterpart.
Absolutely. It is a big inconvenience to people with huge monitors to have to resize the page. It can also be a bit dodgy with some layouts. Little inconveniences, no matter how trivial, can actually affect people's opinions of your site.
Also, netbooks have odd resolutions which make it hard to design sites for. For example, I'm writing this at 1024x600.
It's not particularly hard nowadays either (in modern browsers), especially with min- and max-height in CSS, and the new gradients, etc in CSS3, so image scaling won't be as big a problem in the near future.
In response to the comment below, I think that the pros outweigh the cons in this particular case - IE6 is a problem everywhere. We just have to deal with it.
You have to realize most computer users don't even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact.
Text based apps: No. Table based apps: Yes.
Pros of fluid layouts
People with big monitors gets to use their screen real estate.
Easier for users with big monitors when you have a lot of information on your page.
Cons of fluid layouts:
A fluid width text column is hard to read if it's too wide. There's a good reason behind the use of columns in newspapers: it makes skipping to the next line much, much easier.
(Somewhat) hard to implement, because of the limitations in CSS.
If you're showing tabular data (iTunes, db manager, ...), fluid width is good. If you're showing text (articles, wiki pages, ...) fluid width is bad.
From my iPhone's perspective, fixed width layout is problematical when using code blocks. The scrollbar for wide code blocks doesn't show up, so I can't read the far right of the block.
Otherwise, I think it's a simple matter of what kind of site you're designing and how it looks on different size screens and windows. As previously mentioned, there's an option to set a maximum width, but the same caveat applies to code blocks and iPhones. I've designed both, and I don't prefer one over the other.
Although, it's fun to watch the boxes move around as I play with the browser size with a fluid layout, but I can be easily amused.
The most important thing is to consider dominant use cases of your web site or application. Do you expect people to use it exclusively on mobile devices? Mobile phones, netbooks, desktops?
Take a look at "Responsive Web Design" by Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Great article that demonstrates the use of truly fluid layouts using media-queries. Sometimes you need to built out a separate front end for different user-agents, but sometimes media-queries are the perfect tool to service multiple resolutions across different user-agents.
It depends on what you're trying to do. Take a look at SO. It's fixed width and it's great. In fact, if it were fluid, it would be a bit of a PITA. Some sites look better with fluid layouts, but personally, I'd go with fixed unless you have a good reason to go fluid.
Many good points in the comments but from your question it seems you really like fluid designs and want to create one so go for it, it's your site, it doesn't have to be like every other site on the web.
Just be aware of pros ond cons of every solution.
Up to a point - yes.
There's a certain width, where text begins to become annoying to read if it's too wide. Easy to test if you have a large monitor, just grab notepad and paste some text into it without line breaks.
However, when going down to smaller sizes, being fluid might be a good idea. Mobile phone browsers are more and more capable of displaying "normal" websites just fine, but they are sometimes width-constrained, and as such, benefit if your site can fit in a bit smaller space.
Personally I also like to keep browser on my monitor but only at half of the monitor's width (24"). Sites which scale nicely into that are very good.
I think it's mostly a user convenience case. Not all sites will benefit from being fluid, but I think sites which have lots of text content are the ones that will most benefit from it, at least if they are fluid up to a max width (say 800px or whatever)
Yes. Page zooming is great but it is primarily used to make text bigger, not to make text fill the viewport. Certainly if the body text is already too wide, zooming down to make it fit will usually make it unreadable.
You need liquid layout if you're going to make the text fit the viewport whether or not it's zoomed.
The point about ‘long lines being hard to read’ is often overstated by designers trying to justify fixed width designs(*), but in reality it doesn't seem to hold quite as strongly on-screen as it did on paper. Of course setting a good leading/line-height is important, and max-width can be used to inhibit the worst excesses of long lines. (Set it in font-relative em units.) You don't get max-width in IE6, but that's not the disaster it once was. (You can fix it with a little bit of JavaScript if you really care about those guys. I don't.)
(* which are indeed less work for highly graphical layouts. But for a simpler layout like, er, StackOverflow's, there isn't really any reason not to go liquid. Tsk #SO, eh!)
Preface: Not a professional web artist.
I've found that there's way too many fiddly bits to get things to flow just so at cell-phone and uber-widescreen sizes, especially in anything of reasonably interesting complexity.
Typically, I design around having a fixed-width site in some fashion; usually bounded at [600,1200].
I also find super-wide columns of content to be a hassle to read. I seem to remember that there's some research which suggests an optimal number of words per column line.
You can make it like this.
# Make the main layout fluid and apply 'max-width: 1140px' to it and center it.
By this there won't be 'long lines' of text on bigger screens and proper settlement of web page on smaller ones (excluding 800x*** and lowers).
I have implemented this method in my new projects and it's working like a charm.
a.t.b .. :)
I think the decision fluid/fixed should be based also on content of the website:
For sites with big amounts of plain
information (like news portals),
better to use fluid layout.
Web-services better look and work in
fixed dimensions, so you always know
where interface elements are located
in their places and they are not moving
around constantly.
Yes, fluid websites are worth creating
As you said, it looks good and reasonable when you plan properly at design phase.
Your doubt about the impact of Ctrl + Scrollbar is not a big deal.
This feature is primarily for accessibility, to make text more readable by increasing the size.
However, if you mention all your sizes in Pixels (px) it won't happen.
Proper adjustment happens only when you use "em" to specify size. So you have a way to turn it on/off
I'm a big fan of fixed at < 800px... it's easier to read narrower columns, and it will work anywhere. That is, if you're trying to make a website that presents hypertext... Websites which present application front-ends, are I think another can of worms entirely...
Fluid design - truly fluid - is hard. Very hard. It's not just a question of page width - do your fonts scale, and does everything scale with them? Ideally:
Sizes should be defined in em rather than px
...and that goes for element sizes, not just fonts!
Given a change in font size or zoom level, the page elements should be the same size relative to each other
Our main product is fluid, and it's a pain from my point of view as a designer, especially because it involves a lot of user-generated content.
For one thing, images - in a fixed-width site, you can have an image that fills half the width, and looks great. In a fluid site, this image is just as likely to be lost in a sea of whitespace, looking rather lonely.
Life should be easier once border-radius and other CSS3 properties come into play more, but sadly our core audience are government workers, who all, ALL STILL USE IE F#!*ING 6!
To answer the question, "is it worth it"? Yes, if you do it right.
Here's a scenario: choose a fixed-width site: your boss displays it to a client on his brand-new, 1920x1600 laptop, then complains to you about "how it all looks small on this guy's screen!"
I think it's nice to be able to scale well on a user's screen, rather than make the users pan and zoom. In a time when users surf the web from such a wide variety of devices, ranging from smartphones to ultra-mobile PCs, each with its own, possibly non-standard resolution, I think it's important to keep user-experience at a high level when your site is viewed on such screens. Regarding the text length, it could be bounded by a certain ratio, so it would fit nicely within the layout. I think there are also frameworks that may help with writing a site in a fluid manner, and help with coding maintainability.
I'm gonna go against the majority and say NO. Reasoning: fluid sites like Wikipedia are a nightmare to read on large screens due to their long line length (though its citations make it hard to read at the best of times).
The problem really occurs because there is no mechanism to size text relative to the screen resolution. If you could automatically make text bigger on bigger resolutions, you could stay closer to the 80-odd characters per line that's generally regarded as the best for readability.
There is also the problem of images and other fixed-size elements. You can have large images and let the browser shrink them if necessary, but then you run into other problems like much longer download times, and image quality problems in many browsers.
I'm a fan of sites that do have a fixed max width of between 800px - 1000px, but can also scale down so that I can read the content without scrolling side-to-side and also without zooming out because often the text becomes too small to read and it hurts my eyes. So, this is normally want I strive for because I want to build sites I can be proud of.
Now that most of the major browsers support full page zoom (at present, the only notable exception being Google Chrome), are liquid or elastic layouts no longer needed? Is the relative pain of building liquid/elastic layouts worth the effort? Are there any situations where a liquid layout would still be of benefit? Is full page zoom the real solution it at first appears to be?
Yes, because there are a vast variety of screens out there commonly ranging from 15" to 32".
There is also some variation in what people consider a "comfortable" font size.
All of which adds up to quite a range of sizes that your content will need to fit into.
If anything, liquid layout is becoming even more necessary as we scale up to huge monitors, and down to cellphone devices.
Doing full page zoom in CSS isn't really worth it, especially as most browsers now do this kind of zooming natively (and do it much better - ref [img] tags).
As to using fixed width, there is a secondary feature with this... if you increase the font size, less words will be shown per line, which can help some people with reading.
As in, have you ever read a block of text which is extremely wide, and found that you have read the same line twice? If the line height was increased (same effect though font-size), with less words per line, this becomes less of an issue.
Yes, yes yes! Having to scroll horizontally on a site because some designer assumed the users always maximize their browsers is a huge pet peeve for me and I'm sure I'm not alone. On top of that, as someone with really crappy vision, let me say that full page zooming works best when the layout is liquid. Otherwise you end up with your nav bar off the (visible) screen.
I had a real world problem with this. The design called for a fixed width page within a nice border. Fitted within 800 pixels wide minus a few pixels for the browser window. Subtract 200 pixels for the left menu and the content area was about 600 pixels wide.
The problem was, part of the site content was dynamic, resulting in users editing and browsing data in tables, on their nice 1280x1024 screens, with tables restricted to 600 pixels wide.
You should allow for the width of the browser window in dynamic content, unless that dynamic content is going to be predominantly text.
Stretchy layouts are not so much about zooming as they are about wrapping - allowing a user to fit more information on screen if the screen is higher resolution while still making the content acessible for those with lower resolution screens. Page zooming does not achieve this.
i think liquid layouts are still needed, even though browsers have this full page zoom feature i bet a lot of people dont know about it or know how to use it.
Page zoom is horrible from an accessibility perspective. It's the equivalent of saying "we couldn't be bothered to design our pages properly [designers], so have a larger font and scroll the page horizontally [browser developers]". I cannot believe Firefox jumped off the cliff after Microsoft and made this the default.
Yes - you don't know what resolution the reader is using, or what size screen - or even if accessibility is required/used. As mentioned above, not everybody knows about full page zoom - I know about it, but hardly use it...
Only your own site's visitors can tell you if liquid layouts are still relevant for your site.
Using a framework such as the YUI-CSS and Google Website Optimizer it's pretty easy to see what your visitors prefer and lay aside opinion and instead rely on cold hard results.
Liquid layouts can cause usability problems, though.
Content containers that become too wide become exceptionally difficult to read.
Many blogs have fixed width content containers specifically for this reason.
Alternatively, you can create multi-column content containers so that you get an effect like a newspaper, with its multiple columns of thin containers of text. This can be difficult to do, though.