A while ago I looked into what browser sizes people use to... well... browse the internet. I have received a good amount of feedback both as comments on the website, but more so in form of emails. With this article I will try to make sense of it all, and explain why the whole discussion about fluid vs. fixed layout is irrelevant.
There is an amazing amount of articles on the net on how to make the overall layout. But, none of these gets it right. They are all trying to solve the wrong problem.
These articles define the problem as either having too much space - i.e. large empty areas outside your content - or too little space that forces horizontal scrolling and lack of whitespace.
I understand why this is a problem, and why people want to eliminate it. But, you are not solving the right one. The real problem is; how do you optimize the visual presentation of your website? How do you make your content look amazing? How do you make it easy to see - to read?
Let's start with text. We know from countless of studies that the optimal width of a block of text is between 65-80 characters (with a line-height of about 1.15). This is the optimal size of text, and it has been proven to be:
It has no relevance to discuss fixed vs. fluid layout. We know that the best way to present text is when there are 65-85 characters per line. An example is that with "Arial 12px" the size of your text box should be about 495px wide (+ whatever whitespace you want).
BTW: This is the reason content area on this site is 496px wide (+25px whitespace on each side) ...
Designing text on a website is simply about 3 things:
Do not make the text too small because then you cannot read it. But, if you make it too big you also need to use the scrollbars more. The tricks is the balance them out.
When we look at the best way to present images we have tackle a different set of requirements. As rule of thumb the best way to present an image is to balance its size between two things:
This, of course, is not easy as they are in direct conflict with each other.
We have the same experience when we go to the cinema to watch a movie. If you sit in the back, the screen gets too small and you cannot see the details. If you sit at the front everything is so big that you constantly have to move you head just to see the actors. The solution is to sit somewhere in the middle. And it is the same on a website.
The correct size of an image depends on the number of details in it. Many details require a larger image - while a few can easily be seen in a smaller area. But you can generally size your images based on a 14:5 ratio. The distance from your eyes should be about 2.8 times further away (14:5) than the width/height of your image.
As an example:
BTW: in both cases it is about 70% of the full width of a computer screen
The best way to present an image is thus to use a fluid layout - or even an elastic one. If you happen to display the image inside a text box, you either need to resize the text to fit the image, or decrease the image-details so that it can fit a smaller area.
Note: You need to stream the correct sized image to the browser, since the browsers are horrible at scaling images. There are several products on the market that can do this - but they are expensive.
To begin with it seems much more difficult to design the interface for a rich media site - and it often is. But, the trick is to set priorities for your content. You always need one thing that has the first priority, followed by a number secondary things and some less important stuff.
To create good design you must then look almost exclusively at the content that has priority. For instance, when I made the concept for the Flickr X Image Viewer, I specifically designed it so that the most important element - the active image - was designed according the requirement for images I wrote above. Everything else (menus, actions, image bars etc.) was then placed in locations surrounding the main content.
You see the same concept with modern desktop applications - like Word 2007. Your primary content is text, and the secondary elements are the toolbars (or the ribbon as it is called).
Now you are probably thinking that the browser size report is rather useless. And, you are right - as a design tool it has little relevance. But, the report visualizes two very important things:
One example is when you are designing a blog. You know that the main content - the blog text - should have a width of 65-85 characters. You know that you cannot read the text if you make the text smaller than 11px (translates to a text box width of about 450px). But what about an upper limit?
With the report I found that you layout width need to be less than 776px, if you want to reach 95% of your visitors - and that is your design constraint. You cannot make your text larger than 19px, because the text box needs to be larger than the available screen space.
It is the same with images and other elements. The browser size report identifies the design limitation. It is less important when deciding on a design direction.
Full access for... $9 per month
Full access for... $99 per year
Join 'The Weekly Update' to get an email every Friday afternoon with the latest from Baekdal + noteworthy articles from around the web.
What the shift in media is really all about.
Free for subscribers
$8.79 on Amazon
It is not about creating a shop in a tab. It is about turning communication into sale.
Free for subscribers
$7.58 on Amazon