Designing Web Sites That Look Good Everywhere
Posted by Max Dunn Tue, 11 Sep 2007 20:25:00 GMT
There are three main issues to consider when designing web sites that will look good to the widest number of visitors: monitor size, OS/browser and colors.
Monitor Size
First, no-one uses 640×480 anymore, so this should not be considered. Next up only about 8% of users have 800×600 displays. The biggest group is 1024×768 which accounts for about 50% of user’s displays. At the 1280×1024, we have about 17% of the users. The rest, about 25% have higher resolution displays.
What this means is that to design for the widest group, web pages should be displayable on a 800×600 display, but can be optimized for best viewing on a 1024×768 display.
Keep in mind though, when thinking about the design is that it is hard to read long lines of text and that narrower web pages are often easier to read. Also, when users scan web pages, they look in an F-shaped pattern: first along the top and then the left side. So having a wide page with a lot of important information on the right side will likely not be effective.
There are two main types of web sites: statically sized and dynamically sized. Statically sized web-sites are the most common, especially with the new CSS based sites, because it is hard to dynamically size a CSS site. Most of these would be based on a 800 pixel width so the whole page can be seen without scrolling on a 800×600 display. Some sites do have a 1024 width, but put less important information in the right column that won’t matter when it is hidden on a 800×600 display. No matter what size is used, it is nice to float the page so it is always in the middle of the screen, no matter what size window it is displayed in.
Here is a static sample. Notice that when you resize the browser, the text will be in the middle but won’t resize to the window.
Dynamically sized sites will stretch to fit into the display size. Well designed dynamic sites have a minimum size so the text doesn’t get too squished on a smaller display, or when someone makes the browser window smaller. They can also have a maximum size they will stretch so that the lines don’t get too long on jumbo displays. Dynamic sites are cool, but are very hard to do with the new style of using CSS stylesheets and using CSS is a good idea. So dynamic sites are not as common anymore.
Here is a dynamic-sized sample. To see it work, resize your browser window/
Operating Systems/Browser
I am including these together because it really only affects testing the web site. Linux is used by less than 2% of users, Mac’s about 4% and Windows a whopping 94%. Now in academia, Macs are more prevalent so they shouldn’t be ignored. But this does mean most testing should be done on Windows platforms.
For browsers, IE is still winning at 66%, but this has dropped considerable as FireFox at 25% has picked up speed. Don’t forget Safari – even at less than 2% it is the primary browser used on Macs. Opera has the next largest share at about 1%.
So for testing, it is important to test IE and FireFox on Windows, and IE and Safari on the Mac. It would be nice to also test Opera and some of the Linux browsers as a final test, but they don’t make up significant market share.
Colors
Colors are going to look different on different monitors – period. Nothing you can do about it. LCDs have the added disadvantage that the angle of the screen can radically change the colors. So they cool and beautiful colors that you pick out on your display, might look muddy and crummy on another. The important thing is to check them on several different monitors including CRT and LCD monitors and find a happy medium.
Mobile
Finally, although I didn’t include it as a main consideration, the web site should be considered on how it will look on mobile devices. There are two strategies for this: have a simple main web site that will look okay on mobile devices, or build a completely new web site especially for them.
Simple web sites can be constructed that will look good on mobile devices. Just avoid Javascript for important things (like drop down menus), large graphics, and complicated layouts. If you need to have one of these, then consider designing a simple, parallel web site just for mobile users.
Summary
In summary, if you design a web site to be viewable on a 800×600 display and look really good on a 1024×768 display, test on IE, FireFox and Safari, and make sure the colors look okay on several different types of monitors, you will be producing a web site that is best able to accommodate different monitors and configurations.
References:
- http://www.w3counter.com/globalstats.php
- http://www.useit.com/alertbox/reading_pattern.html
- http://www.w3schools.com/browsers/browsers_stats.asp (This is skewed towards developers)