|
|
|
|
|
|
Web Development Guidelines - page 2
author: Martin "mpot" Pot
date: 19 October 2004
navigation:
<prev
| 1
| 2
| 3
| next>
Readability
Backgrounds
Don't use busy backgrounds, particularly behind text, as it makes the text difficult to read.
Always use a plain background behind text, with a high contrast between the text colour and the background colour.
Animated Images
If you really want to use animated images, use them judiciously, and in moderation. Too many flashing and moving images are distracting and annoying to the visitor, and the last thing you want is for a visitor to leave your website because it exceeded a visitor's animated-image threshold.
Flash
Macromedia Flash falls into a similar category. Unless used very well, it becomes an annoyance. Thankfully, the popularity of Macromedia Flash intro pages seems to be decreasing, as they serve no real purpose other than to delay the visitor from viewing content on a website.
If I stumble across a website that uses a Macromedia Flash intro page, I always look for the "skip intro" link, rather than wait for the Flash to download and play.
Music
Be very careful about using music on your website. Having a tune of some sort that plays once the page is loaded doesn't really serve any purpose, other than slowing down the page load, and annoying the visitor, particularly if there's no obvious way to stop the music.
Page Size
Rather than putting lots of content onto a single page, you're often better off distributing this content across multiple pages. This is particularly true if the content is rich with images, as a single large page will take a long time to load, particularly for visitors on a dialup connection.
However, splitting a text-only page into multiple pages can lead to a disjointed article, and provides no real performance gain, due to the lack of bandwidth-hungry images.
Thumbnails
If using multiple images on a page, particularly if they are largish images, you're advised to use thumbnails, with each thumbnail being a clickable link to a larger version of the same image.
This ensures the page still loads speedily, with the large images still available for visitors who want to see them.
Note that specifying width="x" height="y" in the HTML <IMG> tag is not the appropriate way to do this, as the full image is still downloaded by the visitor's browser. Resizing images in this way only serves to shrink the size of the displayed image, with no change in the volume of data that the visitor's browser will download.
Instead, you need to create resampled, smaller versions of each image, typically at a lower quality, and use these smaller images as the thumbnail on the page. There's plenty of freeware software applications available that provide the functionality to do this, including the very useful
freeware IrfanView.
Screen Resolution
A website shouldn't be designed for a specific fixed screen resolution. Visitors who are using a higher screen resolution will be annoyed at the blank space around the content, and visitors who are using a lower screen resolution will need to scroll horizontally and vertically to view all content.
You are better off deciding on a minimum resolution, and ensuring your website works at that resolution, and ensure that it scales appropriately at higher resolutions.
Designing for a minimum resolution of 800x600 should be fine, as very few visitors use resolutions less than that.
Printability
Printability? Why?
Ensure the pages on your website are printer-friendly. Many webpages do not print nicely, with content either being lost off the right-hand side of the page, or with the content being squashed into the centre of the page.
Have you ever tried printing pages from your website? If not, try it, and be prepared to see what a mess it is....
While the layout of your site may look fine on at a resolution of 1024x768 (or higher) on a computer screen, when it's printed, menus and other navigation elements typically occupy a larger proportion of the available space on the page, due to the narrower width of a page, thus leaving little room for the page content.
Printable Versions
Some sites include a link to a "printable version" each page of their site, allowing users to view a minimalistic version of the same page, with the banner and page navigation content removed.
However, this approach is not necessary, and can require additional effort to configure and maintain.
Printability using CSS
An easier way to ensure printability of your pages is to use CSS to exclude menus and other page content when the page is printed, thus leaving more space on the page for the content.
Not only that, but there's little point in having menus on the printed copy, as they serve no purpose, but are only meaningful on the screen.
You can set media properties for each CSS element, thus allowing you to specify different behaviour for display on the screen, and when printed.
| |
page as displayed on a 1024x768 screen
|
For example, the image above shows how a webpage would be displayed on a computer screen, at a resolution of 1024x768.
| |
|
printed page,
no print optimisation
| |
printed page,
optimised for printing
|
The left image above shows how the same page will look when printed, if all the page content is printed. Notice how little room there is in the centre of the page for the main content.
The right image above shows the same page, but the navigation and other content on the left and right hand sides of the page is not printed. CSS media attributes have been used to hide this content when the page is printed.
Addendum: Refer to the Web Page Printability With CSS article for more
details on making your webpages printer-friendly.
User Experience
Custom Error Pages
Define custom error pages in .htaccess to present visitors with a much more user-friendly error if an error is encountered.
Log Errors
If possible, configure your custom error pages to write details of the error to a log, so you can identify and correct the errors.
It's especially important to track the referrer, as this allows you to identify other websites that may be linking to a non-existent page on your website.
Redirect Error Links
If another website is linking to a non-existent page on your website (ie, the URL on the other website may have a typo in it), consider adding redirects to automagically redirect any visitors who click the link on the other website, thus ensuring they will get to the page they intended to view.
navigation:
<prev
| 1
| 2
| 3
| next>
|
|
|
|
|
|
|
|
|
