The Dos and Don'ts of Web-Development
At the beginning of the 21st century the internet is probably the most-used medium of communication. Millions or even billions of websites spread across the globe. Their contents span areas such as commercial, private, political, governmental, educational, informational, ...
Unfortunately, many professional websites focus on design, rather than working out a well-defined balance between content and design. In the following paragraphs, I will try to put together a number of tips and guidelines that I like to work with. They will hopefully help you to improve your web presence as well.
Please remember that this document is work in progress. I might change my mind about a certain guideline at any time. Also, please do not take it personal if you do not agree with any of these guidelines. They are the result of personal experiences I have made not only as a developer but also as a user. They should only give you a certain idea of what aspects that you will have to consider. If you apply them or not is entirely up to you. Do not look for something universally valid. You do have to make up your own mind.
Never ever create a frontpage that contains nothing but an "enter here" button and an oh-so-cool flash-animation.
A frontpage always has to deliver textual content. Otherwise, users looking for information might just as well close your website before it has even finished loading. The following listing will give you an idea of what does make sense on a frontpage :
- The latest news from your company/organisation (no need however if the "latest" news item is two years old).
- A list of upcoming events or maybe only the next 3 events, or the events of the next two weeks. You get the idea.
- Your company's/organisation's address and/or phone number and/or opening times. I have seen many websites where you find this kind of information only after 4 or 5 clicks. That is counterproductive!
Nobody likes to unnecessarily lose time, but nevertheless many websites fool their users by providing links to pages that are "under construction". If you have certain pages that are not ready to be published, do not publish them until they are at least in a usable state.
Newsfeeds allow people to read more webpages in less time. If your site has a news area, consider offering an RSS-feed. This will not take you any time (as soon as you finished setting up the feed), and will allow users to check if there is anything new on your site, without having to visit it over and over again.
Following information from W3Schools.com1, around 70% of the people browsing the web are using Internet Explorer. 20% are using Gecko-based browsers (Firefox, Mozilla, Netscape Navigator) and about 10% use Opera as their access gate to the web.
You may wonder why I am telling you this. The answer is that I just want to underline the fact that the web is not an homogeneous place. People use different browsers, different operating system, different screen sizes, different languages, different input devices,...
Although it is difficult to respect all these various configurations, it is important that you see for yourself what kind of users you will have to expect. If you are a company that is in the printing business, you'll have to respect different browsers, operating systems and screen sizes, because the configurations your clients might be working with may vary from laptops with 14-inch-screens, Windows and Internet Explorer to desktop-computers with 21-inch-screens, MacOSX and Safari (as used by a graphic designer I know) and, as a matter of facts, your website has to look good on all of these configurations in order to be taken seriously.
The navigation menu is a very important, if not the most important part of your website, because it is one of the first things a user looks at. Navigation elements have to be clear and easily understandable in such a manner that even a child should be able to navigate through the website. If you have different menus with overlapping topics try to group them in submenus to show that they belong together.
If you split up your navigation into different areas (like a "top menu" and a "left menu"), try not to repeat elements in both areas. This will irritate visitors and irritation among your visitors is, to put it simple, bad. Even the slightest feeling of discomfort could turn into a negative opinion about the overall content of the website.
A good percentage of websites completely rely on interactive technologies like Javascript, Flash, etc... That is a rather bad solution! Do not get me wrong, I have nothing against these technologies, but you still have to offer alternatives where possible. Flash is good for animations and presentations, but never use it for navigation-menus and the like. Aspects you will have to consider are: loading speed (not only for "older" systems), overall compatibility, possible alternatives (e.g. for users that do not have a certain plugin).
Allow your users/visitors to give you feedback concerning your website. Be it through a special contact form or by email. Reply to every single message you receive (though you might just send predefined texts, as long as you send at least something).
Use named links. Avoid sentences like "For more information, click here to go to John Doe's website.". Instead try to give a clear idea of where a link leads to, by 'naming' the links, like "For more information, go to John Doe's website.". This will allow visitors to navigate faster, which means they will lose less time.
Clearly mark links to PDF-documents. On many systems, the Adobe Reader takes a very long time to load, whereas a user might want to save a PDF-Document and then read it outside the browser. If a PDF-document is not clearly marked as such, a user might accidentally click on it and then get irritated because he did not want to load PDFs inside his browser. And by the way: marking a link to a PDF will not hurt.
Having special areas for PDAs and mobile phones is a plus, but not a necessity.
If you decide to create such pages, make sure to test them with different brands and do not just rely on using web standards.
The use of colours is often underestimated. Before creating a website, a colour code should be established in respect of the content as well as of the target audience. Livelier colours are more suitable for a younger audience than dark and neutral colours. On the other side, neutral colours might look more professional to business people, whereas younger people will be "turned off".
A basic knowledge of colour psychology2 is a must for everyone involved in the creation of a website, be it webdesigners, developers or those people who will have to keep the website up to date.
Regardless of which colours you choose to use on your website, do not forget about the contrast between the text and the background. If your texts are not readable, they will not be read!
- Bad Example: Combinations like "red on blue" or "green on blue" are to be avoided.
- Good Example: Beside the classic "black on white", something like "dark-blue on light gray" is alright.
Don't use more than one font family on your website, because doing otherwise will disrupt your layout. This does not apply to the logo of your company/organisation of course.
Avoid to overfill pages. Websites should be easy to navigate, but it seems to me that many websites are created with the idea to fit in as much content as possible. If you do this, do not expect your visitors to find what they are looking for.
Do not make your users scroll down half a mile per page. If you have long content texts, try to split them up over several pages.
There are two primary types of animations:
- Animations that appear before or after the user can or has taken action. Those that bridgeover an existing waiting period pose no problem. They let the user know that something is happening in the background that he cannot bypass. On the other side, many animations are created for the sole purpose of making something look cooler. This is very often unnecessarily time consuming.
- Animations that appear while the user reads a text or scrolls through a page. Those are distracting and very often unnecessary.
Do not include links to public search engines if those do not have specifically to do with the content of your website.
- Bad Example: A link to Google, Yahoo, MSN or any other general search engine on a website about horses. Nobody is interested in those links. Many people nowadays have a special "search box" in their browsers, either because of an add-on (from Google, Yahoo or whatever comes to your mind), or because of a built-in search box (like in Firefox or Opera). Those who do not have such a "search box" will not care about links to search engines on your website, because entering the URL of one's favourite search engine in the URL bar of a browser does not take that much time.
- Good Example: A link to a "political" search engine (that focuses on political information) on the website of a political party. Or a Link to scholar.google.com on the website of a school.
Another form of unessential public services are clocks (in different types, such as Java, Javascript or Flash). Those might look funky, but are, in most cases, unnecessary. Every user on any operating system has a clock on his desktop (by default in the lower right corner for Windows and KDE, and in the upper right corner for OS-X and Gnome), so why repeat this information if it is already there?
Other services, such as news feeds or weather services, are a common finding on personal websites. If your website is not about news in a larger sense, then do not publish news feeds. If your website is not about weather in a larger sense, then do not publish weather announcements.
The web is not a perfect place and as far as I can tell, it will never be. What I intend with these few guidelines is to raise the awareness and acceptance of the diversity of the internet as well as to publish my opinion about things that are to be done and things that are to be avoided when creating a website. If I succeed at least a little bit in doing so, I will have I achieved my goal.
Any criticism, tips or suggestions are welcome in the forum. I would really love to hear about your opinion.
I would like to thank Philip for his valuable tips and comments as well as Christophe3 for proofreading the article.
Footnotes
- ... W3Schools.com1
- http://www.w3schools.com/browsers/browsers_stats.asp
- ... psychology2
- For more information about colour psycholoy, visit http://en.wikipedia.org/wiki/Color_psychology
- ... Christophe3
- http://www.christophetoussing.com/
Michel Weimerskirch
2005-10-09