I will be designing my web site for the following types of users:1.      standard user – ordinary site;2.      Visually impaired user – different colour scheme; Writing for text-reading software, using Avoid multi-columns or tables, Alternate Text (ALT Text).3.      A user with reading difficulty – i.e. dyslexia, taking into consideration Column width, Background colour, Type face, Print size, use of italics, picture and images, Text boxes or bubbles, Short sentences, Short paragraphs, Writing for text-reading software

PRO:

CSS is designed to allow the separation of presentation and structure. Font colors, background styles, element alignments, borders and sizes are moved into a stylesheet, resulting in considerably simpler HTML code. The HTML documents become much smaller and web browsers will usually cache sites CSS stylesheets. This leads to a reduction in network traffic and noticeably quicker page downloads.

CON: Naming can get confusing. For example, authors might associate the class name with desired presentational attributes; for example, a CSS class to be applied to emphasized text might be named “bigred,” implying that it is rendered in a large red font. While such a choice of naming may be intuitive to the document author, it can cause problems if the author later decides that the emphasized text should instead be green; the author is left with a CSS class called “bigred” that describes something that is green. There are bugs in CSS that you need to work out when you need it to work across multiple browsers & platforms, and its harder to debug than with a simple HTML.

taa tuttat duu daaau…..

Click here to view my site!The webpage I have designed is a draft home page for a car web site, it uses layout-boxes and tables to organize text and images on the page. The webpage could be vastly improved, currently the images and texts look squashed together on the page, and this could be resolved by resizing tables and layout boxes. 

The homepage uses a vertical navigation bar, but a horizontal set of links could be used under the page banner to make the website more accessible. 

The font I have used in the body of the page is easily readable, and the text is kept to a minimum to prevent users of the site stumbling on a large wall of text on the first page of the site.  

The colours used could be changed to make the site more exciting however they seem ideal for the purpose of the site. 

The images used are all jpegs so the site loads easily and quickly, to improve this site I would add a flash animation, add java coding to display the time and date to increase the professional look and resize tables and layout boxes to improve layout.

This is the website i created in a hour, Click here to view my site!

Evaluation of a website using my criteria 

The website I have chosen to evaluate is: http://www.heptune.com/farts.html 

The evaluation took in consideration the following criteria: 

1. Speed of download
2. Format of pages in different screen sizes
3. Operational in different browsers
4. Accessibility around website menus or links
5. Use of graphical presentation layout of text/ colours / fonts used and images

 Evaluation  

How fast do the pages download? 

The page for this site loaded very quickly under 3 seconds using a broad band connection. This was most likely achieved due to the fact that all the images on the web page were of low quality. The web page consists of a single animation and a very large chunk of text and a few images.

Does the screen size matter for this site?

No! This web site could be viewed in any size screen as the Brower window was made smaller the page shrunk to accommodate the window size.

What about other browsers? 

The website worked in both Microsoft and Netscape internet browsers. 

What is the site trying to do?

The web site is aimed at educating visitors to the site about farts, and uses scientific facts through a text medium. It also lists links to other resources and holds links to other web pages.

Graphical layout  

The designer of this site could vastly improve the presentation of the site.The colours used in the design are too bright to the eye and the background is not a single shade and conflicts with the text. 

The page has no navigational menu or links and the majority of the site is made up of a large wall of text. 

This could have been more user friendly by presenting the text in tables or columns. 

The font used is Times New Roman (serif) this is a suitable text to be read of the screen as body text however it is difficult to read  of screen print outs.

The designer failed to use a san-serif such as Verdana or Arial as a contrast for headlines and titles. 

Bad points

• No layout
• Rubbish design
• Poor font used
• Wall of text
• Wrong colours used

Good points

• Excellent download time
• Visible in all browsers and screen sizes
• Good contents of data

Overall Evaluation 

Very poor design needs change of colours; fonts need to be changed, use of tables and navigation need to be implemented. 

good web design should include and involve ……

Text

Background does not interrupt the text

Text is big enough to read, but not too big

The hierarchy of information is perfectly clear

Columns of text are narrower than in a book to make reading easier on the screen

Navigation

Navigation buttons and bars are easy to understand and use

Navigation is consistent throughout web site

Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on

Frames, if used, are not obtrusive

A large site has an index or site map

Links

Link colors coordinate with page colors

Links are underlined so they are instantly clear to the visitor

Graphics

Buttons are not big and dorky

Every graphic has an alt label

Every graphic link has a matching text link

Graphics and backgrounds use browser-safe colors

Animated graphics turn off by themselves

General Design

Pages download quickly

First page and home page fit into 640 x 460 pixel space

All of the other pages have the immediate visual impact within 640 x 460 pixels

Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text

Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

hi world im raj and i hope to use this blog to show tips on good website design! so pay attention and watch this space!!