How To Design A Website For All Screen Resolutions

These days are really full of challenges for a web designer. Modern website design should be extremely flexible, ensuring compatibility with different computer platforms, browsers, and screen resolutions used. The latter is crucially important to make a website look integral and similarly on different screens, irrespective whether it is an old 800x600 CRT monitor or a modern widescreen with 1280x1024 or even higher resolution.

 

The layout of a web page is usually based on a table structure, and web masters have to define the sizes of that table. For example, if a web page will be based on the table with the width of 800 pixels – such webpage will look ideally on a monitors with 800 x 600 resolution, however, on a screen with higher resolution, let us say 1024x768, such a web page will have empty horizontal spaces (on the left, right, or on both sides of the page itself, depending on the alignment). This may result in certain improper esthetic feel of the website, but most important is that the space, which can be used for a valuable content, remains unused. So, how to build a website for all screen resolutions?

 

And here is the answer… Use relative dimensions instead of fixed ones. In other words, instead of pixels use percents. For example, defining the width of a table, use 100% instead of 600, 800 or whatever pixels, if you want it to be displayed at full width of the screen. If your table has several columns, for example, one – for menu bar and another one – for content, it is recommended to use fixed size for menu side bar, but relative width for the content column. For example, in a table with two columns we can specify 150 pixels for a column with a navigation menu, and 100% as the width of the other column for content itself. In this situation the browser will display navigation menu in similar size on any screen resolution, but it will resize the content section so that to fit all the screen irrespectively to what resolution is used on a computer.