APT1040 Intro to Web Design & Applications

Lec:-04

Planning the Web Site

And
Information Struture
(Reff; -C- 3)

Lecturer: Patrick Afundi

Objectives
• Understand the web site development process
• Create a site specification
• Identify the content goal
• Analyze 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
2
Understanding the Web Site
Development Process

3
Understanding the Web Site
Development Process
• You need a good project plan
• Larger projects need a project manager
• Adopt a development framework
• The project life cycle encompasses the entire project from
start to finish

4
5
Requirements and Specifications
• The client presents the requirements for the site
• Requirements are the list of customer needs
• The project team breaks the requirements down to tasks
• The team prepares a project specification that contains:
• Page layout sketches
• Audience definition
• Technical requirements

6
Information Design and Taxonomy
Creation
• User analysis guides the design of site content
• Goal is to create meaningful content navigation
• Taxonomy is a classification and naming of contents in a
hierarchy
• The taxonomy of the site structures the topic hierarchy and
navigation, -through the top-level content topics down to
individual pieces of information that the user may be looking
for.

7
Graphic Design and Page Template
Creation
• Designers prepare sketches and page mockups to represent
page layouts
• All page layouts start with a mockup
• Mockups can be easily edited based on feedback
• -as the design becomes more stable, the mockup can evolve
to a more refined state called a Wireframe.
• Wireframes document a more stable page design
• Wireframes offer a more complete view of what the final
design will look like

8
9
10
Construction and Content
Development
• Construction begins when the design stage is mostly complete
• This stage includes technical development of the site
• Some testing will occur during this stage

11
Quality Assurance and User
Testing
• Quality assurance validates the technology of the site
• User testing validates the design
• Cross-platform testing and usability testing ensure users can
access content easily

12
Publishing and Promotion
• The site is published/hosted to the web
• Promotion of the site begins
• -How..??

13
Ongoing Maintenance
• Starts when the site goes live and continues throughout the
life of the project
• Keeping content fresh is vital
• -examples of aspects of maintenance..??

14
Creating a Site Specification

15
Start your Planning by creating a
Creating a Site Specification
-this is the design document for your site,
-its the first document the client sees that establishes the basic site design.

Addresses the following questions;

• Who is the client for the site?

• Can you 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 you (or your company or organization) hope to gain
from creating and maintaining a web site?
• What are the requirements for the web site?
16
Creating a Site Specification
• Are the requirements feasible?
• How will you judge the success of the site?
• Who is the target audience?
• What are the limiting technical factors?
• What is the budget?
• Is this a new site or an upgrade?

17
Identifying the Content Goal

18
Identifying the Content Goal
• Examine closely what type of site you are building
• Your objectives and your users’ objectives may be quite
different
• Adopt your users’ perspective
• Think about the type of content you’re presenting and look
to the web for examples of how best to present it

19
Identifying the Content Goal
• Types of web sites:
• Billboard
• Publishing
• Portal
• Special interest
• Blog
• Social networking

20
Identifying the Content Goal
• Types of web sites:
• Wikis
• RSS
• Virtual gallery
• E-commerce, catalog, online shopping
• Product support
• Intranet/Extranet

21
Analyzing Your Audience

22
Analyzing Your Audience
• Produce an audience definition:
• What is it that 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
do your typical visitors have?

23
24
Analyzing Your Audience
• 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 want to download files?
• Are they looking for links to other web sites?

25
Using Web Analytics
• Web analytics are statistics gathered by web servers
• Reporting tools can analyze the statistics
• You can track user activity on your web site
• You can see where your visitors come from and which pages
they like the best

26
27
28
Identifying Technology Issues and
Accessibility Constraints
• Think about where users are geographically located and what
their technology level might be
• Test in different environments and with different technologies
• Consider the physical capabilities of your users

29
Identifying Technology Issues and
Accessibility Constraints
Identify accessibility constraints
• Review the WCAG 2.0 and section 508 guidelines
• In new sites, plan for accessibility
• In existing sites, assess the current accessibility
• Look to other real-life accessibility implementations

30
Identifying Software Tools
• Try to use software that matches the complexity needs of your
site
• Move up to more advanced tools as your skills grow
• Learn to use graphics tools as well
• Look to shareware and freeware options

-Refer to your text, for List of Freeware examples of Web Site Development tools

31
Building a Web Site Development
Team

32
Building a Web Site Development
Team
• Project managers
• HTML developers
• Designers
• Writers and information designers
• Application developers
• Database administrators
• Server administrators

