A Beginners Guide to Web Site Design

What we will cover…. Planning your site. Creating a template. Images and Fonts. Absolute vs. Relative Links.

Before you start.... Why are you creating the site? Why will your students want to use your site? What will your students expect from the site?

Know your user…. Create a user profile.  How IT literate is your audience?  Have they any disabilities?  How will they access your site? etc….

Planning…. Plan your site on paper. Organise your information into logical groupings. Balance the amount of static and dynamic material on your site. Important / often accessed information should be near the top of your site.

Planning…. Break down long documents into smaller chunks. Obtain clearance to use copyright materials.

An example…. Contents Page Noticeboard Reading Lists Course Information Lecture Notes Assignments Week 1 Week 2 Exercise 1 Exercise 2

Templates…. Templates make creating material easier. Give your site a consistent look and feel. Should contain the navigation facilities your site requires.

Navigation System…. Enable your users to navigate around the main areas of your site. Consistent, simple and easy to use. Be available on all pages. Shouldn’t take up much screen space.

Navigation System Use simple buttons which identify major areas of your site Don’t use ‘Back’, ‘Up’, or ‘Click here’ use descriptive links instead.

Our example…. Contents Page Noticeboard Reading Lists Course Information Lecture Notes Assignments Week 1 Week 2 Exercise 1 Exercise 2

Screen Layout Keep it as simple as possible. Design your layout to work with all set-ups. Try not to use complicated tables to achieve special layout effects. Use standard Header tags (H1-H6) rather than using Font tags.

Fonts…. Avoid using too many fonts on one page. Use a san-serif typeface such as Arial, Helvetica, or Verdana. Bold and italics should only be used for emphasis. Use colour sparingly.

How the text may look to the partially sighted

Fonts…. Don’t use text. Use images to achieve special text effects - but don’t overuse, it increases download time.

Example layouts

Images Use where appropriate. Resize images in an image editor. Try not to use large images. Keep page background images simple. Two main image types. JPEG and GIF.

Images - GIF Format Use for small images and images with large blocks of same colour. Maximum of 256 colours Allow you to specify a transparent colour Can be ‘interlaced’ for progressive download

Images - JPEG Format Use for photographs. Stores 16.7 million colours. Can loose detail at high compression level.  Image Examples Image Examples

Pages should include….. A link to the University disclaimer. Your name - preferably with an link. Date page last updated.

Links Absolute - Use full URL as link to file. e.g. “ Relative - Path to file relative to current page. e.g. “../index.html” - get file in directory above current page

Relative vs. Absolute Use relative links where possible. Links are independent of the server. So can create pages anywhere with no need for Internet connection. Pages easier to maintain. Most authoring software use relative paths.

The result...