Designing For Various Screen Widths

A visitor who has a very wide monitor reported that the right side of the header shows a large ’empty’ space. This was a surprise since the Sand Dollar template uses a ‘fluid width design’ to accommodate varying monitor sizes. The sidebar and post columns expand to the width of the screen and so does the starry background. However the header image is only 1001 wide. The snapshot above uses a 1600 wide screen in FireFox. The same thing happens in the Internet Explorer 7.0 browser.


Amazingly some people use 1920 pixel wide resolutions. If your design has a fixed width (say 1001 to match your header) then everything will be centered in the screen with the sides filled in by the page background image or color. With fixed width design, the browser creates a scroll bar for the user who has a screen smaller than your defined page width.

In a stretch design you use percentages to define each element’s width. Unfortunately a non-repeating background image can not stretch across the 1600 screen. So you end up with extra space. The post text for this blog takes up 62% of any monitor and the sidebar 31%, so they stretch easily across a wide screen. However, the result can be very long lines of text which are harder to read.

The coding experiments site offers a solution that used style sheets to selectively limit the fluid width. I’ve done that with the post text by make it use 85% of the available space (within the 62% screen width.) But the CSS properties called min- and max-width are more exact. For example I could define the sidebar and post columns to have a minimum of 100 and 400 px. That would force a scroll bar on smaller screens. This would still allow stretch to occur, using 62% for the maximum.


I still want the header as a background so I can add menu items on top and allow easier shrinking. So I decided to add a new template element that is a container for the header. Its height is 198, the same as the header’s, but has a new repeating image that continues where the header leaves off. This fills the right side of larger screens. See the snapshot now on a 1600 resolution.


It’s impossible to design for all browsers and all screen resolutions, but there are tools to help point out glaring problems (before your visitors do!). Look at your site statistics to see common browsers and screen sizes. Try testing your page in different browsers and sizes. Look at the resulting browser snapshots for anything unusual. Do this whenever you make a major change to your design.

You may also be interested in other posts related to blog design.
Choose Your Template Wisely
Color in Blog Design
Still want more? Try this blog/site for more information about effectively testing in multiple browsers.

If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.