Web Design Best Practices

While designing a website, it is crucial to make sure that the site is user intuitive, friendly (both for users and search engines) and easy to navigate. Although these are basic elements of a good web design, sometimes they just get left out or ignored, either because client is on a low budget or less time or some other reason. Here are some usability and practical tips for a good web design which can be helpful for web designers as well as clients.

The base importance of good design is difficult to overstate. Design can and will make or break a website.

1.     Always use the latest stable version of the platform, language, script, database etc to ensure that your product is as future proof as possible.

2.     Use a source code style that makes the code readable and consistent. This will allow yourself or anyone else in future to make additions or modifications very easily.

3.     Use meaningful names for all functions and variables. For clarity, avoid names that differ only in case, like foo and Foo . Similarly, avoid foobar and foo_bar. Avoid names that look like each other. On many terminals and printers, ‘l’, ‘1′ and ‘I’ look quite similar. A variable named ‘l’ is particularly bad because it looks so much like the constant ‘1′.

4.     Always comment your code so it is easier for you or other programmers to go through your code easily at a later stage. You can be sure that this later stage will come soon. The comments should describe what is happening, how it is being done, what parameters mean, which globals are used and any restrictions or bugs. However, avoid unnecessary comments. If the code is clear, and uses good variable names, it should be able to explain itself well. Since comments are not checked by the compiler, there is no guarantee they are right. Comments that disagree with the code are of negative value. Too many comments clutter code. <!– HTML commenting looks like this and is enclosed within angle brackets and two dashes. The opening tag includes an exclamation mark. –> /* CSS comments are enclosed by a forward slash and an asterisk. */

5.     Use vertical and horizontal whitespace generously. Indentation and spacing should reflect the block structure of the code.

6.     Assign unique title tag values to all pages on the website that are meaningful and neither too long nor too short.

7.     Unique and search engine friendly meta tag values for all pages.

8.     Meaningful and search engine friendly file names for all pages.

9.     Website should be designed and tested for all major search engines.

10.  A good web design is always W3C approved. Validate your CSS and XHTML.

11.  KISS – Keep it simple stupid. Keep your web design simple and do not distract your visitors with too many catchy images. Allow them to do what they have come to do on the website with ease.

12.  Test, test and then test again. There’s no short cut to avoid this. Test on all browsers. Test on all platforms. Test on all resolutions.

13.  Use favicons. Favicons are the little 16×16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

14.  Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page: <img src=”logo.gif” alt=”logo” title=”logo/” />

Design for the World Wide Web is a balancing act between the graphic “wow” and the real-time “now.” - Toni Will-Harris

It is a common knowledge that the maintenance of applications takes a significant amount of a programmer’s time. Part of the reason for this is the use of non-portable and non-standard features and less than desirable programming style when developing applications. In this article we have presented some guidelines which have stood us in good stead over the years. We believe that these guidelines (by no means a complete list), when followed, will achieve great results for web design and development.

Tweet This Post