Ch.3 Site Planning

Hong Kong Baptist University
Week 3
Site Planning
25/01/2010
Dr. Tony Chun-Kuen WONG

Coordinator, BBA(Hons) Information System Management Major
p
Department of Finance and Decision Sciences
School of Business
Site Planning procedures

Create a site specification
Identify a content goal
Analyze
y y your audience
Build a Web site development team
Create conventions for filenames and URLs
Set a directory structure
Create a site storyboard
Publish your Web site
Test your Web site
Refine and update
p your
y content
Attract notice to your Web site
Create a Site Specification
Answer the following questions:
Why are you building the Web site?

Write a two or three-paragraph mission statement that briefly states the
site’s goals?
What do you envision as the goal of the site?
What do y
you ((or y
your company
p y or organization)
g ) hope
p to gain
g
from creating and maintaining a Web site?
Create a Site Specification

Answer the following questions:
How will you judge 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 ?

Identify the Content Goal

Examine closely what type of site you are building
Your objectives and your users’ objectives may be quite
different
Adopt your user’s perspective
Think about the type of content you’re presenting and look to
the 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 Web
resources.
Special interest, public interest, and nonprofit organization

News and current information for volunteers, devotees, novices, a
p
specific audience, or the general
g public.
p

Types
yp of web sites:
Blog
A ppersonal web page
p g that reflects the personality
p y and interest of the
author
Virtual gallery
g y
A place to display samples of all type of art and design
E-commerce,, catalog,
g, online shopping
pp g
Shopping medium for people that can connected to the web
Product support
Virtual contact place for consumers who need help with a product
Intranet/Extranet

Types of web sites:
Another classification from wikipedia
http://en.wikipedia.org/wiki/Website#Types_of_websites
Analyze Your Audience
Produce an audience definition:
What do users want when they come to your site?
How can you attract them and entice them to return for repeat
visits?
What type of computer and connection speed does your typical

visitor have?
Who are the typical members of your audience?

Are they male or female?
What level of education do they have?
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
y want to download files?
Are they looking for links to other Web sites?
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 of

an organization?
Will other
th sites
it li
link
k tto your site,
it or will
ill your site
it provide
id links?
li k ?
If someone unfamiliar with the site visits, will they know what you
offer?
How often will users return to your site?

Do they have a reason to come back?
What computing platform do your users have?

What is their typical connection speed?
What type of browser do they use?
If you are on an intranet, is there a standard for browsers,
connection,
ti andd screen resolution?
l ti ?

Whose skills do y
you 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
Ad b D
Adobe Dreamweaver, Ad
Adobe
b GGoLive,
Li Mi
Microsoft
ft F
FrontPage
tP
Some Resource Links
Shareware.com
• http://www.shareware.com/
TUCOWS Shareware Site
• http://www.tucows.com/
Macromedia/Adobe Systems Incorporated
• http://www.adobe.com/
User feedback survey example

http://www.fehd.gov.hk/english/survey/form.html
Build a Development Team
The following roles are necessary:
Server Administrators
HTML Coders
Designers
W it
Writers and
d Information
I f ti Designers
D i
Software Programmers
Database Administrators
Marketing
Filenames and URLs
Plan your file-naming conventions for your site
Talk to your system administrator and find out what type of

operating system your Web server uses
Typically you’ll
you ll develop your Web site locally on a PC or
Macintosh. You will upload the files to the Web server as the last
step in the publishing process.
P attention
Pay i to physical
h i l path
h and
d absolute
b l path
h
File Naming Conventions
Case Sensitivity - Use lowercase for all file names and in the
HTML code
Character Exceptions - Leave out special characters such as

< >
<, >, //, \,
\ &,
& and *
File Extensions - Use the correct three-letter extension

Use the ISO standard
The International Standards Organization

(ISO) standard specifies a maximum of eight
letters followed by a period and a three-letter
extension Allowed characters are letters
extension. letters,
numbers, and the underscore character.
8.3 filename http://en.wikipedia.org/wiki/8.3_filename

