Wrong Web design

“By Failing To Prepare, You Are Preparing To Fail”

(Benjamin Franklin)

In this chapter you will learn the things you should avoid when building a website.
Let me make myself clear, this topic will not teach you to create a site-of-the-year, many other resources do that already. Google the words “professional web design” and you will find tons of information.

This topic is your checklist to prevent you from using any possible wrong applied design methods which you should avoid or get rid of it (and why).

If you already have a website, then use this as your guide to check how your site is build. If you recognize any techniques you have implemented too, then don’t wait too long to make changes to your design. Bad web design can hurt your rankings, and can also result in a high bounce rate.

Site Navigation

Site navigation is the most important part of your site’s architecture.
It is the virtual guide for your visitor (and crawlers) to show how your site is structured.

A visitor always wants to know ‘where’ he is, ‘where’ he can go, and ‘where’ he has been. Still too many sites use bad techniques or bad navigation usability that results in getting lost on your site.

Google says: “Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link”

Some don’ts you should avoid:

Use only images for navigation
Crawlers can’t read images, they only can read text. So if you only use images for navigation, then crawlers can’t index (follow links) your web pages.
But if you insist to use images for navigation, don’t forget to put tool tips (alt and title attribute) ‘behind’ the images and put at least a text navigation at the bottom of your page.
If you are using text-based navigation, then use descriptive (for human eyes) keywords in your anchor text. Also for your internal pages. This gives the visitor extra help to where a link is leading. It also will give you extra (internal) page rank credit.
Use only Javascript for navigation
Suppose a visitor has disabled the use of Javascript in his browser (sometimes they do that for security reasons), where can he go? And for crawler reasons, Javascript navigation is hard to read for some crawlers.
Use long nested drop down navigation
Ever been on a site with a very sensitive drop down menu you hardly can hit with you mouse? Visitors hate these things. Trying to point a sub item in a drop down menu and then you miss and the drop down closes again. You navigation should not be a computer game of skill. Especially older people do not have the same ‘mouse skills’ as experienced computer gamers.
Do not use keywords in the anchor text
Its very important to use keyword rich anchor text in your text links. Not only for search engines, but also for human beings. Use clear understandable anchor text to show the visitor where he will be send to.
Do not spread navigation on too many different spots
Sometimes I see web sites with navigation on top, on the left and on the right, all together. It takes a lot of time to understand to which areas in your website I can go. Remember that a visitor first ’scans’ the page he is landing on. In a few seconds the visitor tries to determine if he is at the right place or not. Too much navigation will confuse him and will quickly leave your site.
Not showing the visitor in which part of the website he is
If you have a large site with main topics and sub topics, then always show the visitor where he is. Like using bread crumbs. DMOZ.org is a very good example of using bread crumbs for large sites.
Linking into the middle of Web pages
If you have a large page with content, then linking within that page is useful. Many sites use that technique but forget to show a link or symbol to go back from where he came from. Just look at the green arrow that points ‘up’ in this page. And if you use an image for this, do not forget to use a descriptive ‘alt attribute’.
Disabling the ‘back’ button of a browser
I have seen a lot of sites who do this. The back button is one of the most used navigation button when browsing through a site. Every one knows that he always can get back one step when using this button. So, never disable this button. And if for technical reasons the back button can return in errors on the previous page, then place a customized ‘go back’ link on a prominent spot on the page.

Wrong use of meta and title tags

There are many meta tags you can use between the ‘head’ section of a website. The most important are the <TITLE> tag and the meta ‘description’. The title tag is the main element that identifies your website. It is often showed as the main link on the SERPS of search engines. Still you often see that websites are not even using the title tag. It shows something like ‘home’ or ‘index’. Use your title tag to identify the specific page. Use your strongest keywords of that page, but don’t stuff it. I have seen titles like: “cheap computers, discount computers, best computers”. You can imagine that search engines don’t like this. But it also doesn’t look very professional if a visitor sees a link like this in the SERP.

The meta ‘description’ is very important to describe the content of the page. Most of the times this description (or part of it) will show up in the SERP below the link. Use very descriptive text, it gives the visitor a reason to click on your link or not!

There are many more meta tags, like the keyword meta tag, the author tag, the copyright tag, classification tag, rating tag. These tags have no significant added value for your website’s visitors or search engines. However, some ’smart’ guys are using these tags for stuffing it with keywords. Believe me, by doing this you will do a lot of harm to your website. You even can get penalized for this practice.

Use of tables

This is one of the most discussed design topic in Webmaster forums in relation with web site design.

Tables exists in HTML for only one reason: To display tabular data.

