Effective Web Page Design

There are millions of web pages on the internet today. In this immense race, how would your web page come up with? There are no hard and fast rules to make your web page distinguished amongst millions of web pages; however, there are some tips and tricks that can help you in making your web pages effective. The following guiding notes would illustrate some of the concepts, tips and tricks of effective web design.

How do people read web pages?

It is very important question that how do people read web pages. According to specialist; Jakob Neilsen , people don’t read web pages, rather people just go through web-pages or skim-read the contents of a web page. They usually skip from one title to another. People use to make use of the Back button a lot; especially when they come across big amount of text. Keeping in view the reading nature of people today, you must consider the following tips so that people read the contents of your web page and visit it more often.

• People really don’t like bigger blocks of text. So a better approach would be to divide your text into various paragraphs or bullet points. A much better option would be to break your text and give appropriate heading to every part of it.
• Avoid long paragraphs as well or long sentences that may confuse the readers.
• Always use clear and precise writing style.
• Use some graphics with text, although graphics may cause the page to load slowly.
• Make sure that you use various resting points for the eyes of the readers. For this purpose, you can use sub-headings or lists. Use specific keywords to capture the attention of the reader and make them bold rather than using italic font as italic font is difficult to read.
• Name the links in an appropriate manner; rather than using a link with a CLICK HERE text, you should think about some meaningful text for the link.

The writing style should be more journalistic in style rather than academic. Use direct and structured sentences so that the information can be given with minimum words. Use inverted pyramid technique which is usually used in newspapers; the headline should come first and then following paragraphs explaining the headline. If your webpage is unable to attract the reader then the reader would simply move out of your page.

Do your pages deliver?

People visit a website; to get relevant information of their interest. If your website doesn’t deliver what it promises to deliver, then it won’t be visited and people will soon realize that this is not the right place to visit. One of the best qualities of a webpage is that it targets specific audience. Every group of users have different requirements. For instance, requirements for a student would be different as compared to that of teachers and so on. The following example of a University website would illustrate the concept mentioned above.

• If you target audience are students then your website should be able to provide adequate information about the courses student look for. The department that offer those courses and the facilities that the department provides. Students may also want to know about the overall expenditure of a particular course, accommodation etc.
• For staff members; the website should provide administrative information and supporting materials relevant to the staff members. It should also include daily news, if any, about the respective department.
• For university alumni, there must be a separate section targeting the news and events related with the university alumni network members.

One of the important parts of a web page is the top of the web page that should provide important navigational options so that the user can navigate to the right page. Working out this part of a webpage is critical; this web page is also called as the home page.

Navigation: how people move around the web

Different people have different way of navigating and surfing around the web. Some people read a web page from start to bottom as if they are reading a book and some just go through from one headline to another. Some people even take the print of a web page so that they can read it or use it for various purposes. People usually are interested in the contents of the main page and skim-read the whole page and click on the link that looks interesting to them; otherwise, they simply just click on the Back button. If the content is made in an efficient manner, then a visitor may follow a link provided in the main page or the home page within or outside the text body. This link may take the visitor to another internal page of the website or it may divert them to some other website. How to cope with the non-linearity of WWW? There are various ways of handling the non-linearity of WWW. Following points would briefly illustrate how to cope with this non-linearity:

• Keep in mind that the visitor might arrive from anywhere on the WWW. Your webpage must inform the users where they have arrived. This can be done by welcoming user with a note like Welcome to University of East London etc so that the user is aware of where he/she is.
• There is also a possibility that the user, who is surfing on the web and using search engines, might arrive at any point in your web site. He/she might land on any of your web pages other than the home page. So make sure that every web page has a link to the home page and every page should be able to inform the user about where they are.
• It is also possible that the user might accidently or by mistake arrive at a wrong part of your website. For example, if the user was intending to visit the computer department of a university, he/she might arrive at engineering department. For this reason, every web page should have a link to the Home Page from where the user can navigate to the desired page.
• Always use meaningful title for every web page of your website. This will help people in finding you using various search engines. Search engine look for these meaningful titles. So rather than making a title like welcome to my homepage etc, you should make titles like Welcome to the University of East London etc.
• Make yourself aware of how most of the people go through web pages and what they really like and what majority doesn’t like and then adapt your website design, content management to suit the need of your target visitors.
• Make sure that every link of your web page is in working condition. A link error usually annoys a visitor.

