Tips For A Better Website

[linknode]

Hello fellow WPWers,

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 800x600 (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.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

I welcome additions that anyone feels are equally important to this list.

Thank you for your time in reading this post, and I sincerely hope this helps you in your quest for a better website.

[corporateface]

Thanks for your post Linknode.

I might add that when putting copy on a website it is good to consider your formatting dynamics. I've found that many web users are "subtitle-ers" and "caption-readers". Get the message in your "caption" sentences and or <h3></h3> them.

Keith

[theglobalchinese]

Hi Alessandro,

Thanks for your excellent article! Beside the theoretical approach there also is the practical, learning by doing way to study methods and means to improve presentations!

My idea I like to bring to your attention is short and simple: Participate on the 2005 vote of the best blogs

Where can you find the most interesting weblogs? Which blogs have made their mark this year? Who will do anything for a nomination? Those questions will be answered in the o*ne and o*nly fifth annual weblog awards, the 2005 bloggies! The Bloggies™ are a set of 30 publicly-chosen awards given to weblog writers and those related to weblogs. This is the fifth ceremony, with previous winners listed o*n their respective sites: 2001, 2002, 2003, and 2004. Everyone's invited to take part in the awarding process, so read below to find out how you can nominate and vote for your favorite blogs! So, friends, do not hesitate to vote your favorite weblogs: http://2005.bloggies.com/

[Easywebdev]

* 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.

I'm afraid I am going to have to disagree with you here.
I always specify pixel sizes - why? because using pt renders inconsistently across browsers and platforms, 12pt on a mac is hugely different from 12pt on windows which again is different from 12pt rendered in a broswer on a unix platform. Pixels sizes are relative to the readers resolution and can be resized by the browser if the user so desires.

That and the w3c recommend not using pt or other absolute lengths. See here.

[linknode]

Easywebdev,

Thanks for the informative link, I appreciate the information.

[Webnauts]

Originally Posted by Easywebdev

I'm afraid I am going to have to disagree with you here.
I always specify pixel sizes - why? because using pt renders inconsistently across browsers and platforms, 12pt on a mac is hugely different from 12pt on windows which again is different from 12pt rendered in a broswer on a unix platform. Pixels sizes are relative to the readers resolution and can be resized by the browser if the user so desires.

That and the w3c recommend not using pt or other absolute lengths. See here.

Lets be honest here. You definetely should not use pt or pixels. You should use percent or em! Or did I get you wrong?

[Webnauts]

Linknode you wrote:
"Design your pages to load in less than 5 seconds on a 56K modem."

Users with 56K modems tollerate up to 8 seconds.

And by the way: Excellent post!

[Easywebdev]

Sorry Webnauts, the topic was made sticky and I did not notice it move.

Now onto the great text size debate :)

No you did not get me wrong. I do use pixel sizes. When you say to use percent or em then you have to consider what that is a percentage of or how big the m actually is, the base text size needs to be defined somewhere either as pt, px or the browser default text size.

I find using pixel sizes gives me the best results across multi platforms and browsers. As I said above pixels are relative to the users screen. Specifying pt is going to leave you with large text on one platform and miniscule text on another.

So for me with the average user using a screen resolution of 800x600 - 1024x768 a base font size of 12px is what I will be sticking to.

[Webnauts]

Originally Posted by Easywebdev

Sorry Webnauts, the topic was made sticky and I did not notice it move.

Now onto the great text size debate :)

No you did not get me wrong. I do use pixel sizes. When you say to use percent or em then you have to consider what that is a percentage of or how big the m actually is, the base text size needs to be defined somewhere either as pt, px or the browser default text size.

I find using pixel sizes gives me the best results across multi platforms and browsers. As I said above pixels are relative to the users screen. Specifying pt is going to leave you with large text on one platform and miniscule text on another.

So for me with the average user using a screen resolution of 800x600 - 1024x768 a base font size of 12px is what I will be sticking to.

I also use as a base font size equivalent to 12 px on my web site too. But not pixels, rather percents or ems.
What do you mean about average users? Do you mean excluding older users, or users with visual impairments, as i.e with low vision? If you are using pixels and the user is with IE, how can he resize your fonts? So where do you see the best results accross multi-platforms and browsers?

