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.

[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

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

[Steelchord]

I'd have to add that the ALA styleswitcher is a *very* worthwhile investment of time. Just be sure to clearly mark its location on the page for the users, so that if they're struggling with one design they can switch to a friendlier one.

RE the great font size debate, All of the techniques have their uses--being able to maintain an *exact* size across all browsers via screen resolution (px), or across all resolutions via browser (em), or relative to the rest of the document (big, etc.) all have their place. For example, in any case where the pixel size relative to nearby images is critical, and the image is not a vector graphic, you'll probabably want to use px. A lot of sites are designed around such images, because the same "look" cannot be achieved the same way liquidly without truly advanced knowledge of CSS design, which is time-consuming to acquire and expensive (or should be ^_^) to hire. Not to mention almost impossible to incorporate in a style-switching schema, for reasons too in-depth to go into here. Oh--and px *is* accessable to anyone who cares to try. One of these days I'm going to put up a good "use this stylesheet" to download for sight challenged people, along with IE instructions.... Anyway, the control to cancel font styling is right there in options->accessability, and I hear IE7 will give text size control (along with the newfangled "tabs"--way to catch up with the curve, Mr. Ballmer....)

--Geek With a Guitar

[Rosalind]

I'm a big fan of the ALA styleswitcher too. It would be great if we could all get away from the idea that a site has to have just one style.

The Firefox/Mozilla families of browsers have the right idea by allowing users to choose alternate stylesheets. It would be even better if they could remember stylesheet preferences from one page to the next, but that's what the ALA script is good for.

No matter how well you plan your design, someone can always come along with an obscure accessibility problem or quirky monitor settings that you don't expect. Having a variety of designs available can help you please all your visitors.

[ireneherz]

Nice article.

Regarding font sizes, it's considered polite to use percentages to conform to Bobby standards for the disabled. I compromise by using percentages except in crucial size related spots like a horizontal menu.

Also, someone mentioned using [b] and <h3>. It's best to markup important text with headers, in order, down from <h1>. Breaks up the page, and helps the spiders figure out what's important.

[topboy]

Excellent Post, Almost every company in the world is trying to make their make on the web.

However creating a nice looking, functional web site is not very easy to achieve unless you have the right tools and workers to help you.

[idansh]

I will summarize the above: make it simple, and I think most of the large websites that has lots of contents , build there website simple for easy reading and navigatioj.

[LDFLA]

This helps a lot. But I have a question. I have been told that pages have to have a word count higher than 300 (words) in order to increase SEO and chances of ranking, which makes sense to me as Google wants to provide the best information possible. I occassionally end up saying more than I have to just to reach that mark. Is it necessary?

[doughdo]

good post. always helpful to read over the basics again.

[rose77mary77]

Hi,

I just search for a tips to create a website of my own. Your's is very much useful to me.

["..spielerfrau.."]

the tip was nice and easy to understand! thank you for a very knowledgeable post..! hope to expect more, just keep up the good work.

[NateDesmond]

Here is another tip for making your website better:

Add great content. Put lots of articles, lists, tutorials, and buyer's guides on your website. This will cause other websites to link to you, and the links will cause your website to get more search engine visitors. The great content will also make your current visitors more happy.

[PosterManiac]

Wow nice thread.. I am saving this thread for future reference

[delnaaz]

Thats really cool.I am a content editor also so these tips about effective content in your websites would be really helpful and i hope that having these steps in mind i would improve my site a lot.

[dmanjra]

i would also recommend using a handset detection service so that you can display the appropriate view based on the device trying to view the site. There are a lot of mobile web surfers out there now...