
2/26


Create a Site Specification

Answer the following questions:

Write a two or three-paragraph mission statement that briefly states the

sites goals?

What do you envision as the goal of the site?

What do ou or our com an or or anization ho e to ainfrom creating and maintaining a Web site?


Create a Site Specification

Answer the following questions:

How will ou ud e the success of the site? What are the measuring factors you can use to assess the

effectiveness of the site?

Who is the target audience? What characteristics do they share? How will you find out more about them?

What are the limiting technical factors affecting your site?

What is the budget ? Is there a schedule or target delivery date ?


3/26


Identify the Content Goal

Examine closely what type of site you are building

Your objectives and your users objectives may be quite

Adopt your users perspective

Think about the type of content youre presenting and look tothe Web for examples of how best to present it



Types of web sites:

Billboard

A Web presence for business or commercial venture

Publishing Major newspapers and periodicals

Portal Gateways to the web and offer an array of services including

searching, email, shopping, news, and organized links to Webresources.

Special interest, public interest, and nonprofit organization News and current information for volunteers, devotees, novices, a

specific audience, or the general public.


4/26



T pes of web sites:

Blog A ersonal web a e that reflects the ersonalit and interest of the

author

Virtual gallery

A place to display samples of all type of art and design

E-commerce catalo online sho in

Shopping medium for people that can connected to the web

Product su ort

Virtual contact place for consumers who need help with a product



Types of web sites:

http://en.wikipedia.org/wiki/Website#Types_of_websites


5/26


Analyze Your Audience

Produce an audience definition:

How can you attract them and entice them to return for repeat

What type of computer and connection speed does your typical



Who are the typical members of your audience? Are they male or female?

What is their reading and vocabulary level? What level of technical aptitude do they have?

Why do people come to your site? Do they want information?

Do they want to download files?

Are they looking for links to other Web sites?


6/26



Do you have a captive audience, such as a base of loyal

customers that want up-to-date information?

Are you designing for an intranet, where users are employees ofan organization?

o er s es n o your s e, or w your s e prov e n s

If someone unfamiliar with the site visits, will they know what you



How often will users return to your site?

Do they have a reason to come back?

What computing platform do your users have?

What type of browser do they use?

If you are on an intranet, is there a standard for browsers,connec on, an screen reso u on


7/26



Whose skills do ou need to build the site? Who will create the graphics, code the pages, and write the text?

Do you have the talent and economic resources that you need?

Identify technology and Constraints Consider the limitations or advantages that members of your audience

share

Identify software tools to deliver your site Notepad

Adobe Dreamweaver, Adobe GoLive, Microsoft FrontPage

Some Resource LinksShareware.com

htt ://www.shareware.com/

TUCOWS Shareware Site

http://www.tucows.com/

Macromedia/Adobe Systems Incorporated

http://www.adobe.com/


User feedback surve exam le

http://www.fehd.gov.hk/english/survey/form.html


8/26


Build a Development Team

The following roles are necessary:

HTML Coders Designers r ters an n ormat on es gners Software Programmers Database Administrators Marketing


Filenames and URLs

Plan your file-naming conventions for your site

operating system your Web server uses

T icall oull develo our Web site locall on a PC orMacintosh. You will upload the files to the Web server as the laststep in the publishing process.

ay attent on to p ys ca pat an a so ute pat


9/26



File Naming Conventions

Case Sensitivity - Use lowercase for all file names and in theHTML code

Character Exceptions - Leave out special characters such as

*, , , , ,

File Extensions - Use the correct three-letter extension


10/26


Use the ISO standard

The International Standards Organization

letters followed by a period and a three-letter. ,

numbers, and the underscore character.

8.3 filename http://en.wikipedia.org/wiki/8.3_filenameLong file name http://en.wikipedia.org/wiki/Long_filename


Use the ISO standard

Here are some valid file name examples:

m a e.htm

chap_1.htm

picture1.jpg

logo.gif


11/26


Default Main Page Name

Every Web site has a default main page that displays when the

browser requests the directory of the site rather than a specificfile

Before you start coding, check with your system administratorto verif the main a e file name

index.htm; index.php; index.asp; are the most common defaultmain a e name


URL (Uniform Resource Locator) Usage

Complete URLs - Includes the protocol, domain name, path,and file name. Refers to another server on the Internet.