Accessibility: how to cater for users with special needs

While developing a website, you should consider the needs of every user which might include users with special needs. Best design is accessible design: your website should meet current minimum accessibility standards. Minimum accessibility standards are made so that people with special needs like partial-sight etc can also access your website. There are various steps involved in the making of a website that meets minimum accessibility standards like.

• Choose appropriate colour scheme for your website.
  • The first thing you need to consider is to maintain a good contract between the colour of the text and the colour of the background.
  • Always avoid those backgrounds that are patterned; use rather plain backgrounds.
  • People who are colour-blind particularly find it difficult to see red and green colour.
• It is always advisable to use alternative text for images. Using alternative text for images helps people that use special software in order to read the page louder. Providing alternative text for images is a fairly easy task.
  • You can use FrontPage as some versions of FrontPage automatically put the name of the image as an alternative text for that particular image. However, you have the option of changing this alternative text into more meaningful text.
  • If you are developing the web page your self using HTML then change the image tag according to the following to make an alternative text

<img src=”cat.gif” alt=”Photograph of my cat”>

• Always make sure that your links are meaningful rather than simply Click Here. The text of a link should be informative.
• Try not to use many columns and frames as it is sometimes difficult for the readers to distinguish between them. If you are building a University website then you should definitely avoid using frames. However, if you are developing a non-university website and you are planning to use frames then also make sure that are an alternative non-frame pages available too.
• If you are using audio or video files in your web page then make sure that you include proper textual description of them.
• For some users, Image-maps don’t work and they find it really difficult to manipulate accurately. For those people, you should think about providing text based links; text that is meaningful.

If you want further guidance on how to make accessible web pages for people with special needs, then there is an excellent guidance available on the internet provided by WWW. The name is WWW or World Wide Web Consortium’s Web Accessibility Initiative.

Speeding things up

Today, with so many websites on the internet, it is very unlikely that people would like to wait longer for a page to be loaded. Many people usually wait for 5 to 7 second before they click on the Back button. The more time it takes for your web page to load, the lesser chances of your page being visited. One way to speed up the loading of your web page is to reduce the size of your web files and make it as small as possible. There are various tips that you can use to speed up the things like:

• Managing the length of a web page:
  • Remember that long scrolling pages are not liked by people. People usually don’t read too much text so there is no need to have a long scrolling pages as it take longer to load a long scrolling page and there is no use of having too much text in your web page as people usually don’t like reading that much. There are sometimes when these longer pages are appropriate and much useful like a list of references or a list of movies etc. People would be willing to wait for it.
  • Make sure that your actual main page, also called as the home page, is compact so that it doesn’t take too longer to load. However, you must take care that all important links are available on the home page that can lead the reader/ user to the important and more relevant page. These relevant pages may take longer to download but the user would be willing to do so if he/she is satisfied with the contents and appearance of the home page.
• Use good writing style: if you use a good writing style then it can also help you in speeding up the process of page loading. If your pages are too verbose then it will definitely take more memory and much more time to be loaded
• Avoid big images or big multimedia files: using big images or other multimedia files can help in attracting good number of audience. However, web pages with big images or multimedia files take longer period of time to load. The tip here is to provide information regarding that page to the user and provide link to the pages that contain those big images or multimedia files. As described earlier, your homepage should be compact and should hook the user and should be able to persuade him/her to navigate through other internal pages which may take longer loading time but would contain more interesting material. For instance, you can use thumbnail images on the home page, which gives link to the actual image on another web page, to capture the attention of the visitor.
• Choose appropriate file format: choosing an appropriate file format is also critical for a web page. Two most popular image formats are JPEG and GIF. JPEG format is particularly used for detailed images having lots of colours. JPEG offers different levels of compression; the greater the compression, the lesser the quality of the image. It is you who has to compromise between the image size and image quality. The other file format GIF is particularly useful for smaller images with fewer details and colours; like buttons, icons etc. If you use GIF for smaller images then try reducing the number of colours for the image as it will help in reducing the size of the image.
• Another way of speeding up the page-loading is to define the information about the layout of the images and the tables used in a web page. For example <img src=”cat.gif”> tell the browser that the web page has a picture in it and <img src=”cat.gif” height=”50” width=”50”> defines the height and width parameters of the image. If you use a web building tool / software like Front Page, Dreamweaver etc, it will define these parameters automatically.
• Make sure that you know how much time it takes for a Java applet to be loaded. Sometimes it takes more than 10 seconds to load and the visitor think as if his/her computer has frozen; so keep that in mind as well.
• If you are using a program like FrontPage to develop your website, then make sure that you keep an eye on the bottom right of the editing window that will give you an approximate idea of how long this page will take to be loaded using a 28.8kbs modem.