But many web designers use tables for the lay out of their website. Sometimes you see tables within tables and this causes a lot of extra code, which causes extra load time for your page. Even crawlers (they understand only text) can have problems to struggle through a web site that consists of to much code. Also different web browsers can handle these table structured web sites in different ways. The solution is to use CSS for this. I am not a CSS junkie, and I even use sometimes a simple table as part of the lay out. But try to minimize the use of tables within tables or tables within cells of tables to design a complex design for your site. It can (partial) block the crawlers from indexing your whole website.
Beside that, if you ever plan to re-design your site, using tables for design can create a hell of job (you have to edit every page), while using CSS for lay out can reduce this to just editing one file.

Use of graphics

I have seen sites that use graphics that takes 1/3 of their entire homepage. And they also put text on these graphics. This is really killing your website. You certainly will have a ranking problem and visitors who try to select the text on your graphic (for what reason) get confused.

Many websites use graphics for extra functionality of their pages or emphasize the topic of a page. Many of them do not reduce the size of these graphics. Sometimes I see sites using photo’s for decoration which are 400kb or even 1mb large (which can result in a click-away), while you can reduce these to roughly 35kb. This will extremely reduce the load time of your page. Use a simple image editor to reduce the size of an image or save the image preferable as a .gif (instead of .jpg). Do you need to keep some quality (for example a photo), then use the compression feature when saving an image as jpg.

Graphics should be only used for functionality. Remember, crawlers can’t read images so you better could use this important space for text, which is better for your site ranking. But if you use images, then never forget to use the alt and title attribute. Specific text browsers will not show your image, but will show the alt and title attribute to the visitor.

Some don’ts when using graphics on your site:

Do not use too many graphics (unless your page is a photo album) especially on your homepage. It will distract the visitor too much from reading your information. Remember that more isn’t necessarily better, simple is often better.
Never us ‘text’ as part of a graphic. This text can’t be read by crawlers and visitors can get confused by not be able to select it.
Reduce the file size of images/photo’s as much as possible. Screens don’t need a high resolution for displaying graphics in good quality (like printers do).
Better is to use clickable thumbnails. Using this, you let the visitor decide to view a large file or not.
Always use alt and title attributes when using graphics. This is good for indexing images in the SE’s and good for visitors who use text browsers.
If using (preferable not) graphics for navigation, then always put a text navigation at the bottom of your page.
If your photo’s/graphics are copyrighted, then put a ‘water mark’ on the photo to protect it. But do not disable the right mouse button (from disabling the possibility to copy/save as). The right mouse button is a function of the browser and that belongs to the visitor, you should never interfere with that. By the way, it’s so easy to copy a photo from a web page while the right mouse button is disabled.

Use of Flash

This is an often misinterpreted feature used by creative web designers. Many web designers use flash because ‘they’ like it. But forget to think how the visitor will like it and if it has any added value to your website.

Yes, Flash can kill your website, if you use it the wrong way. Home pages of websites that only exists of a Flash animation are number one to click away asap. The problem with Flash is loading time, you need a correct plug-in and are bad for SEO purposes.

Flash can be functional as part of a web page. But may never be the main part of a web page. Suppose a visitor don’t have the right plug-in, that page will be of no use for him. Suppose your visitor is still using a slow Internet connection (yes, phone lines still do exists all over the world!), bye, bye potential client.

Some don’ts when using flash:

Always use an alternative if your visitor is not able to load a Flash animation as part of your page.
Never use Flash as part of your navigation
Never ask the visitor to install a plug-in
Never use your primary landing page (home page) as a Flash-only page

If using Flash on a landing page is necessary, then always offer to skip the Flash loading process. Or if you offer Flash animations as a primary function of your website, then always explain what the visitor needs to view these animations.

Use of Frames

The same thing applies here like with Flash, spiders have a very hard time indexing all the info split in frames. And every-time someone tries to find you in a search engine, there will be a message saying “We are sorry you need a frame supported explorer to go into this site” Just take all the frames off you web.

Colors and fonts

Usability:

There are websites that use colors like a rainbow and fonts like a letter from a kidnapper. Did you ever asked yourself how a ‘color-blind’ visitor will see your website? Did you know that approximately one in 12 men has at least some color perception problems? I will not discuss here what the effect is of color perception problems, but I can tell you that using dark font colors on light background always have the preference above all other color combinations.

A single use (for example in a graphic) of light on dark is acceptable, but only for the reason to emphasize something. Certainly not for reading large portions of text.

Manipulate Crawlers:

There was a time that you could manipulate the search engines in a very easy way without getting penalized by doing it. These days, the very complex but clever algorithms, and also the growing manual site reviews of Search Quality employees will prevent this. And if discovered, you will get banned from the index as a non wanted search engine spammer.

One of the methods they used was giving the font color the same color as the background. In other words: crawlers could see this text (stuffed with keywords) but human eyes didn’t see anything. The reason they did this is to ‘feed’ the crawlers with relevant keywords which had no sense for a human eye.