Can you be more specific here?

[Jeff Colburn]

Hi,

For some more tips on website design, read the articles on my site at http://www.creativecauldron.com/Webs...Articles.shtml

Have Fun,
Jeff

[Faglork]

I definitely am with webnauts here. Specify em or percent. AFAIK, the IE cannot resize text which size is specified in pixels.

Have you ever noticed, that website demos are always made for the chief, but the secretary has to work with it? What I want to say is, the website may look good for those who buy the design from you, but the visitors will have the problems.

I experience that a lot: When I visit a client in his office, I find 17' monitors with 800x600 and big font size turned on, because the 50-year old secretary just needs that. Now, who do you think will do the work and collect a list of websites which offer a certain product (or whatever example you want): The chief himself? In most cases, the secretary will get assigned to this task. If your website is not able to change font size (because the secretary uses IE ...), you have lost.

BTW: You could even add a feature to let the user resize the text with some easy-to-see buttons or text. See an example at
http://www.goldner-stern.de/

In the left column, it says

Schriftgröße ändern:
[ + ] normal [ - ]

which is german for "Change font size". Just try it. It is an adaptation of the script found over at ALA - I just used the website example above to show that this is *not* an academic issue.

My opinion: Fixed font sizes are the result of a company-oriented thinking, variable font sizes are customer-oriented. Now, it depends for whom you create the website ...

Fixed fonts are no advantage - they are a disadvantage handed down by age-old technology: the rigid demands of the PRINT medium. In print, you are stuck with the font size a magazine is printed with.

The WWW is different: Any information is supposed to adapt to the needs of the visitor - or the output device. Accessibility is the key phrase here. This is the beauty that underlies the concept of Tim Berners-Lee - dont let it be affected by the limits of an old medium.

Just my 2 cents (or shold I say ems? SCNR).

Alex

[splinter]

How about using 'small', 'x-small', 'large', 'x-large'?

That's what I use in my CSS.

[Faglork]

This is ok, but beware of a IE5/Win bug:

"The nature of the discrepancy is that WinIE4/5 implements “small” as the initial value, rather than “medium” as called for in CSS-1. The result is that without correction, all sizes specified in keywords will be one size smaller with respect to user preferences in conformant browsers than in WinIE4/5."

See
http://www.alistapart.com/articles/sizematters/
for a workaround.

Actually, many web authors prefer "font-size keywords" since they never can get too small - which is possible with em or percent. And: ems and percents cascade, so you have to be careful constructing your CSS cascade.

Apart from that, IMO it is personal preference. With em and percent you can specify (relative) sizes in smaller units. If you don't need that, so what.

Another thing: If you specify the width of block level elements in em (I sometimes use that for the navigation bar in an all-out liquid design) then you might be more comfortable with specifying font-size in em es well, it is just more intuitive (at least for me).

Alex

[Ratanfx]

Nice article,

May this site Helps u:

http://www.anybrowser.com/siteviewer.html

Regards
Ratan

[junn]

Very good information for everybody.
10q

[PicBethany]

Thanx for the great information!

Do you mind if I post this on our class messageboard? (Bakersfield College - Dreamweaver) We are discussing this subject this week.

[bj]

Re the great font size debate--

Best use according to the css experts at css-discuss suggests using 100.01% on the body (makes Opera play nicely) then defining in either ems or percentages from there on the inner elements. This allows fonts to scale (pixel defined fonts will not scale in IE, the browser used, unfortunately, by the majority), avoids the major bugs (like the one in IE that's kicked off when you define fonts in em on the body) and is Bobby safe for accessibility which could be important going forward since more and more countries are legislating accessibility. Pixels or points to define font size are a huge "worst use."

[bj]

Oh, one more thing:

I might add that when putting copy on a website it is good to consider your formatting dynamics. I've found that many web users are "subtitle-ers" and "caption-readers". Get the message in your "caption" sentences and or <h3></h3> them.

Keith, the b tag for bold text has been deprecated. The strong tag is now used instead, since it has semantic meaning for alternative devices such as screen readers for the blind. I agree with your point about web readers needing bite size pieces with captions and subtitles, but how we do it in our code is equally important for accessibility.