Forum Moderators: phranque
If you have to pick on, I'd suggest either 800x600 or 1024x768...but it would annoy me since I run at 1600x1200 on mose of my machines, and only 800x600 and 1024x768 on a few older ones.
800x600 - 47%
1024x768 - 46%
You should typically design for the lowest common denominator. In this case it is 800x600. This doesn't mean that you can design 800 pixels wide. I normally recommend that you not exceed 760 pixels in width as you have to account for scrollbars and the like.
In a perfect world, you should design the site so it is fluid with 760 pixels being your absolute minimum width. This way those who are using higher resolutions will get a site that fluidly fills their browser window. It is a tough design environment to work in, but it can be done.
If you do go with a fixed width, no more that 760 pixels and you'll be able to appease at least 93% of your audience. If you have visitors that are still using 640x480, they will get a horizontal scrollbar as they probably do with 90% of the other sites they visit.
I'd definitely target the 800x600 resolution.
Do other browsers only allow 760 before scroll?
Do other browsers only allow 760 before scroll?
Remember, its not the browser itself, but the users monitor resolution. I do 760 because I like to add a little bit of buffer zone. 780 is probably right at the point of filling the screen completely and allowing for a right vertical scrollbar. If you have any page background color, it may not show on either side. The 760 allows me some room to breath when designing for 800x600.
The other thing to take into consideration are all the other features browsers offer to the user. In IE, you have favorites, history, etc. to contend with. If the user keeps these panes open during browsing, then you have another issue to contend with. That is where fluid design comes into play. I've tried the fluid and just have not been able to come to grips in having my designs breaking. One of these days...
[edited by: pageoneresults at 4:11 pm (utc) on April 8, 2003]
The lowest common denominator are the "Peephole" people use 640 * 480.
I ended up dropping that lowest common denominator over a year ago. The current usage statistics for 680x480 are under 5%. My sources say 2%.
If you are designing a fluid site, screen resolutions are not an issue. Designing for 640x480 can be difficult and you'll end up with a lot of vertical scrolling. I've seen many who still design within these parameters.
Regards,
Brent
Height is even less of an exact science. If you're just trying to figure out where the "fold" begins, your best bet it to make a rough guess.
Furthermore, don't always think you have to make use of all available space. This is a design faux pax, not just because you end up thinking not about making room for the stuff you need, but of things you can use to fill the available room. Also, users don't set their resolutions higher so you can make use of it, they do it because they want more space (and crisper quality, obviously, but the space concern applies here).
I generally recommend never going over 700 - 750 px width on any site you do. A nice solution is to use a fluid design that changes with width of the page so you can make use of all available browser space.
While most computers I use have a much higher resolution that 800x 600, I usually browse at approximately that size.
in msg #3 you wrote:
>>Gibble listed the two most popular screen resolutions...
800x600 - 47% 1024x768 - 46% <<
Would you please sticky me the resource for those figures?
800x600 -(46%)
1024x768 -(41%)
1280x1024 -(5%)
1152x864 - 3%)
640x480 -(2%)
Unknown - (1%)
1600x1200 - (%0)
thecounter.com/stats/2003/March/res.php
What is a fluid site? I'm guessing one that can change how much space it uses depending on a particular users resolution.
You never do anything in HTML based on resolution (except for a static page's width), you do it based on window size. This forum is a good example of a fluid site. When you make your window bigger, it grows wider, when yous shrink it, it grows smaller. Nothing is ever obscured (unless you make it TOO small).
To do this with tables, just set the main table in the <body> tag to a percentage width:
<table width="100%">
<tr><td>Content Goes Here</td></tr>
</table>
Or at least that's the basic principle.
now of course there is more to it than that if you don't want a complete mess
the idea of a fluid site is to allow it to adapt as far as possible to whatever the browsing situation by ONLY specifying and fixing the things that need to be fixed and leving the rest to flow into the space available
techniques to look at are floating a menu on one side, setting a maximum width for the body of text in em units (so you are effectively setting a line length in terms of characters), and then allowing the space in between to expand and contract as space becomes available
other techniques worth thinking about are allowing the design elements to "fold" underneath each other when a display gets too small...placing a box with a background colour behind an image and setting the box size with % of page width (a great way of balancing large areas of white space on large displays)...picking a point in the design that other elements are allowed to "Flex" around (you don't HAVE to start from the top left corner)
it's never perfect...but after a bit of practise it's a lot more exciting to do a flexible design and see how it works when you find people with odd systems than it is to keep having to twiddle with a not quite pixel perfect one every time somebody complains
galaga... I agree with most here on using a fluid design if possible. In other cases where you may have product pages with images that push things beyond the border, I set the main content at 660 pixels, with a fluid right column - or 'locked in' 200 pixel right column.
The primary 660 pixels is the default amount that can be printed, and there is nothing worse than a secretary printing out a spec sheet for the boss, and half the content on the pages are gone! (fluid will try to bring things to 660, but if there are wide graphics on the same row, it will still push things outside the printable area).
We typically use between 600 and 660 for the primary area, then a 200 wide right column that can be used for advertising, and less relevent information (since this doesn't need to be printed anyway). The design still leaves a nice balance of white space on the sides for most users.
Steve
-You can never design a layout and create in a way that assures you that your visitor sees it the way you designed it;
- On a resolution of 1600x1200, paragraphs of text will run from left ALL the way to the right of my screen. That's like watching a tennis game! Imagine if newspapers used a fluid layout, and articles stretched all the way from the left to the page to the right of the page? Text would become unreadable, you'd need a ruler to be able to read an article. And how would you know where to place photos in a layout like that? Same goes for fluid layouts. They only work for text-heavy pages, but even then, they work against readability.
If you design for 800x600, you can be sure every visitor will see your layout like you intended it. Like dwilson commented: 'One thing to keep in mind is that the bigger a screen a person has, the less likely he is to have his browser maximized.' That's definitely true, making so what's the point of using a fluid layout?
Just for fun, check out your favorites websites, or sites that are like the one you wish to create, I'm quite convinced the'll use a fixed width. Simply because it works best!
By the way, the safest way to go (IE5+ on Win and Mac) for an 800x600 resolution is 748 pixels, but since most people use IE5.5+, 750 pixels is okay to use, leaving you with a small margin left and right on most browsers (but actually, that not so bad, give your content some space to 'breathe').
and why is this important?...it's unachievable even if you try to nail down everything possible so why even make it a goal at all...it gives no business advantage...it creates extra work...and in the end it will fail more often than it will succeed...what's the point?
You can never design a layout and create in a way that assures you that your visitor sees it the way you designed it
I want my visitors to experience my site the way they want to. If they are partially sighted and use extra-large fonts; or they have a PDA with a 320xsomething small screen; or they are an a s-l-o-w line and have images turned off; or they are blind and have a screen-reader; or are working monochrome; etc etc: I want my content to adjust to their needs.
If it was important that the do see parts of the site in a fixed way, I'd offer PDFs of those pages.
To me, websites are about communicating content, not making the world see things the why I say it must.
You can never design a layout and create in a way that assures you that your visitor sees it the way you designed it
Sure ya can, to an extent. I'm personally a fan of the three column layout. Two static columns on the left and right, and a fluid center column. The stuff on the left and right I never want to stretch, but the stuff in the middle, usually paragraphs of text/images, makes sense to be fluid.
There are sites where fluidity doesn't make sense, but I think it's just another way to empower your users. If they have their windows opened large, the content spreads out, and they don't have to keep scrolling to read content. If they need to have a window narrower, the content will shrink.
The more control you give users over the browsing experience, the fewer users you're going to have complaining about the shortcomings of your layout, and the more comfortable they're going to feel browsing it.
I use static layouts quite often, but only when I'm making a relatively small site or a site for a client that wouldn't warrant fluidity. Larger sites that have lots of text and information (Mmm, search engine goodness) benefit greatly from it.
what is happening is that many of the most talented graphic designers are taught by people who ONLY know print...so they are taught to design with rules that only work with absolutely fixed sizes...often they are very good...they just aren't working to the medium and aren't aware that it's a problem
Recently I find myself a scary number of times (maybe as often as 2-6% of sites) to TRY to read the text on a "well-designed" site and turn away withhout even figuring out waht the site is about.. because My eyes tear and burn and the Ctrl+scroll doesn't work either... Flash, as more often then not, is the largest culprit....
Why doesn't anybody teach designers to DESGIN, rather then to "paint"...
SN
what is happening is that many of the most talented graphic designers are taught by people who ONLY know print...so they are taught to design with rules that only work with absolutely fixed sizes...often they are very good...they just aren't working to the medium and aren't aware that it's a problem
What are you saying here, designers who work in fixed sizes are often stuck in thing for print layouts and are often ignorant to designing for screens? That's presuming a lot. I suppose Adobe (and Hillman Curtis at that), Macromedia, Corel and other companies whose websites in part depend on good interface and interaction design to sell their design software should rethink their own business then?
And the people who designed the websites of CNN, Yahoo, the BBC, Alias, Disney and other high profile websites are a little behind in their thinking? Yeah, they probably just don't get it… ;)
Just my two cents…
Also I find often that if I look at "big game" competitors in the same area as my site with multi million budgets compared to my negative one, simply have crap sites and don'T seem to have a clue about making their sites fullfill the purpose they set out to...
Not makign a case for or against fluid/fixed design. Just warning from quoteing the "big guys" as reference cases"... Just remember the recent all-flash screw up on theshockwave site.
SN
Where a site has primarily text in the center column, it would make more sense to have it fluid than otherwise. There are ways to control things so they don't shrink too small, if that's the primary concern.
If you sticky me I'll show you a site I'm developing that fluid design is perfect for.
640x480 = 600x300
800x600 = 760x420
1044x768 = 955x600
WebTV is 544 wide.
The old Macintosh is 470.
This used to be the rule back in "the day"
Any wider than 470 and the dreaded "left to right"
scroll bar will appear on an old mac.
My Philosophy is you gotta play to the cheap seats,
but then again your target audience may not be in the
"cheap seats"!
My $0.02
-The Water Mammal
<table width="100%">
<tr><td>Content Goes Here</td></tr>
</table>
Tables-for-layout alert :)
If anyone wants to find out how to do a good fluid layout without resorting to tables then pop on over to the CSS forum.
Jello:
You can never design a layout and create in a way that assures you that your visitor sees it the way you designed it
You need to let go!
The web isn't a print medium - it's not a static design for a magazine or a company brouchure. Your HTML should dictate the logical structure of your document and your CSS suggests a layout for this structure.
Users should have the ultimate power. They get to choose screen resolution, window size and font size. Plus they can overrule your stylesheet with their own if they have special needs.
Instead of fighting their choices, you should support them and produce a design that can cope.
On a resolution of 1600x1200, paragraphs of text will run from left ALL the way to the right of my screen
And as dwilson commented "the bigger a screen a person has, the less likely he is to have his browser maximized". If they choose to have the window maximised then so be it, but most won't.
If you design for 800x600, you can be sure every visitor will see your layout like you intended it.
Yup it will look exactly the same on everyones screen, regardless of how they would actually prefer it to look. It will force them to use font sizes they can't easily read. It will cause a horizontal scrollbar on some and loads of white space on others.
check out your favorites websites... I'm quite convinced the'll use a fixed width
Actually my three most visitied websites at the moment all use nice fluid layouts: [webmasterworld.com...] [w3.org...] and [singletrackworld.com...]
But thats not the point, I don't pick my websites based on that criteria. But it is something that I am aware of and it always causes me to 'tut' when I see a fixed layout site.
True, many 'big players' don't use fluid layouts - but then many big players don't write standards compliant code, produce sites that only work on IE, produce very heavy sites, require flash,javascript and cookies and completely ignore accessibility issues.
So they are not always a good example to follow! :)
I've had this battle a couple of times on this and other forums already so forgive me if I sound like a zealot.
Netguy:
When determining width, don't forget the Printer...
Another cool advantage of a fluid site and CSS - no need to produce special 'printer friendly' pages. Your prints will fill the page properly and only contain the informtation they require.
If anyone is determined to go fixed width, then at least make your print stylesheet fluid. Its so much nicer.
