Wednesday, 11 August 2010

New Site Design to Fit Modern Monitors and Browsers

Filed under: Just Great Software — Jan Goyvaerts @ 11:22

Last month I created a new design for just-great-software.com and the releated product sites. The refreshed design was long overdue. Though the content of the Just Great Software product sites was regularly updated as product updates were released, the design hadn’t changed since 2002. 8 years is a long time on the Internet.

The key difference between the old and new designs is that the old design flowed the text to fill up the full browser width, while the new design uses a fixed width. In 2002 common screen resolutions were 800×600, 1024×768, and 1280×1024. With such low resolutions, you want to make sure your site uses all available space. Letting the text flow was good practice back then.

Today “full HD” is all the rage. Common resolutions range from 1280×800 to 1920×1200. If you allow the text on your site to take up the full width, your visitors will end up with extremely long lines if they have their browser maximized on a full HD screen. Such long lines are hard to read.

So I’ve changed the just-great-software.com design to always use the same number of horizontal pixels to display its content. If the browser is narrower, the user will have to scroll. If the browser is wider, the extra space is filled with a background image.

This is common practice today. But there are two things to consider. First, how wide do you make the site’s content? If you make it too wide, users with lower resolution screens have to scroll horizontally, which is very annoying. If you make it too narrow, you’re wasting space that could have been put to use to put more text above the fold (i.e. visible without scrolling down).

I decided a width of 920 pixels is just right. The text still fits even on older 1024×768 screens. More importantly, on the increasingly common 1980×1200 and 1980×1080 resolutions, 920 pixels fits exactly when the browser takes up half the screen and the vertical scroll bar is visible. In Windows 7 you can easily make the browser (or any other window) take up half the screen by holding down the Windows key and then pressing the left or right arrow key. I find this a very comfortable way to browse the web. It keeps the line length manageable on sites that don’t use a fixed width design. I do this with two monitors, so I can have four web pages visible at the same time.

Another important change since 2002 is the way that browsers zoom web pages. In 2002, browsers did not really zoom. They made the font larger or smaller. Images and other graphical elements did not change. This made it difficult to design pixel-perfect web sites. If you style sheets to set the font sizes in pixels, your site looks good, but the user cannot change the font size at all. If you set font sizes using em or percentages, you can’t predict the font size or how the text will flow. If you wanted your users to be able to change the font size, you had little choice but to let the text flow freely instead of designing your site for a specific width (which didn’t scale with the font).

Fortunately, all modern browsers now have real zoom features that scale everything, including images. So using pixel sizes to position and size everything, including text, is the way to go today. If the text is too small or too large, the user can zoom the entire site in our out.

No Comments

No comments yet.

Sorry, the comment form is closed at this time.