Believe it or not, this method is still the most used spam technique on many websites. Don’t think you can manipulate the SE’s in this way, even when you use a very light (hardly to read) font color like this (#E8E8E8) on a white (#FFFFFF) background. Search engines know these techniques better than you think and getting banned from the index is definitely a death punishment for your website.

Some don’ts when using colors and fonts:

Do not use light font colors on dark background for your main content
Do not use too much different colors in your design (maximum 3-4)
Do not fool the SE’s by using ‘invisible’ text in your HTML (same fore- and background color
Do not fool the SE’s by using ‘invisible’ text in your CSS
Do not use different font styles through your site, be consistent and choose a general font which is available on any kind of computer as a default font
Do not use small font sizes for large readable text (preferable 12px or 10pt)
Do not use font formats that only effects one specific web browser, make your site browser compatible (use MSIE AND Firefox.
Do not use Font types that can’t be resized by the settings of a visitor’s browser (necessary for visitors with poor visibility)

Check your site without your CSS if it still readable

Opening new browser windows

Designers open new browser windows on the theory that it keeps users on their site. But if you do this it disables the Back button which is the normal way visitors return to previous sites. Visitors often don’t notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. Although the current new versions of browsers (MSIE7.x and FireFox 2.x) offer tabular windows. But if your setting is so that the focus will remain on the page from where the visitor has clicked on the link, he will see that nothing happens.

There are some exclusions when opening new windows:

Open non-Web documents in a new browser window, like a PDF file.
When opening a page as an example (like on this page) which is not part of the website itself (no navigation for instance).
When redirecting your users to an affiliate site
Warn users in advance that a new window will appear.

I have to say that this topic is often used in Webmaster forums. There are many different opinions about this. And it is also a personal matter. The best thing to do is, to try to think as a ‘user’ and not as a Webmaster.

Content

You can be a great creative web designer and perhaps a professional SEO Consultant too. But are you a good copywriter too?

(yes I know, my main handicap is that English is not my native language, therefore I try to use plain basic English)

Despite my English skills I have a few don’ts for you:

Writing in large text blocks. Use enough white space to give the human eye enough rest. Split large text blocks in readable sub headers.
Using no sense out of context headlines. Headlines function as actionable items, they can lead (if that’s the main purpose of your site) the visitor to take action.
Forget to use important keywords (phrases) in your headings, sub headings and normal content.
Create content for search engines (crawlers) not human beings
Copy/paste content from other websites, Your content should be unique and original and must have added value for your visitor.
Focus your writing on your visitor, like having a conversation with him. Use ‘You’ instead of ‘we’.
Do not talk about how big, good or whatever you are. Talk about how you can serve your visitor in his needs (he had a reason to go to your site isn’t it? so give him a reason to stay) and convince your visitor why you are different
Stuffing keywords in content. Keep your content readable for the human eye. If your page title talks about “Tasty green apples” and your heading does the same, then only use it two or maximum three times more (in different order or use synonyms) on the same page.
Mix ‘content’ with ‘copy’. Content is used for articles, descriptions, white papers, reports, the history of …, etc. Copy is the stuff that is supposed to motivate the visitor to take action.
Using long irrelevant sentences
Talking about your own experiences instead of ‘touching’ the emotions of the visitor.

I could make this list as long as Route 66. It is impossible to mention all aspects of content and copywriting. In one line I can say this; write for your visitor and stay relevant on your topic.

My advise: If content is a major success factor for your site, then hire a good and reliable copywriter or read some good books (try Amazon) about web copywriting.

HTML errors

Go to http://validator.w3.org/ pick any website (say the homepage of Google) and you will see that it returns 50 HTML errors. The fact is that Google doesn’t mind, half the world is using Google.com or linking to it, so for any SEO purposes it will have no effect in the ranking of the home page of Google.
But it can have for your website. There are almost no websites that hasn’t at least any HTML ‘warnings’. But if you do your best (take this page for example) you can minimize this to a minimum or even successful validation.

Why is it important to have your html file at least ‘error’ free. Simple, HTML errors can lead to inaccessibility for a visitor or your page can be crawled half of it or your page loadtime can be longer than without any errors. HTML errors can also produce different behaviors when using different browsers (MSIE, FireFox, Opera).

So keep your HTML file clean of errors and clean of warnings as much as possible.

Browser incompatibility

Most of Internet surfers use MSIE as their browser. But the number of FireFox users is growing fast (because of it’s stability versus MSIE) and to forget our Mac fans who use Opera.
believe it or not, but MSIE is the most incompatible browser there is. If a website is using standard CSS, you often have to add some extra lines to tell MSIE what to do.

Therefore it is important that your website works the same for at least these three browsers. If you use the latest version of FireFox then you can add a plug-in that emulates a MSIE browser. This is very handy when testing your website in one browser.

If you use correct standard (W3C) HTML and CSS, then you will not have any cross browser problems. If you build your site in for example MS FrontPage, your site will look different in FireFox in compare with MSIE.

Use the W3C validator to see how ’standard’ your website is build.

Share and Enjoy: