Written by Brad Traversy | 25 May 2010

Expandable Website Design

Tutorial: Designing a Website for All Screen Resolutions

Designing a website to fit all screen resolutions is a very important web design principle. Perhaps you’ve noticed that most websites are designed for only one resolution. They may look perfect in 800 x 600 resolution but if viewed in 1024 x 768 resolution, the pages look a little empty with a lot of wasted, empty space surrounding the main object on the page.

Based on the results of research done by the folks at Entheos, the majority of their site viewers were using 1024 x 768 or higher resolutions. Based on their website statistics, they concluded that as time goes by, more people will switch to higher resolutions. If that holds true, then it becomes even more important for designers to design sites for multiple screen resolutions.

For an example of this concept, visit the Entheos site in any resolution higher than 800 x 600 and you will find that the pages are designed to fit the screen resolution exactly. That means visitors who are using a higher resolution setting can see more content in one page without having to scroll.

Once you’ve seen and understand what an “expandable” website is, you’re ready to start building your own in just 6 simple steps.

Step 1: Decide on a Minimum Screen Resolution

Before you start, decide what your lowest screen resolution will be, based on your expected visitors. Entheos’ research suggests that less than 0.5% of website visitors are using the 640 x 480 resolution. So you should start at the next level: 800 x 600 resolution. Some of Entheos’ visitors are on this resolution so they use this as the minimum screen resolution - which means their website has to fit all resolutions equal to or higher than 800 x 600.

Step 2: Design Your Website Using Your Minimum Resolution Choice

Once you decide on your lowest screen resolution, you need to design your website for that screen resolution. Specifically, you need to design (or scale) all your graphics and page elements for this resolution  then export all the components as you would normally do.

Step 3: Use Percentages, Not Pixels

While converting your design to HTML, make sure all your tables are measured in terms of percentages instead of pixels. This is THE most important part of developing a website for all resolutions. If you’re using pixels for a table, you are giving an absolute measurement to it, whereas working in percentages you are assigning a relative measurement: a percentage of the total screen resolution.

To illustrate this concept: If you designed a site for 800 x 600 resolution, you would probably make a table with dimensions of Width 800 px x Height 600 px. However, to design a site that accommodates all resolutions, you need to make a table with width and height of 100%, so that whatever the screen resolution is, the web page will automatically scale to fit 100% of the screen. The first step is to make a table with 100% height and 100% width. You can use a smaller percentage if you want to allow for some white space around the table.

Step 4: Within the table, measure all cells in pixels except for the Content cell

This is another very important step. You need to give a fixed measurement to all your cells except the Content cell. Leave the Content cell blank.

Example 1: Full Page

Detail:

• The width and height are 100%
• The first and last columns are given fixed measurements of 120 px and 10 px respectively
• The middle column (content column) is given no measurement so that it will scale to fit the page.
• The same logic is used for rows (for the height). All the rows have a fixed height except for the content row which will scale to fit the page.

Example 2: Header Only

HTML Code
<table width="100%" border="0" cellspacing="5" cellpadding="5">

<td width="9%"> (Each cell is 9%)

Step 5: Insert images and content

Once you have designed your tables in terms of percentages you need to insert your images and content. The usual layouts will probably have a logo which can come on the top left corner and your navigation buttons in the top right or left navigation bar.

For more complex layouts you will need to use background fills to design your websites. Remember: since you are designing a website to fit all resolutions, you need to position your images accordingly (for your header).
TIP: The easiest guideline to follow (if possible) is to use the top left and right corner cells for fixed images and use the middle cell to scale according to the size of the page.

Step 6: Test your site in all the resolutions

The final step is to test your site in all the resolutions that are available on your computer. When you are satisfied that your site is viewable and working in all resolutions, pat yourself on the back because you’ve just created your first expandable website. Congratulations!

References and Resources

Entheos Web Design – http://www.entheosweb.com