p p g _
Long file name http://en.wikipedia.org/wiki/Long_filename
Use the ISO standard
Here are some valid file name examples:

mypage.htm
yp g
chap_1.htm
picture1.jpg
logo.gif
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 specific
file
Before you start coding, check with your system administrator

to verifyy the main p
page
g file name
index.htm; index.php; index.asp; are the most common default

main p
page
g 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

a file that resides on the same server
server.
Absolute
bso u e U
URLss eexample
pe
http://www.hkbu.edu.hk/~bus/content/index.html
P t l
Protocol htt
http:
Domain name www.hkbu.edu.hk
P th
Path ~bus/content/
b / t t/
File index.html
Directory Structure
A typical Web server has a user area that contains folders for
each user
Your files are stored in your user area, along with other files
from other Web sites stored in their respective user areas
The directory structure of the Web server affects the format of

your site’s URL
Directory Structure
When you buy a domain name, the name you

choose is an alias that points to your actual location
on the
th Web
W b server
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 must
include paths that are transferable
Relative paths tell the browser where a file is located relative to

the document the browser is currently viewing

Create a site storyboard

Plan your site by
creating a flowchart that shows
the structure and logic behind the content presentation and
navigation choices
This preliminary step is one of the most important that you take
in planning your site
The linear information structure lets yyou g

guide the user along
gappath. This structure lends itself to
book-type presentations or content that requires the user to follow a predefined path.
The tutorial
Th t t i l structure
t t i perfect
is f t for
f computer-based
t b d ttraining
i i content
t t such
h as llessons, ttutorials,
t i l or
task-oriented procedures
Many smaller Web sites follow the Web structure which offers links to and from every page in the
site. This allows the user to jump freely to any page from any other page.
Hierarchical Structure
The hierarchical structure is probably the most common
information design. It lends itself to larger content collections
because the section pages break up and organize the content
at different levels throughout the site.
Cluster Structure
The cluster structure is similar to the hierarchical structure,
except that every topic area is an island of information unto
itself, with all pages in each cluster linked to each other
Catalog Structure
The catalog structure accommodates electronic shopping. The
user can browse or search for items and view specific
information about each product on the item pages.
Site Structure (from Web Style Guide 3rd edition)
http://gd.tuwien.ac.at/languages/html/webstyle/wsg3/3-
i f
information-architecture/3-site-structure.html
i hi /3 i h l
Site Specification examples
http://oc.course.com/webwarrior/sklar4/includes/downloa
ds/ch3/site_spec_sample_1.htm
d / h3/ i
ds/ch3/site_spec_sample_2.htm
l 2h
ds/ch3/site_spec_sample_3.htm#top
Publish Your Web Site
Choose a Web Hosting Service Provider

http://en.wikipedia.org/wiki/Web_hosting_service
Test Your Web Site

Web Design variables
Multiple browsers
Multiple operating systems
Connection speed
Display Type
User Testing
Usability Test
http://en ikipedia org/ iki/Usabilit testing
http://en.wikipedia.org/wiki/Usability_testing
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
Plan for major web design changes on a regular basis
Attract Notice to Your Web Site

Leveraging Search Engines
By submit URLs to Search Engine
www searchenginewatch com
www.searchenginewatch.com
Add URLs to google

http://www.google.com/addurl/
Add URLs to Yahoo

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 restricted
and you can easily revise and recast without recoding.
Write a site specification document. You’ll find it invaluable as a

reference while building your site.
Summary
Analyze your audience and try to create an audience profile.
Focus your site on the user’s needs, and continue to meet
those needs by adapting 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 site
team.
Summary
Plan for successful implementation of your site by creating
portable file naming conventions. Build a relative file structure
that can be transferred to your Web server without a hitch.
Use a pencil and paper to diagram your site. Even if the design
changes, you’ll
you ll save a lot of time and effort by visually detailing
the structure of your content.
Major Reference in this lecture
Principles of Web Design