33
Creating Conventions for Filenames
and URLs

34
Naming Files
• File naming conventions vary across operating systems
• The ISO 9660 standard works across all operating systems
• Leave out special characters
• Use the correct file extensions
• Use underscores instead of spaces
• Use all lowercase letters

35
36
Choosing the Correct File Naming
Conventions
• Don’t use spaces in your filenames; use underscores instead.
Instead of about web design.html, use
about_web_design.html
• Avoid all special characters. Stick to letters, numbers, dashes,
and underscores
• Use all lowercase letters for your filenames

37
Using Complete or Partial URLs
• Complete URLs are the unique address of a file on the web

38
Using Complete or Partial URLs
• Partial URLs locate a file that resides on your own computer or
server

<a href=“mobility.htm">link
text</a>

39
Setting a Directory Structure

• A typical Web server has a user area that contains folders for each user
• Your files are stored in your user area
• The directory structure of the Web server affects the format of your
site’s URL

40
 Setting a Directory Structure
• You build a site on a development computer but host it on a
different computer
• The files for your web site must be transferred from the
development computer to the hosting computer
• Your file structure must be transferable
• Use relative paths to indicate file locations

• Relative paths tell the browser where a file is located

relative to the document the browser is currently viewing

41
Single Folder Structure

42
Hierarchical Folder Structure

43
Segregated Hierarchical folder Structure

44
Create a Site Storyboard
and desired
Information Structure

3-45
 Create a Site Storyboard
• Plan your site by creating a storyboard flowchart that
shows the structure, logic and taxonomy behind the
content presentation and navigation choices you
offer.
• This preliminary step is one of the most important
that you take in planning your site

What is a website storyboard?

A Website storyboard is a visual representation of your website's
structure. It maps out all the components of your site and how they
inter-relate. Creating a website storyboard can help you plan and
organise your website and even plan the internal linking structure
between pages. 3-46
Examples..

3-47
 Organizing the
Information Structure

• Think about your users’ information needs and how they can best access
the content of your site.
• How should your information design map look like?

3-48
 Linear Structure
• The linear information structure lets you guide the user
along a path
• This structure lends itself to book-type presentations or
content that requires the user to follow a predefined
path

3-49
 Tutorial Structure
• The tutorial structure is perfect for computer-
based training content such as lessons, tutorials,
or task-oriented procedures

3-50
Tutorial Structure

51
Web Structure
(-also known as “Network” structure)

• 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

3-52
Web Structure

53
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

3-54
Hierarchical Structure

55
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

3-56
Cluster Structure

57
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

3-58
Catalog Structure

59
Publishing Your Web Site

60
Choosing a Web Hosting Service
Provider
• The web hosting service hosts your web site
• Select a web hosting service appropriate to the size of your
web site
• Check for the following features
• Accessible technical support
• E-mail addresses
• SQL database support
• Secure socket layer support

61
Registering a Domain Name

62
Web Hosting Service Comparison
Checklist
• Is the web host local or national?
• What are the details of the different hosting packages?
• Are there bandwidth limits for the number of visitors your site
receives per month?
• Does the web host offer technical support?
• How many e-mail addresses do you get?
• Does the web host provide software and offer support for the
latest connection technologies?
• Does the web host offer enhanced services?

63
Uploading Your Files with FTP
• To publish pages on the web, you must send your HTML code,
images, and other files to the web server
• FTP software let you transfer the files
• Some HTML-editing software has built-in FTP
• There are many shareware and freeware FTP programs to
choose from

64
Testing Your Web Site
• Multiple browsers
• Multiple operating systems, devices
• Connection speeds
• Display types
• Link testing

65
Usability Testing
• Vary your subjects
• Formalize your testing
• Develop a feedback form

66
Feedback Questions
• Did you find the information you needed?
• Was it easy or difficult to access the information you needed?
• Did you find the web site visually attractive?
• Did you find the content easy to read?
• Did you find the web site easy to navigate?
• Did you think the information was presented correctly?
• Did the information have enough depth?
• What area of the web site did you like the best? Why?
• What area of the web site did you like the least? Why?
• Would you recommend the web site to others?
67
Summary
• A successful web site is the result of careful planning
• Become familiar with the web development lifecycle
• Start with pencil and paper
• Write a site specification document
• Identify the content goal
• Analyze your audience
• An effective site is a team effort

• Create portable filename conventions

• Create an information structure for your site
• Shop carefully when seeking a web host
• Learn to use FTP software 68
• Test, test, test!
3-69