Screen design: how to make your web page look good

• Web pages should be consistent:
  • The first factor that makes a web page good is its consistency. All pages of a single website should look part of a common unit; means that in all web pages of a website, you should maintain the consistency of the layout, colour themes, backgrounds etc. If you want to look at an example, look at the examples of different magazines. Notice how every page delivers different content while maintaining the overall consistency.
• Efficient usage of Graphics
  • Always maintain consistency, even with the usage of the graphics.
  • Make proper use of animations.
  • If you have efficiently chosen some graphics, they can make a big positive impact. On the other hand, if you have selected many bad graphics, then can make a worst impact too. So make sure that you use graphics efficiently.
  • Avoid using Hover button as it requires Java and hence is capable of slowing down the browser and eventually the loading time of the page.
• Efficient usage of Colour Schemes.
  • While designing your web pages, consider the requirements for people with special needs like those with poor eye-sight etc.
  • Maintain consistency in your colours; avoid using different colours for different web pages of a single site.
  • By default, links are highlighted so avoid highlight any-other non-linked text in order to avoid any confusion between normal text and link text.
  • Maintain a healthy contrast between the background and the text colour.
• Efficient Page design.
  • Your web page design must be flexible; your web pages might be viewed in different browsers using different operating systems. You must design a website that is flexible enough to accommodate various changes according to the browser.
  • Before putting your website over the internet, make sure that you have checked it using different web browsers like Netscape, Internet Explorer, and Firefox etc. Make sure that it runs at least on popular browsers.
  • Your web pages should work perfectly on a window of 640*480. Check, how your web pages adjust it to different window sizes.
  • Never make use of rare Fonts in your web pages as you never know that it might not work properly on the user’s machine. The most common font style is Arial or Times New Roman.
  • Always use web-safe colours which is a selection of 216 basic colours and most web browsers accurately display these colours.
  • You should be aware of the fact that your web pages might look different at different computers. These pages mainly use CSS or cascading style sheets. Style sheets define common style for the contents of the web page like font etc.

There are various guidance notes available on the internet. Search it and you will come across many web design guidance notes.

Seven ways to improve your website

• One of the ways to improve your website is to make sure that you always update the contents of your website. Keep it up to date.
• If English is not your native language, then make sure that you get your contents proofread by an expert. Contents with silly grammatical omissions or errors give an impression of a non-professional website.
• Home page should provide quick and precise information about the products or services that you sell. It should be able to attract potential customers and should be designed well-enough to make the visitor click on various navigational links.
• Make sure that you website doesn’t have any broken link. So, thoroughly test your website for broken links or use any software/service like NetMechanic to do this task for you.
• Use better writing styles for the contents of your website like use multiple paragraphs or bullet points for your contents in order to give some rest to the reader’s eyes.
• Always make sure that the major portions or sections of your website are easily accessible.
• Try to improve the search engine ranking by using various methods like link baits etc.

All of these are some of the major characteristics of a good webpage. If you are a novice web developer or simply don’t know how to develop web pages, then you should consider hiring a professional web design company or freelancers; especially from London that can input all above mentioned characteristics in your website at a reasonable cost. If you can develop it on your own, then get it done by using professional freelancers available in London. Make sure that you ask for their relevant experience and relevant sample work done in the past and also make sure that you have properly put forward all your requirements before the development process begins.

Tags: Birmingham, design, Developer, Effective. Web. Page, professional

This entry was posted on Saturday, June 20th, 2009 at 00:29 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.