Web Design Tip and Web Design Tip and TricksTricks

Vision and PurposeVision and Purpose

Why do you want a website?Why do you want a website? A website is always under A website is always under

construction, is flexible but you construction, is flexible but you should have an aim and a goal.should have an aim and a goal. Start small, dream big.Start small, dream big. ..

Why should anyone come to Why should anyone come to your site? What makes it your site? What makes it special?special?

WWhat are the priorities for hat are the priorities for the site?the site?

A “virtual library”A “virtual library” InformationInformation RecreationRecreation Public relationsPublic relations Co-operationCo-operation

Planning the Planning the Infrastructure Infrastructure

support and funding support and funding staffing (expertise and staffing (expertise and

time allocationtime allocation)) technical backup for both technical backup for both

hardware and softwarehardware and software web authoring softwareweb authoring software

Who is the audience?Who is the audience?

StaffStaff ParentsParents ChildrenChildren TeachersTeachers Community membersCommunity members Other librariesOther libraries The world at largeThe world at large

Content: WContent: What are they hat are they looking for?looking for?

Information about the libraryInformation about the library User or staff informationUser or staff information Reference and study guidesReference and study guides Links to appropriate websitesLinks to appropriate websites Webquests, pathfinders, Webquests, pathfinders,

research modulesresearch modules

Finding Material Finding Material to Addto Add

Copyright and Intellectual Property Australian Copyright Council

Internet Searching Windweaver

Search Engines Google

Evaluating Web Sites How good is that Web Site?

StructureStructure

RememberRemember start smallstart small,, but but figure figure oon growthn growth

The site will change, alter The site will change, alter and grow. Expect this. and grow. Expect this.

How will you organise?How will you organise? Do NOT use your Do NOT use your

organisation structure!organisation structure!

Structural PlanStructural Plan What are the main What are the main

areas of your site?areas of your site? These will need to be These will need to be

subdivided. How? subdivided. How? What makes sense? What makes sense? What will your users What will your users be looking for?be looking for?

At first you may not At first you may not have anything each have anything each section. You will need section. You will need to have a plan to to have a plan to accommodate further accommodate further growth. growth.

Contacts

Weblinks

Programmes

Catalogue

Services

Information

Home

Principles of DesignPrinciples of Design What do you know of web deWhat do you know of web design sign

principles? principles? Designing Web Pages Your Way

The basic idea is KISS (Keep it Simple The basic idea is KISS (Keep it Simple S…) S…)

Have a look at what some schools Have a look at what some schools have done.have done.

School Websites and Design School Library Web Sites and Their De

sign.

Web authoring softwareWeb authoring software

What are the advantages and What are the advantages and disadvantages of particular disadvantages of particular packagepackagess??

Web Authoring Software and HTML

Dreamweaver Web Design Front Page Web Design

SpeedSpeed Users need to find Users need to find

what they want what they want quickly. quickly.

Pages need to load Pages need to load in seconds.in seconds.

The priority is for The priority is for each page to load each page to load quickly and quickly and

provide information provide information as easily as as easily as possible possible

•Quick loading pages•Easy to find content

•No frames!!!! •only useful flash•few low resolution graphics

Navigation: Navigation: Users finding what’s thereUsers finding what’s there

The web is not a bookThe web is not a book Link, link, linkLink, link, link Navigation barsNavigation bars Search enginesSearch engines

Freefind.comFreefind.com Google.comGoogle.com

Site mapsSite maps See See

P.L. Duffy Resource Centre, Trinity College Site Map

Factors to ConsiderFactors to Consider Usability and Accessibi

lityAll users can access All users can access your siteyour site

Colours for the WebAll users can make out All users can make out your design.your design.

Fonts for the WebAll can read your site. All can read your site.

•Accessible pages (eg alt text)•Large readable fonts (verdana)

•High contrast colours •No textured backgrounds!

FilesFiles

In each folder call the main In each folder call the main file index.html/default.htm file index.html/default.htm

Short, lower case file and Short, lower case file and folder namesfolder names

No capitals or strange No capitals or strange characters in file namescharacters in file names

FoldersFolders

Make sensible short namesMake sensible short names Create enough folders for each Create enough folders for each

main section that you plan.main section that you plan. Do not create too many levels of Do not create too many levels of

folders.folders.

TemplatesTemplates

Most software programmes Most software programmes allow you to set these up.allow you to set these up.

Establish guidelines for yourself Establish guidelines for yourself and all designersand all designers

Establish “design guides”Establish “design guides”

Style Sheets YAY!!Style Sheets YAY!!

Cascading Style SheetsW3Schools Online Web

Wonderful invention makes life soo easy!!!Enter instructions only once!!

Extra FacilitiesExtra Facilities

Active Server Pages Web Graphics: Design and Res

ources Java Flash

Display and Setting OutDisplay and Setting Out

Short narrow pages (no Short narrow pages (no scrolling sideways!)scrolling sideways!)

No fussy backgroundsNo fussy backgrounds NO FRAMES!!!NO FRAMES!!! Set font size 100% (not point Set font size 100% (not point

or pixel)or pixel) Set table content 90% width)Set table content 90% width) Set cells 30%Set cells 30%

Checking it Out!Checking it Out!

Check your code. Check your code. World Wide Web Consortium (W3C)

Check the appearance Check the appearance Anybrowser. . Check accessiblityCheck accessiblity Feedback facilityFeedback facility LoggingLogging

Extreme Tracking. and Freefind and Freefind Evaluating Web Sites Evaluating Web Sites

10 Criteria to Evaluate a Website 10 Criteria to Evaluate a Website

What will be the criteriaWhat will be the criteria for a successful site? for a successful site?

Is it used?Is it used? Is it useful?Is it useful? Are users suggesting Are users suggesting

additions, changes additions, changes and improvements?and improvements?

How will you judge How will you judge this?this?