Designing Web Sites For All Screen Resolutions

Tool(s) Required:

HTML Editor: Any
Recommended: Adobe Dreamweaver CS3

This tutorial teaches you how to design a website that utilizes the available browser space efficiently and looks good for all screen resolutions.

Why do we need to design for all resolutions?

Web site design scalability - As technology advances and the configuration of monitors keep increasing it is impossible to test your site in all screen sizes. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site. Check out our website in different screen resolutions, you will find that it will fit the screen width.
To fit available browser space for easy reading - Try out a fixed width site in all resolutions (especially higher than 1024x768) and see how empty and unprofessional it looks. Now take a look at this article page in all the resolutions and feel the difference. If it is necessary for you to keep a fixed width then we have given suggestions on how to do it more professionally (read below).
To keep your viewers on your site - A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing.

Viewer Statistics

There are more than 40 different screen resolutions.
1024x768 is the most popular resolution used (getting the lions share of around 60%) followed by 1280x1024 and above (around 25%) and 800x600 (around 14%). 98% of users have 800x600 and above resolution, thus, 800x600 can be taken as the minimum resolution the site should fit (other lower resolution are seldom used).

Design Basics

There are two ways to design your website - Table design and Table-less design (using div tags).
For a beginner using tables is the best as there isn't much that can go wrong with the use of tables. For advanced users and design professionals designing using CSS styles and div tags is a must for optimal results of load time and to follow W3C standards.
For stretch layouts we need to give the width of the table(s) or div(s) in percentage.
To fit the whole screen for any resolution - the outer most table(s) or div(s) are given 100% width. If the design can be made to have just one outer table then it can be given a height of 100% to expand and fill the browser space vertically.
To make only the content area to expand do the following. After the outer most table or div is given the width in percentage all inside cells or div tags should be given fixed widths in pixels except the content cell or div.
If you like the fixed width concept or are forced to have a fixed width (especially when using curved graphics like in our Template 7) you can give a contrasting background color and/or a shadow effect/border to the table to make it stand out. These effects can also be used along with the stretch layout concept by giving the table or div width as 90 or 95 percent.
Some of the templates don't fit the screen vertically due to design limitations and netscape compatibility issues. Instead of using 100% as the height, here the extra space can be cleverly hidden by using a background color or fill (example: Template 9).

Example

Test the following table design in all resolutions. The copy paste code is given below:

Logo

Your Site Name

SmartWebby web site templates

Our templates are designed with Fireworks 4.0. and Dreamweaver 4.0. You need Macromedia Fireworks 4.0 or higher and Macromedia Dreamweaver to use these templates. If you're familiar with Fireworks and Dreamweaver you can get your site up and running within a day.

Copy-Paste Code

<table width="100%" height="400"  border="0" cellpadding="0" cellspacing="0">
	<tr bgcolor="#003399">
		<td width="100" height="100" align="center">
			<table width="50" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000033">
				<tr>
					<td align="center"><font color="#CCCCCC" face="Verdana, Arial, Helvetica, sans-serif" size="-1">Logo</font></td>
				</tr>
			</table>
		</td>
		<td height="100"><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif" size="+2">Your Site Name </font></td>
		<td width="30" height="100">&nbsp;</td>
	</tr>
	<tr bgcolor="#000033">
		<td width="100" height="5"><img src="/images/spacer.gif" width="100" height="5"></td>
		<td height="5"><img src="/images/spacer.gif" width="100" height="5"></td>
		<td width="30" height="5"><img src="/images/spacer.gif" width="30" height="5"></td>
	</tr>
	<tr>
		<td width="100" bgcolor="#990000">&nbsp;</td>
		<td valign="top" class="text">
			<table width="100%" height="270" border="0" cellspacing="0" cellpadding="20">
				<tr>
					<td class="text"><p>SmartWebby website templates are designed with Fireworks 4.0. and Dreamweaver 4.0. You need Macromedia Fireworks 4.0 or higher and Macromedia Dreamweaver to use these templates. If you're familiar with Fireworks and Dreamweaver you can get your site up and running within a day.</p>
					</td>
				</tr>
			</table>
		</td>
		<td width="30" bgcolor="#990000">&nbsp;</td>
	</tr>
	<tr bgcolor="#000033">
		<td height="5"><img src="/images/spacer.gif" width="100" height="5"></td>
		<td height="5"><img src="/images/spacer.gif" width="100" height="5"></td>
		<td height="5"><img src="/images/spacer.gif" width="30" height="5"></td>
	</tr>
	<tr bgcolor="#003399">
		<td width="100" height="30">&nbsp;</td>
		<td height="30">&nbsp;</td>
		<td width="30" height="30">&nbsp;</td>
	</tr>
</table>

* - Create a spacer image (1px X 1px transparent) and place it inside your images folder under the site root.

We hope you found this tutorial interesting and helpful. Check out our other web design resources as listed in the left menu.

Read the next tutorial (Dreamweaver Tips) >>

This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips and ideas to HTML, CSS Styles, Fireworks and Dreamweaver you'll find all you need to know about web design right here!

SmartWebby.com provides top-quality web design & web programming services globally. Since January 2001, we have successfully built more than 200 professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating highly professional W3C Standard compliant and load-time optimized websites at extremely affordable prices, we leave our competition far behind in terms of "value for money". We specialize in Rapid Web Design using Adobe Tools, ASP.net/ASP/PHP web programming, W3C Standard compliant CSS & HTML programming, high quality Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team is capable of delivering a website that's over & above your expectations. Check out our popular Web Design Packages today!

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization