Adobe Dreamwever (Macromedia Dreamweaver prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial series covers the core functions of Dreamweaver to design a website for all screen resolutions using Dreamweaver, mostly any version of these software should be fine.

Compatible Versions of Dreamweaver for this Tutorial

Dreamweaver MX/MX 2004 | Dreamweaver 8 | Dreamweaver CS3 | Dreamweaver CS4
Note: Instructions remain same across all versions listed above, though some visual interface images might differ.

Prerequisite Knowledge

This tutorial teaches you how to design a website for all screen resolutions using Dreamweaver and thus assumes you are familiar with some design software, even if you are new to Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a total novice.

You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Designing Web Sites 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 Fireworks 4.0 or higher and 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><p>SmartWebby website templates are designed with Fireworks 4.0. and Dreamweaver 4.0. You need Fireworks 4.0 or higher and 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.

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Bookmark & Share

Bookmark and Share this web page.