Expandable Website Design
This article learn you how to design a website that utilizes the available browser space efficiently and looks good for all screen resolutions. From research we have found that majority of our viewers are on the 1024x768 resolutions and higher.
Lowest Screen Resolution
Before you start your design you need to decide on your lowest screen resolution. But less than 0.5% is on the 640 x 480 resolution. The next important resolution is the 800 x 600 resolution. Some of our visitors are on this resolution.
Design your web site on this resolution
Once you decide on your lowest screen resolution you need to design your web site for that resolution. This means that all your graphics will be designed for this resolution.
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.
While converting your design to HTML make sure all your tables are measured in terms of percentages
You need to work in terms of percentages and not pixels. If you work in pixels you are giving an absolute measurement to a table.
For example - if you were to design a site for an 800 x 600 resolution, you would make a table with width 800 px and height 600 px. But if you were to design a web site for all resolutions you need to make a table with width and height 100%. The first step is to make a table with 100% height and 100% width. You could make it 95% if you want some white space around it.
Another very important step - You need to give a fixed measurement to all your cells except for the content cell. You can leave this cell blank.
