Web things - layout check

Layout check - some points

In the beginning many problems came to me after I change the font size on Windows from normal font (96dpi) to large font (120dpi). My layout and the text was fragmented, no more readable and terrible. Now I use a simple two-column floated, liquid and elastic layout on my sites. Most of my problems with the layout has gone.

Howto: Layout checking

1. Separate design from content
2. Check the markup with an validator
3. Resize the layout with any browser
4. Use different screen resoultion
5. Use different browsers on several platforms
6. Check that the site is still accessible for everybody
7. Is there a CSS for media print?

1. Separate design from content

Is the site still readable and useable if you switch off all CSS and images? Do you have a high contrast reproduction?

• On Windows you can use the OffByOne browser
• On Linux you can use the Dillo browser

2. Check the markup with an validator

Is the markup valid?

QA check

3. Resize the layout with any browser

Is your content visible if you resize the browser window or you add the history sidebar in your browser? Is your layout fragmented if you resize the font-size from default to large size?

4. Use different screen resoultion

Is your layout fragmented if you resize (if possible) the screen resolution to?

• 800x600
• 1024x768
• 1280x800/1440x900 (Laptop Wide Screen)
• 1280x1024
• Small display with Mobile phone/PDA
• TV resolution on game console

5. Use different browsers on several platforms

Is your layout fragmented if you use one of the following browser?

• Microsoft Internet Explorer (Windows)
• Firefox (multi platform)
• Opera (multi platform)
• Safari (Mac OS and Windows)
• Google Chrome (Linux, Mac OS and Windows)
• Konqueror (most Linux derivates)

6. Check that the site is still accessible for everybody

Is your site readable and usable with screen readers? Do you have visible and usable skip links? Can you navigate within your site only with keyboard? Is the text clean and easy to read? Can persons with disabilities use the site?

WAI check

7. Is there a CSS for media print?

If you print webpages, so you don't need the main navigation or sidebars. Only the content should be print. Also the <acronym> and the <abbr> tags should print as normal text.