Tips For A Better Website

This post is based on my article “Tips For A Better Website”

This is not meant as an authoritative source, it provides you with a generalised guide that can be built upon.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Writing for the Web

* Write in layman’s terms so that everybody can understand your content, unless you’re running a technical site for technical people.

* Reading from a screen is painful: use 50% less words than you would use on print.

* If a page is too long, break it into several pages and link to them.

* Don’t use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser’s text view options.

* Use a spell checker. Spelling mistakes are embarrassing and hurt credibility.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content Presentation

* Save the top of your page for your most important content. Remember: good content must flow to the top.

*Lay out your page with tables, and set the width in percentage terms instead of a fixed number of pixels. That way, your page will always fit the screen, without the need to scroll horizontally.
Note: You may also layout your site with CSS (create a tableless site), which is intermediate to advanced designer option.

* Optimize your page to be viewed best at 800×600 (the most popular resolution at the time of this writing).

* Use high contrast for the body of your page: i.e. black text on white background, or white text on black background, try different variations but remember that they must contrast for easy viewing.

* Don’t use too many different fonts in one page, try to stick with 2-3 at the most. Also, avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Verdana and Arial are the most widely used fonts on the web.

* Avoid long blocks of text. Use tools that facilitate scanability, like bullets, subtitles, highlighted keywords, hyperlinks, etc.

* Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, etc.

* Don’t use pop-up windows. They distract your visitors and are immediately dismissed as ads, use of popups is acceptable in some circumstances and when the client is aware that his link will bring up a popup page.

* Test your site so that it looks good in different browsers and resolutions.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Graphics

* Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality.

* Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

* Avoid graphics that look like ads. People ignore them.

* Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Navigation

* Design your pages to load in less than 5 seconds on a 56K modem.

* Group your navigational options in relevant categories.

* Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid “clever” or “trendy” alternatives.

* If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.

* Provide simple text navigation links at the bottom of long pages, so users don’t need to scroll back up.

* Link your logo to your homepage, except in the homepage itself. Put a link to your homepage on all your internal pages.

* Display a “breadcrumb trail”; it is basically the path from the homepage to the page where you are. A breadcrumb trail looks like this: Home > Section > Sub-Section > Page, and it greatly facilitates navigation.

* If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages.

* Set your search box to search your site, not to search the web.

* Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Linking

* Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying “click here”.

* Don’t underline anything that is not a link, otherwise your customers may click on it and become frustrated, underlines have become sinonymous with links on the web.

* Underline your links and use a consistent color for them across your site (the standard color is blue).

* Use a different color for visited links, so that your visitors know where they’ve been (opt for a more subdued tone of the unvisited links color).

* When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link or text identifying the link.

* Don’t link to “under construction” pages, if they are not finished, do not add them to your site’s navigation.

* Make sure that your links work and that you don’t have broken links. There are free online tools that can help you with this.

* If you use graphic links, don’t forget to use the ALT attribute. The ALT attribute should describe what are you linking to.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Branding

* Include your logo in all pages. Most sites position the logo at the top left or each page, however other variations to this rule can apply if done properly.

* Complement your logo with a tagline or catchy sentence that summarizes your business purpose. For example “Always low prices” is the tagline for Wal-Mart.

* Create a favicon. A favicon is that small graphic that appears next to the URL in the address bar.

* Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across your site.

* Have an About Us section, that includes all relevant information about you and your business.

* Include a copyright statement at the bottom of each page.