Perfect Web Creations

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?

1. 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.
2. To fit available browser space for easy reading - Try out a fixed width site in all resolutions (especially higher than 1024×768) 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).
3. 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.
• 1024×768 is the most popular resolution used (getting the lions share of around 60%) followed by 1280×1024 and above (around 25%) and 800×600 (around 14%). 98% of users have 800×600 and above resolution, thus, 800×600 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 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.