HTML for Screen Resolutions

Determining HTML for Screen Resolutions

There are a number of screen resolutions currently in use by most website visitors, and the number of resolutions grow as computer monitors get larger. Standard screen resolutions include:

• 640 x 480
• 800 x 600
• 1024 x 768
• 1280 x 800
• 1280 x 1024
• 1680 x 1050

Several options are available to an experienced webmaster to create a website that remains formatted well regardless of the screen resolution the website visitor is using.

These options include using tables, using Javascript, and using programming standards that provide a flexible layout.

Using Tables to Format a Web Page

When you use tables to format your web page, you have two options. You can either make your web page automatically adjust according to the resolution and the size of the browser window, or you can make your web page remain in a fixed position and force the user to scroll the screen to view it. There are pros and cons to both.

• Fixed Table: A fixed table remains a set number of pixels wide. This allows you to create your web page based on a certain resolution, and then insert that web page into a fixed width table. The benefit to this is that it will preserve the design of your web page. The downside is that if a visitor's resolution is much smaller than the one you designed the web page on, they will need to do a lot of scrolling to view your web page.

The formatting to create a fixed table is:

• Dynamic Table: A dynamic table adjusts according to the resolution and size of the browser screen. The set width of the dynamic table is typically a percentage of the browser window. The benefit to using a dynamic table is that the user doesn't need to scroll to view your web page. The downside is that the formatting of your web page can potentially become extremely as the browser window is resized by the user.

The formatting to create a dynamic table is:

Using Javascript to Format a Web Page

Another approach many web page designers use to accommodate all users is to create multiple screens based on every available resolution, and then use Javascript to determine the user's resolution and call the appropriate page.

This Javascript is placed in the header section of the web page, and appears as follows:

The script above checks if the user has a high resolution of 1024 x 768. If so, the script loads the high resolution page. Otherwise, the low resolution page is loaded.

This script could potentially be used to check for all screen resolutions and call a page designed for that particular resolution. By using this approach the appropriate HTML for screen resolutions is determined.

Tips for Creating a Flexible Layout

Another approach which is more dynamic and flexible, is to create the web page code in a way that forms a "flexible layout" which will work regardless of the size of the browser window.

In order to do this, each of the following rules outlined below should be followed.

Use Newer Web Technologies

One of the best things to happen to web design was the invention of Cascading Style Sheets (CSS). CSS allows the use of a single .style template to guide the formatting of all web pages that use it.

The standard guide to follow in order to make the formatting as flexible as possible is to use HTML only to supply the content within the web page, use CSS to define how the page is formatted, and use Javascript or Flash to add any "bells and whistles".

Base All Sizes on the Browser

Wherever you can, always define the size of an object based on the size of the browser window. Whether it's a table, image, or anything else where you set the "width", use percent units. This will keep the table or image constantly at a defined percentage of the browser's width.

Using this technique makes the browser do all of the work to reformat the webpage depending on the size of the browser window.

This rule also applies to font size. The defined font size within your web page should be a percentage of the main body text size that the visitor's browser is set at. This will ensure that the visitor is viewing your web page at the same font size as every other web page that's displayed in that browser.

Always Float Text Around Images

An excellent technique to use that will keep your web page flexible is to always wrap text around your images. This way, if the user resizes the browser window, the image will still remain in the same position on the web page, the text will simply readjust around it in order to accommodate less space.

The syntax to wrap text around an image is as follows:

You can also set align to "right" if you want the image to place on the right side of the text.

Dynamic Website Designs

Following the techniques above will ensure that your webpage can be viewed on many more browsers and it will appear to more visitors with the formatting intact and with a clean layout.

Following these simple rules, you'll be creating flexible web pages like a professional.