Web Page Design for All Resolutions

Introduction
You might have noticed that some web pages display well in one resolution and poorly in another resolution. For the same web page, in one resolution the distance between some HTML elements may be satisfactory; in another, the distance might be too long or too short. You might also have noticed that in one resolution, there is no horizontal scroll bar, but in another, there is a horizontal scroll bar. These are some of the problems with displaying a web page in different resolutions.  Would it not be nice, if your HTML elements had the same size and the same inter-distance in all resolutions? There is a solution for this: the secret is to use Percentages for the dimensions of the XHTML elements.

You need basic knowledge in HTML and CSS to understand this article.

Resolution
Resolution is the maximum number of pixels that can be displayed on the computer screen. The pixel is the smallest dot that can be displayed on the screen. You have the following common resolutions: 800 X 600, 1024 X 768, and 1152 X 864. Other resolutions exist.

Different computer screens have different resolutions. As a user moves from one computer to another to see the same web page, the problem of resolution sets in.

Element Dimension Units
By Element Dimensions, I am referring to the widths and heights of HTML elements. Before we continue, know that it is better to give the dimensions of your HTML elements using Cascaded Style Sheet. You can measure dimensions in percentages or pixels. You can also measure dimensions in inches, centimeters, millimeters, points or picas. So far as resolution is concerned, these four units have the same effects, as the pixel. So, for the rest of the article, we shall be talking about the percentage, in contrast to the pixel. In CSS, pixel is typed as px, and percentage is typed as %.

Containing Elements
A containing element is an element that can contain another element. Examples of containing elements are the BODY, DIV, PARAGRAPH and FORM elements.

The Percentage Unit
When the width or height of an element (e.g. img element) is given as a percentage, it is usually measured relative to the dimensions of its containing element.

The Client Area
When a browser is displaying a web page, there is what is called the Client Area. The client area is that area below the horizontal bars (top) of your browser and above the taskbar. The total width of the client area is taken as 100%. The total height of the client area is taken as 100%.

Under normal circumstances, the dimensions in percentage of any element in the BODY element are measured relative to the dimensions (width and height) of the client area. So a DIV element with a width of 50% will take half the width of the client area. An image element in the BODY having a height of 50% will take half the height of the client area. Even if the image is found lower down in the web page and you have to scroll down to see it, if the height was given as 50%, when you see it, it will be 50% of the client area height.

Talking about containing element, if the image is in a DIV element, which is in the BODY element, then the image in the DIV element with a 50% width should occupy a 50% width of the DIV element; that is effectually 25% width of the client area.

The BODY Element
The default width of the BODY element is that of the client area. The height of the BODY element can always extent down below the client area, and you will have to scroll down to see the elements in the BODY lower down. Know that whenever you give dimensions (width and height) in percentage to any element in the BODY, the percentage is relative to the dimensions (width and height) of the client area, and not the width and height of the BODY element. In this light, the BODY element is an exceptional containing element. With other containing elements, the width and height of an element in percentage that it has, is relative to the width and height of the containing element.

Fonts and Height of Containing Elements
Assume that you do not give the pixel unit to the dimensions of a containing element, when the resolution changes, the actual size of the containing element will change. Text in the containing element normally wraps to fit the new width of the containing element. So the font does not normally pose a problem with resolution change. The font size of character may change slightly as the resolution changes, but this is not usually a big deal.

So far as fonts (text) or other inline elements are concerned, the problem is usually with the height of the containing element. Imagine that you have two containing elements, one above the other, vertically. Assume that you give these elements definite heights and widths in percentage, text fills both elements, and everything is fine in one resolution. You now move to another resolution where the actual width and height of the containing elements have increased. What will happen in this new resolution is that the text (with other inline elements) in each of these containing elements will adjust itself to fill the element, beginning from the top. So for each of these two elements with definite width and height in percentage, the bottom part will be empty, since each has expanded, but the amount of text inside has not changed.

Heights of Containing Elements
Because of the above problem, you should avoid giving heights (values) to containing elements. Avoid giving heights to containing elements either in percentages or pixels. You can give containing elements widths in percentage, but not heights. If you do not give containing elements heights, the browser will always give you the height for which text (and other inline elements) will fit into the containing element (with no spaces at the bottom).

Images
Common resolutions today are, 800 X 600, 1024 X 768, and 1152 X 864. The bigger the resolution, the bigger the computer screen. Assume that you have an image, in the smallest resolution screen, and you have given the image dimensions in percentage. Also assume that if you had to give the image dimensions of pixel, the image would still have the same actual size as it had with percentage. So, you now have an image with dimensions in percentage and you know the equivalent dimensions in pixels. When the web page with the image is displayed in a higher resolution screen, the image will appear bigger. Know that under this condition, in the higher resolution the image details will be lost. If you had given the dimensions of the image in pixels, in the higher resolution (with a bigger screen), the size of the image would not have changed (significantly) and the image details would have been maintained. So, giving the image dimensions in percentage, results in an increase in size as expected but with lost of details. On the other hand, giving the dimensions in pixels maintains the details as expected, but with no size increase. That is one of the problems, change of resolution brings.

