You might have noticed that some web pages display well in one resolution and poorly in another. 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 there is no horizontal scroll bar in one resolution, but in another, there is a horizontal scroll bar.
These are some 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 of HTML and CSS to understand this article.
Resolution
Resolution is the maximum number of pixels displayed on the computer screen. The pixel is the smallest dot that can be displayed on the screen. You have the following standard resolutions: 800 X 600, 1024 X 768, 1152 X 864, and 1920 X 1080. 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 discuss the percentage in contrast to the pixel. In CSS, a pixel is typed as px, and the 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 displays a web page, there is what is called the Client Area. The client area is below your browser’s horizontal bars (top) and above the taskbar. The total width of the client area is taken as 100%. The overall height of the client area is taken as 100%.
Under normal circumstances, the dimensions in the percentage of any element in the BODY element are measured relative to the client area’s dimensions (width and height). 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 on 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 an 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 BODY element’s height can always extend 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 are in the percentage that it has been 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 will change. Text in the containing element typically wraps to fit the new width of the containing element. So the font does not pose a problem with the resolution change. The font size of the 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 certain 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. In this new resolution, the text (with other inline elements) in each of these elements will adjust to fill the element, beginning from the top. So for each element with fixed 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 the pixel, the image would still have the same actual size as it had with the percentage. So, you now have an image with dimensions in percentage, and you know the equal dimensions in pixels.
The image will appear bigger when the web page with the image is displayed on a higher-resolution screen. Know that the image details will be lost in the higher resolution under this condition. If you had given the image’s dimensions in pixels in a higher resolution (with a bigger screen), the image size 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 lots 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. Accept this paragraph’s principle; I will not explain how it works.
The problem of loss of details is seen only with images and videos (moving pictures consist of images) when the percentage is used. It is not seen with other HTML elements. I have told you how to solve this problem. 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 image’s dimensions on 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 do not contain elements. You should worry about the width of the whole table in percentage. Avoid giving the table any height value, either in percentage or pixels; giving your table a height value will constrain your design and the way the browser format the table’s contents.
Let the elements in the table cells be inline. 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 format a table cell.
Use the percentage unit for the widths of the table columns (vertical group of cells). 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
You can still use percentages if you want to position elements relative to some point in the containing element. However, you do not 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 action.
With static web pages, you do not 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 proper purpose (for example, use the bulleted list when you have list information). You can improve your design’s looks by using colors and element background images, not complicating the layout. Following this advice will make you fine with static web pages. A good (looking) website is not necessarily complicated in design.
A Weakness With Some Browsers
Assume that you have two DIV elements in your web page layout, 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 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 to this problem is slightly reducing the percentage width value of one or all DIV elements. 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 Municipality of Guagua, Pampanga’s web page 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. For example, if you want a button, 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 do not have to worry about the dimensions of the button and some other HTML elements.
The problem with resolution comes with large containing elements and the image. The Paragraph element, for example, does not 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 necessary; if necessary, then the percentage unit is preferable.
If you want a rule here, 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 necessary.
Always remember that the browser gives you the appropriate dimensions when you do not give element dimensions.
This is vital. In the CSS specification, it is said that a 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 relativeness of the pixel. Now, very few website designers want to worry about that relationship. So, for the ordinary website designer, the pixel behaves more like an absolute unit than a relative unit.
Remarks
Despite all that I have said, some browsers may show small weaknesses. Test your design with different browsers and correct the flaws. 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 newbie to website design, you can gain confidence quickly by doing one of the following:
1. Give yourself web page design projects and use the percentage as the dimension unit, following all the advice I gave you in this article.
2. Go back to some of your previously designed web pages and convert the units from pixels to percentages, following all the advice I gave you in this article.
Summary and Guidelines
- Design your 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 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 adjustments necessary for browser compatibility.