Partial URLs - Omits the protocol and domain name. Refers to.


12/26


Absolute URLs exam le

http://www.hkbu.edu.hk/~bus/content/index.html

rotoco p:

Domain name www.hkbu.edu.hk

at ~ us content

File index.html


Directory Structure

A typical Web server has a user area that contains folders foreach user

Your files are stored in your user area, along with other filesfrom other Web sites stored in their respective user areas

The directory structure of the Web server affects the format ofyour sites URL


13/26



Directory Structure

When you buy a domain name, the name youchoose is an alias that points to your actual location

on e e server


14/26



Build a Relative File Structure

Build your Web site on a different computer

Designing the directory and file structure.

Any URLs you specify to link to other pages in your site mustinclude paths that are transferable

Relative paths tell the browser where a file is located relative tothe document the browser is currently viewing


15/26




16/26



Create a site storyboard

creating a flowchart that shows

the structure and logic behind the content presentation and

navigation choices

in planning your site


17/26


The linear information structure lets ou uide the user alon a ath. This structure lends itself tobook-type presentations or content that requires the user to follow a predefined path.


e tutor a structure s per ect or computer- ase tra n ng content suc as essons, tutor a s, ortask-oriented procedures


18/26


Many smaller Web sites follow the Web structure which offers links to and from every page in thesite. This allows the user to jump freely to any page from any other page.


Hierarchical Structure

The hierarchical structure is probably the most commoninformation design. It lends itself to larger content collectionsbecause the section a es break u and or anize the content

at different levels throughout the site.


19/26



Cluster Structure

The cluster structure is similar to the hierarchical structure,except that every topic area is an island of information untoitself with all a es in each cluster linked to each other


20/26



Catalog Structure

The catalog structure accommodates electronic shopping. Theuser can browse or search for items and view specificinformation about each roduct on the item a es.


21/26



Site Structure (from Web Style Guide 3rd edition)

http://gd.tuwien.ac.at/languages/html/webstyle/wsg3/3-

n ormat on-arch tecture -s te-structure.htm


22/26


Site Specification examples

http://oc.course.com/webwarrior/sklar4/includes/downloa

ds/ch3/site_spec_sample_1.htm


ds ch s te_spec_samp e_ .htm


ds/ch3/site_spec_sample_3.htm#top


Publish Your Web Site

Choose a Web Hostin Service Providerhttp://en.wikipedia.org/wiki/Web_hosting_service


23/26


Test Your Web Site

Web Design variables

u p e rowsers

Multiple operating systems

Connection s eed

Display Type

User Testing

Usability Test

p: en.w pe a.org w sa y_ es ng

http://www.webcredible.co.uk/user-friendly-resources/web-

usability/usability-testing.shtml


Refine and Update Your Content

Collect feedback from users

Plan for on going maintenance

an or ma or we es gn c anges on a regu ar as s


24/26


Attract Notice to Your Web Site

Leveraging Search Engines

By submit URLs to Search Engine. .

Add URLs to google

http://www.google.com/addurl/

http://search.yahoo.com/info/submit.html

Use Meaningful Titles

Use alt Text with Images


Summary

Start with pencil and paper. Your ideas will be less restrictedand you can easily revise and recast without recoding.

Write a site specification document. Youll find it invaluable as areference while building your site.


25/26


Summary

Analyze your audience and try to create an audience profile.

Focus your site on the users needs, and continue to meetthose needs b ada tin the site based on user feedback.

An effective site is more commonly the result of a team effort.Leverage different skill sets and experience to build a Web siteteam.


Summary

Plan for successful implementation of your site by creatingportable file naming conventions. Build a relative file structurethat can be transferred to your Web server without a hitch.

Use a pencil and paper to diagram your site. Even if the designchan es oull save a lot of time and effort b visuall detailinthe structure of your content.


26/26


Major Reference in this lecture

Principles of Web Design b Joel Sklar

Web Standards Creativity: Innovations in Web Design with, ,

by Cameron Adams; Mark Boulton; Andy Clarke; Simon Collison; Jeffro ; ere ea ers one; an oy ; an arco e; an u n an

Rob Weychert

e y e u e

by Patrick J. Lynch and Sarah Horton

Wikipedia


. .

Individual Assignment Submit a draft Site Specification for your individual personal site

next week

ch.3 site planning

Documents