Download Document

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