byy Joel Sklar
Web Standards Creativity: Innovations in Web Design with

XHTML CSS,
XHTML, CSS and DOM Scripting
by Cameron Adams; Mark Boulton; Andy Clarke; Simon Collison; Jeff

Croft; Derek Featherstone; Ian Lloyd; Ethan Marcotte; Dan Rubin and
Rob Weychert
W b St
Web Style
l GGuide
id
by Patrick J. Lynch and Sarah Horton
Wikipedia
Tutorial
Visit the site used in this lecture + http://www.jessett.com/

http://www jessett com/
Individual Assignment
g
Submit a draft Site Specification for your individual personal site
next week

Ch.3 Site Planning

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ch.3 Site Planning

Uploaded by

Copyright:

Available Formats

Hong Kong Baptist University

Dr. Tony Chun-Kuen WONG

Hong Kong Baptist University

Site Planning procedures

Create a Site Specification

Answer the following questions:

 Why are you building the Web site?

 What do you envision as the goal of the site?

Hong Kong Baptist University

Create a Site Specification

 How will you judge the success of the site?

 Who is the target audience?

 What are the limiting technical factors affecting your site?

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

Identify the Content Goal

Hong Kong Baptist University

Identify the Content Goal

 Special interest, public interest, and nonprofit organization

Identify the Content Goal

Hong Kong Baptist University

Identify the Content Goal

Another classification from wikipedia

Analyze Your Audience

Produce an audience definition:

 What do users want when they come to your site?

 What type of computer and connection speed does your typical

Hong Kong Baptist University

Analyze Your Audience

 Who are the typical members of your audience?

 Why do people come to your site?

Analyze Your Audience

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

 Are you designing for an intranet, where users are employees of

Hong Kong Baptist University

Analyze Your Audience

 How often will users return to your site?

 What computing platform do your users have?

Analyze Your Audience

 Identify technology and Constraints

 Identify software tools to deliver your site

Hong Kong Baptist University

User feedback survey example

Build a Development Team

The following roles are necessary:

Hong Kong Baptist University

Filenames and URLs

 Plan your file-naming conventions for your site

 Talk to your system administrator and find out what type of

Hong Kong Baptist University

File Naming Conventions

 Character Exceptions - Leave out special characters such as

 File Extensions - Use the correct three-letter extension

Use the ISO standard

The International Standards Organization

8.3 filename http://en.wikipedia.org/wiki/8.3_filename

Hong Kong Baptist University

Use the ISO standard

Here are some valid file name examples:

Default Main Page Name

 Before you start coding, check with your system administrator

 index.htm; index.php; index.asp; are the most common default

Hong Kong Baptist University

URL (Uniform Resource Locator) Usage

Why are you building the Web site?

What do you envision as the goal of the site?

How will you judge the success of the site?

Who is the target audience?

What are the limiting technical factors affecting your site?

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

Special interest, public interest, and nonprofit organization

What do users want when they come to your site?

What type of computer and connection speed does your typical

Who are the typical members of your audience?

Why do people come to your site?

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

Are you designing for an intranet, where users are employees of

How often will users return to your site?

What computing platform do your users have?

Identify technology and Constraints

Identify software tools to deliver your site

Plan your file-naming conventions for your site

Talk to your system administrator and find out what type of

Character Exceptions - Leave out special characters such as

File Extensions - Use the correct three-letter extension

Before you start coding, check with your system administrator

index.htm; index.php; index.asp; are the most common default

Complete URLs - Includes the protocol, domain name, path,

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

The directory structure of the Web server affects the format of

When you buy a domain name, the name you

Designing the directory and file structure.

Relative paths tell the browser where a file is located relative to

Add URLs to google

Add URLs to Yahoo

Use Meaningful Titles

Write a site specification document. You’ll find it invaluable as a

An effective site is more commonly the result of a team effort.

Principles of Web Design

Web Standards Creativity: Innovations in Web Design with

by Cameron Adams; Mark Boulton; Andy Clarke; Simon Collison; Jeff