The solution is to design your web page with the highest resolution you think your users have and still give the percentage unit to the image dimensions; now as you go down in resolution, the screen size and the image size (and the entire web page) reduces; so, image details are not lost. Just accept the principle of this paragraph; I will not explain how it really works.

The problem of lost of details is seen only with images and videos (moving pictures consists of images) when the percentage is used. It is not seen with other HTML elements. I have told you how to solve this problem. There is some good news concerning images and their dimensions in percentages: If you give an image only the width value in percentage, the browser will display your image with the corresponding height, according to the dimensions of the image at the server. So you do not have to give both the width and height values for your images. Only the width value (in percentage) suffices.

HTML Tables
Cells of HTML table elements behave like containing elements but they are not really containing elements. What you should worry about should be the width of the whole table in percentage. Avoid giving the table any height value either in percentage or in pixels; giving your table a height value will constrain your design and the way the browser would format the contents of the table.

Let the elements in the table cells be inline elements. Give only the width dimension to an image in a table cell in percentage. The browser will give the corresponding height of the image. The image width value is relative to the width of the cell. You can use line break elements to do some formatting in a table cell.

For the widths of the table columns (vertical group of cells), use the percentage unit. Here a percentage is relative to the width of the table excluding the margins of the table.

Width and Height of HTML Elements
As we have seen from the above discussions, you should avoid giving heights to HTML elements. Avoid giving height to the BODY element; avoid giving height to DIV elements; avoid giving height to TABLE elements; avoid giving height to Table Cell elements; avoid giving height to images. You can give the width of these elements, a value in percentage.

Positioning
If you really want to position elements relative to some point in the containing element you can still use percentages. However you do not really need the CSS position property for static web pages. You should use the position property for dynamic web pages where you want the position of an element to change when the user takes an action.

With static web pages you do not really need the position property. For your static web page layout, use DIV elements to partition your page; use the Table element when you have information in a grid form; use the line break element and the CSS float property for positioning (small elements); use the right HTML element for the right purpose (for example, use bulleted list when you have a list information). You can improve the looks of your design by using things like colors and element background images; not by making the layout complicated. If you follow this advice, you will be fine with static web pages. A good (looking) web site is not necessarilly the one that is complicated in design.

A Weakness with some Browsers
Assume that you have two DIV elements in your web page design, next to one another horizontally, and you have given them width values in percentage. Also assume that when you add the two percentage width values you would have 100%. This means that the two DIV elements should fill the width of the client area (if their containing element is the BODY element). The problem here is that some browsers will display the DIV elements as you want (horizontally), while others will display them vertically, “thinking” that the values sum up to more than 100%. The solution with this kind of problem is to reduce the percentage width value of one or all DIV elements, slightly. Try your result with different browsers to obtain the best reduction.

Example
At this point, you may be eager to see an example. Well, the web page of http://www.cool-mathematics.com/ is a good example (where dimensions of the main containing elements are in percentage).

Do I have to give percentages for all HTML elements?
No. If you want a button for example, you do not have to give its dimensions the percentage unit or any other unit (pixels).  The change in resolution with different computer screens, for the button, is not a big deal. You generally do not have to worry about the dimensions of the button and some other HTML elements. The problem with resolution normally comes with large containing elements and the image. The Paragraph element for example does not normally pose a problem with resolutions, as paragraphs are not usually large compared to the dimensions of the client area. Do not give any dimensions (in any units) to any paragraph element unless you think it is very necessary; if it is necessary, then the percentage unit is preferable.

If you want a rule here, then I would say, give only the width dimension in percentage to large containing elements, Tables, Table Columns and images; do not give dimensions to anything else unless it is very necessary.

Always remember that when you do not give an element dimensions, the browser gives you appropriate dimensions.

This is very important. In the CSS specification, it is said that the pixel is a relative unit. This is correct, but you have to know the relationship between the pixel and the output device to appreciate the relative-ness of the pixel. Now, very few web site designers want to worry about that relationship. So, for the ordinary web site designer, the pixel behaves more like an absolute unit than a relative unit.

Remarks
Despite all what I have said, some browsers may show small weaknesses. Test your design with different browsers and correct the weaknesses. You probably have this question, “How do I master the design of web pages by percentage?” From what I have explained, it is not a big deal. However, if you are a newby to web site design, you can gain confidence quickly by doing one of the following:

a) Give yourself web page design projects and use the percentage as the dimension unit, following all the advice I have given you in this article.

b)Go back to some of your previously design web pages and convert the units from pixels to percentages, following all the advice I have given you in this article.

Summary and Guidelines
-    Design you web page at the highest computer screen resolution that you think your users have.
-    Apart from images, do not give dimensions to any HTML element unless you have to.
-    If you have to give dimensions to elements, give only the width dimensions to large containing elements, Tables, Table Columns and images; do not give the width dimension to anything else unless it is very necessary.
-    Give your width dimensions in percentage and know the property the percentage is relative to.
-    Test your design with different browsers and make any design adjustment necessary, for browser compatibility.

Chrys