Physiognomy of a Web Site

Do I need another repetitive image on every page?

What do you recognize most about Nike, the name the shoe the clothes or the tick mark. A good logo can boost the look of a site and increase the retainability of a user. Brand your website with a logo either on the top left or right of each page in your site. Add a copyright text to the bottom of each page; you could incorporate this into your design template while creating it.

Start with a template and a style guide

A template is a web page which defines how all your pages in your website looks, this helps maintain a consistent look and feel throughout your website. Some of the tools provide you with options to create template files, like in Dreamweaver you can create a template file with editable/repeatable regions, and then create your pages based on that template. Now if you have to change the design midstream (which happens in the real world) you would just have to change the template file, and the Dreamweaver will update all the pages that were created using the said template (Note: this is not an advertisement for Dreamweaver).

Have clearly demarcated regions

Have clear regions for the navigation bar, the main text area, the title bar etc., on your web design/template. This is probably the most important of all design issues I am going to list in this page. I have visited websites supposedly of “professional web site designers” who have failed to do so on their company/personal website. I once spent 10 minutes trying to find the navigation bar on a homepage of a website, before I realized that the triangles on the bottom of the screen stood for the navigation menu (even though it was written next to the triangles in text as << navigation bar). Avoid Mouse Over blank shapes Menus (also refered to as Mystery Meat Navigation), they are just annoying and can chase away visitors.

The eye can easily distinguish between parts of your website, if it is clearly demarked; a blue side bar or a menu bar at the top, with the links in clear text will certainly enhance the usability of your website.

Have a clear Navigation design

Always use clear text in your navigation menus. Make sure that the user always has a way to get back to the home page. The user is now trained to click the logo to go back to the home page; additionally a clear link that says home is also helpful. Make sure the major site sections are always available in your navigation menus. Sub sections are not directly needed in each and every page.

Try to reduce the number of clicks required to get to any page, a user gets bored very soon. If you have a site that has a 100s of pages with 10s of main sections and further subsections and cross-sections, don’t make the navigation of your website a nightmare, create a site navigation design before you start creating the pages. Take into consideration what pages would most likely be hit by a user and try to provide them as highlights with a link in the main page of their respective section. A good example of a well-designed highly categorized site is cnet.com.

It is a good idea to indicate where in the site the user currently is, for ex: I am in Microsoft.com and reading Bill Gate’s Biography a link tree at the top of the main text area; Home > About Us > Company Overview > Board of Directors > Bill Gates > Biography (there is a subsection for Bill Gates on Microsoft.com). Now Microsoft.com does not have this, so for me to go back to the board of directors to look at the other members of the board I will have to go back to the home page and come back through all the links to board of director. Now if Microsoft.com had this I would just have clicked on the link to board of directors and had a look at the other directors as well, now I just got bored of having to go back all the way to do it, so will your users.

Provide a site index; create a site map and have clear links to it from all your other pages, I found a good detailed article about site navigation on the Webmonkey’s “Advanced Web Techniques”.

Avoid the necessity of using the scroll bar

The old monitors generally had 640x480 screen resolutions, even today many users use 800x600 screen resolution (I know that my marketing manager does it). If you designed a site for 1024 width, the people using the 800-screen resolution will have to scroll not only top to bottom but right to left, which can be very annoying. Also people are not willing to scroll a lot to read the text at the bottom of a page that has been designed for a high-resolution screen. See what screen resolutions would do your website (resize the browser window for better feel of the scenario).

Try to avoid using images to display just plain text type

Images take more time to download than the plain vanilla HTML text. If your design can accept text, then use text instead of images. For ex: in a menu bar, use repeatable images to act as demarcations and text as the actual links. The character pipe "|" acts as a good delimiter in menu bars. Using CSS to the layouting for you can also vastly improve wait time for the users. Take this site for example, it uses CSS for layout design, and separates the content from layout into the CSS, and if you turn off the CSS on this site[which u can do by clicking on the icon that looks like a circle with a bar across it] you will see what I mean

[Using an image for displaying your E-mail Id to trick the spambots works in most cases.]

Kilobyte (kb) s are expensive

Images and text, both cost KBs, there are tools that tell you the weight of a page (which is the sum of the size of each images and the size of the text in KBs), and some WYSIWYG editors do it for you as well. The larger the file size, the more time it will take to download and display your page.

Preferably keep it less than 30-50kb, if your text spans to more than that, divide the page up into multiple pages, and if needed give them a printable version, with all the text (from the multiple pages) in a simple text format. If you have a large image to display like a photo or a screen print of your software product, create a thumbnail and link it to an expanded/larger view page of just the image with some navigation, title and image description. If it is a screen print, another good design would be to crop and display only the area that you are describing in the text, linking it to the larger image.

Try to use CSS for your layour images, instead of embedding them in your page itself. The way browsers work is that it will only load the style sheet and its images only once and chache it, but that not necessarily true with images embedded in the page.

According to w3 alt is a required attribute for the image tag.

Their section on how to specify alternate text clearly specifies the need and use of the alt attribute. The alt text improves the accessibility of the website. Some search engines look at the alt text of images in their search as well, so this will help improve your ratings in the search engine as well. But do not put text in all the images, for ex: if the image is just a decorative image like a border leave the text empty alt="", and do not put in alt="dummy text" this will in effect decrease the usability of your website. If in fact you were to follow the WAI guideliness you would have to supply a suplementry page to describe the images in your website, if the alt attribute cannot describe it sufficiently.

Click here: a bad idea?

Do not use “click here” to link pages. Create your anchors around the descriptions rather than a text that says click here. The search engines today look for links in a page, and will use them in their search. So if you are linking to a page for to sell tickets to a concert, create the anchor around the text, tickets for the concert is available here, instead of tickets for the concert are available; click here to get them, a better link would be Buy tickets for the Usher concert on Oct 12th in St. Louis.

Required information or just a spam invitation?

Provide contact information; don’t just limit it to an Email Id. There should preferably also be a mailing address and phone number available on one page and link it clearly on the site navigation as contact info. Letting the users be able to quickly email the editors, writers, and the webmasters of the site is usually a good idea. In fact if you are designing a web-based portal for selling stuff, you want people to contact you. Certain websites like bizrate.com actually have ratings where they rate on the contact info provided by the website.

[You might point out I don’t have a lot of contact info on my website other than a form that sends me your feedback and the e-mail Id in a Image. I am not trying to sell any product other than myself. I also used to get a lot of spam on my previous website design. Based on what you are trying to promote on your website, and the requirements of the law, you have to decide what contact info you will provide on your website.]

make it platform independent

Test your web site design, and finished site in all the browsers. Try to get at least Internet Explorer, Netscape and Opera in the loop of your testing. Some purists would also prefer that you test your site in older versions of the browsers as well. Test the site in different resolutions. Do you still like what you see across the board, if not try to improve on the design.