An Introduction

To Websites

With a little of help from“WebPages That Suck

3 Categories of Website

• Business– To make money– Eg http://www.virginblue.com.au/

• Information– To disseminate information or

opinions– Eg http://www.led-zeppelin.com/

• Ego– A personal webpage

Business Site - Guidelines– looks professional

• branded• Eg no spelling errors

– easy to navigate• Divide content into logical groupings

– Informative• What does the company do, can the user tell this from the

front page• Contact information on every page

– marketed properly• Search engine submissions• Suit the target audience

– quick to load• More than a breath go somewhere else

Who is the target audience?

Identify•Current customers•Potential customers

What are their information requirements?

How can you best present this information?

What are possible paths the target audience may take?

Homepage

•Often first page a user visits so it is very important. It should:

–Fast to download–Clearly display “Sites purpose”–Contain navigation–Look professional

Navigation

• navigation tools– texts– Graphics– both

• Consistency (type, position, links)

Text

• Content is King• Must be easy to read

– Font size, face, color & background color

• Scannable – Generally people scan not read– Bullet points– Summarise text

• If there is too much text:– add graphics– Allow user to print and or download the

document

Graphics

• Don’t use them unless they look really good

• Keep the graphics file size small – ie jpeg or gif

• Use blocks of color instead• Careful of background images

– text must be easy to read

• Use image descriptions - (Alt parameter)• Do you need animated GIFs

– Don’t use them for the sake of animation

Sound

• Is it necessary?

Good web design…Consider:• Planning 1 - site map

• split the content into logical sections

• Planning 2 – page layout• How each page will look

• Planning 3 – Content guide• Page content

• Carefully select text and graphic• Browser Support

• eg IE and NN

• Hardware support• Different screen resolution, download speeds

Creating a Web page or site

• WYSIWYG - What you see is what you get– Eg dreamweaver, frontpage– What you design on-screen will

(should) appear in a browser window• Raw HTML code

– Homesite, Notepad