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 sites 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.
- As of January, 2010, 20% of users were viewing with screens set at resolution
1024×768 and 76% set at 1280×1024 and higher. Thus, 800×600 and
lower account for only 4%. So certainly, 800×600 can be taken as the
minimum resolution a site should fit. And now, designers are designing
only for screen resolutions of 1024×768 and higher.
- See w3schools for up to date statistics.
Design Basics
- There are two ways to design your website - Table design and Table-less design (using CSS and 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.
Page Design Tips
Avoid informing visitors that your site is "best viewed at" a certain resolution or with a certain browsers. It's not a helpful hint. It's a synonym for poor design practices. Fortunately, it isn't hard to design a good site or test it. You just have to take the time to do so.
Many Web designers use large monitors and run them at the highest resolution possible. Professionals who would never post a Web site without testing it on all browsers often forget that screen resolution can affect page display even more than browser differences. In addition, monitor size can effect the display of pages.
Here are a few simple steps you can take to design and test sites that work in multiple screen resolutions:
- Detect screen resolution and redirect the visitor to a page optimized for their particular resolution.
Here is a JavaScript source file that contains a script that will detect and redirect based on screen resolution.
Some designers may be willing to go to this much trouble, but imagine the time it takes to maintain multiple copies of the same page and the possibility for error! Also, the script uses a redirect and some search engines penalize pages with redirect scripts.
- Centered table with fixed width: Many Web sites that use tables for layout set the table width to a fixed number of pixels to eliminate horizontal scrolling at lower screen resolutions. A page optimized for 800x600 should have a maximum width of about 760 pixels.
Now remember that someone viewing the page at a higher resolution will see a lot of empty space. The page may display more attractively if you center the table and give the page a complimentary background color.
- Percentage table width: Some usability experts recommend the use of a percentage table width instead of a fixed width. Then, the Web page will always fill the browser window. That's a very reliable method for smaller monitors, but take care that your page doesn't stretch out too much if someone were to view it on a 21-inch monitor.
- Also consider taking steps to speed up your tables. Large and/or nested tables in particular can dramatically slow page display.
- Test it, test it, test it: You can test your page quickly just by changing the screen resolution of your own monitor. In a Windows environment, select "Start | Control Panel | Display | Settings" to change your monitor's resolution without restarting your machine.
That's an easy way to do a simple check, but more thorough testing requires multiple operating systems, browsers, and browser versions. NetMechanic's Browser Photo tool puts all that at your fingertips at a fraction of the cost of a full-blown testing lab.