By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Layout and Usability Part 2

Dealing with Layout, Usability, standards, and users.

Edited: 2011-03-16 02:38

When you first got a website up and running, which validates towards the standards to the extend possible. The layout will often continuously need to be improved, not only for design reasons, but also for usability and accessibility reasons.

I've seen a lot of bad layouts, usually its just a matter of applying a few CSS styles, or changing existing styles. Generally remembering to use margin, and remove default browser styles would help us a lot. But everything should fit together nicely with the rest, the way to deam if a given style fits, is to test the readability, and the contrast, basically how it works. Also keeping in mind, that its a bad idea to rely on images alone, as well as it is bad to rely on text alone.

For instance, people shouldn't have to read through walls of text or links, to make sense out of your content. Most people are only "scanning" through your content, and many are skipping everything they don't instantaneously recognize.

I've seen websites that mainly consisted of articles and news, the only way to make sense out of these, would be to read a good chunk of the long list of links, consider to split long lists into subsections. Its a good idea to clearly indicate which section contains the Articles, and which contains the News.

Text Guidelines

Text should not be in a fixed font-size I.E. PX, and should be readable on the background of which its rendered.

Don't fear using br tags to force line breaks when they are needed, but consider to close the paragraph and start a new instead. This goes in the category to Separate Content From Style, do not neglect the importance of this. But remember that some styling is required, otherwise you end up with walls of text, remember to take full advantage of the markup language you are using, such as remembering to use the h1-h6 tags in a way which makes sense, and properties such as margin and padding when possible. This will sometimes make things easier to maintain later, if you decide to change the max-width and/or min-width.

Text Alignment

Many beginners make the mistake to center all of their text, thinking that it looks better, or more professional. Avoid this, the alignment of text rarely needs to be changed from the default alignment which is left.

Image Guidelines

Images should have a describing alternative text, this can be done by the use of the alt attribute. If using images in navigation menus or the like, simply use the text on the image as the alternative text.

Logos placed as Images

Avoid to place a potential site-logo first in your document, instead place it further down, after the content, and use properties like CSS Position to place the image visually at the top.


Do not use Captchas, such as generated images. People are known to fail the Captcha, and bots are known to get past the Captcha, rendering it obsolete, they are also annoying your users. Instead use email validation, and consider to change the submit forms dynamically, or ask the question in plain-text. You may also want to consider using the rel="nofollow" to limit postage spam.

Background Guidelines

Avoid using black backgrounds, and avoid using confusing background images, make sure that any potential text is readable on your background. If you manage to work out a layout with a black background, make sure to provide printers with an alternative layout to save ink, this can be done by the use of CSS.

Disturbing Content

This goes from Ads, to Flash Intros, and Popups, Forced Redirects and refreshes.

Its usually a bad idea to start your website with a flash intro, most people are annoyed by the intro, and doesn't care about your intro. Ads shouldn't contain sound, and if they do, they should only start playing the sound or music, when the user clicks a button, not when hovering the mouse over the Ad.

There are times where having some background sounds would be acceptable, but make sure these ain't annoying to the user. They should be "soft" environment sounds, and not disturbing music.

Popups should be avoided, and if your site uses navigation elements in flash, make sure to replace functionality of the back and forward buttons, as well as the "open in new tap", and "browser window", when possible.

Streaming Media

Some websites are using the upload bandwidth from their users, while these users are watching a stream, this means they will be uploading parts of the stream they downloaded. If you use such means, make sure to provide your users with an alternative way of watching the content, which doesn't use their upload bandwidth. This is especially important if they payed for the access to the content.

Stating the Obvious

When it comes to layout, its often about stating the obvious. What i mean about this is, usually a webdesigner will very well be able to see what works the best, but often we find ourselves trying many different styles for a given element, until we find one which works.