Chapter 3 Website Development

(Design, Construction & Testing)

Duan, Megan, Quinn & Mai

Website Design

Design is the process of originating and

developing a plan for an aesthetic and
functional object, which usually requires
considerable research, thought, modelling
and iterative adjustment.

A good design will add value

By facilitating a visitors online

experience
By communicating information
By transmitting brand values
By creating or reinforcing a desired
emotional response

The Website Design process

Information Architecture
Interaction Design
Interface Design
Navigation Design
Information Design
Visual Design

Information Architecture

The organisation and structure of

web content

Contains separate branches

Shows how content is inter-related

Creating the Information Architecture

Card sorting works by using all the

items in a Content Inventory as
building blocks within a site
structure. To decide on the correct
place for each block, representatives
of the website audience are invited to
participate in a workshop.

Audience-based Architecture
Topic-based Architecture
Task-based Architecture

Tree Diagram

Interaction Design

A system for structuring and

generating actions on a website in
response to user behaviour.

Low-Fidelity(LoFi)
A LoFi interactive design is a prototype of content
that has been produced in a very basic way.

High Fidelity(HiFi)
HiFi Design Modelling is a prototype of this sort
represents a much more accurate visual
representation of the envisaged design.

Error Modelling

Interface Design

Interface Design is concerned with

the selection of web elements that
facilitate interaction with site
visitors.

Navigation Design

Navigation Design is primarily concerned

with the selection of suitable systems of
wayfinding.
Wayfinding is defined as the process used
to orient and navigate. The overall goal of
wayfinding is to accurately relocate from
one place to another in a large-scale
space.

Global Navigation
Local Navigation
Breadcrumb Navigation
Index/Directory
Contextual Navigation
Search
Sitemap
Drop Down Menu

Information Design

Information Design is concerned with

the effective presentation of content
on website user agents.
The role of the information Designer
is to pull together the results from
each of the previous phases of design
in order to create unified page
arrangements.

Grid Systems and the Golden Section

Wireframe

Visual Design

A design solution must be based on the

Goals of the site in question and the values
of the organisation creating it.

Organisational Values
The set of attributes that define the personality of an
enterprise

Design Conventions
Following agreements on values and identity, the creation
of the visual design can begin

Design Conventions
1)Graphics

Pictorial Graphics encompass any photographs or

illustrations used in support of site content.
Graphic Devices consist of small images that are
used for decorative purposes.
Graphic Text occurs where plain text is replaced by
an image that contains a desired phrase.
Information Graphics consist of diagrams and
charts that are used to illustrate or reinforce
concepts

2)Color

Color Palette
Color Model Designers should attempt to match
colors to the basic conceptual model of human color
perception.
Highlighting Elements Color should be used for a
purpose, not just for decoration.
Legibility/Readability the Designer must ensure
that a color palette allows sufficient contrast for the
legibility of text and minimal eye-discomfort.
Quantity a maximum of three or four colors per
page.

3) Text

Typeface consider whether it is commonly

available on the user agents of website
visitors/ Legibility/ the default size of text
as it appears on-screen
Quantity to avoid visual confusion, no
more than two typefaces should be used on
any website.

WEBSITE CONSTRUCTION
Before developers are asked to start construction
definite guidelines must be created.
o What coding languages will they use?
o What user agents will the site be compatible with?
o What guidelines for web accessibility will they
refer to?
Why are questions like the examples above
important to not only you but your developer?

THE RISE OF WEB STANDARDS

What are web standards?

Whose recommendations are they based on?

What do the recommendations cover?

By adhering to web standards developers and

manufactures can make sure all sites are ______

MARKUP, PRESENTATION AND

INTERACTIVITY
MarkUp
A language that contains information about
the structural meaning of a document.
Presentation
The appearance of web content controlled
using presentation language.
Interactivity
Controlled through DOM and ECMAScript

MARKUP LANGUAGES
HTML (Hypertext MarkUp Language)
Easy to learn and easy to use
Free and can be written using a range of simple tools
What does HTML control and define?

3 Flavors of HTML
HTML 4.01 Transition
HTML 4.01 Strict
HTML 4.01 Frameset
HTML 4.01 has now been superseded by another
MarkUp language that is of greater value to
organizations that seek robust, future proof sites.

XHTML (Extensible HyperText MarkUp Language)

Can be used to describe anything, not just parts of a document
Is able to mimic traditional HTML but cannot transfer data from
HTML to XHTML
Why was this new MarkUp language needed?

3 Flavors of XHTML
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
A handful of newer versions of XHTML 1.0 have been released since in
hopes of providing better integration with other XML/ XHTML
languages.

CASCADING STYLE SHEETS

What is the purpose of Cascading Style Sheets?

Separateness
All pages use just one Style Sheet to control presentation
Development time can be dramatically reduced
Freed HTML from any presentational obligations
In what ways are CSS flexible?

3 flavors of CSS
CSS 1.
CSS 2.1
CSS 3
As a general rule, any business considering the development of a website
is strongly recommended to adhere to CSS 2.1.

Server-Side Scripting Languages

PHP (Hypertext Pre-processor)
ASP/ ASP.NET (Active Server Pages)
JSP (Java Server Pages)
PERL (Practical Extraction and Reporting
Language)

Databases
MySQL
Microsoft SQL Server
Oracle

WEB 2.0 ( THE GREAT LEAP

FORWARD )

Websites that incorporate

rich functionality
Websites that engender a
co-operative relationship
with visitors
Encourages users to modify
and improve
Websites can syndicate
information and
applications
Engage in an endless cycle
of development to improve
quality
Loyal to Web Standards

AJAX: a development practice

of creating web applications
with engaging activity
Ruby on Rails: a web
application framework based on
a programming language called
Ruby
XSLT: a scripting language that
van be used to alter the
presentation of an XLM
document
Xforms: web forms that allow
users to submit data using
radio buttons, check boxes and
text fields
Scalable Vector Graphics
(SVG): an XML language for
two dimensional images that
can be described
mathematically

Browser Compatibility

Browser Compatibility
Browser

compatibility is concerned with the

appearance and functionality of website content
across a range of internet user agents.
e.g.

mobile phones, PDAs, etc.

Desktop Browsers
It

is necessary to define the browsers for

which a website will be compatible before
construction begins.
For

a site already in operation, the best way to

do this is to establish the user agents that the
current audience actually employ.

Desktop Browsers
A

logfile keeps a record of every device that

accesses a site. As such, Developers can find
out exactly what browsers people prefer and
modify their coding practices accordingly.
Where such statistics are not at hand, other
sources are available.

Browser Wars
Microsoft,
Mozilla
The

Netscape

Firefox

variety of desktop browsers on the market

is likely to remain varied for the foreseeable
future. As seen in the following chart, this
constitutes quite a considerable number

Mobile Browsing
Mobile

browsing encompasses PDAs, mobile phones and other

devices that come equipped with web capability.
WAP

(Wireless Application Protocol) is a system for delivering

content via a format called Wireless MarkUp Language (WML).
WML is a form of MarkUp for devices with small screens, low
connection speeds and low memory.

Smartphone

These

devices have relatively large and

colourful screens that support newer versions
of WML.
More significantly, most smartphones can also
view ordinary web pages written in
HTML/XHTML.

Screen Resolution
Liquid

Layout

Screen

Resolution on Mobile Devices

Web Accessibility
Vision, e.g. blindness, colour blindness.
Hearing, e.g. deafness.
Physical and speech, e.g. restricted use of limbs.
Cognitive, e.g. learning difficulties.

Web Accessibility Initiative

Ensuring

that web technologies support

accessibility.
Developing guidelines.
Improving tools to evaluate and repair web
accessibility.
Conducting education and outreach.
Co-ordinating research and development.

WCAG 1.0

Level A or Priority One

Level AA [doubleA] or Priority Two

Level AAA [tripleA] or Priority Three.

WCAG 2.0
Content

must be perceivable by all users regardless of

disability.

Content and controls must be easily understandable.

Interface elements must be operable regardless of

disability.

Websites must work well with both old and new

technology.

Metadata

Who created it

When it was created

A short description

Copyright ownership

Dublin Core Metadata

Initiative
The

format for most of the metadata used in HTML is

based on the recommendations of the Dublin Core
Metadata Initiative85 (DCMI).

Title
Author
Keywords (these may be taken from a taxonomy if
one is available)
Description
Date created
Copyright

Character
Set
A Character Set is a piece of
code that matches the alphabet of a spoken

language to that of a computer language.

based

on Unicode.
sample character sets include:

Taxonomy
A

taxonomy is a system for classifying objects into an

ordered hierarchical structure that indicates natural
relationships.
the animal kingdom, i.e. Domain, Kingdom, Phylum,
Class, Order, Family, Genus.
On the web:
taxonomy is frequently used as a basis for organising
information and in this sense is much like Information
Architecture.

Folksonomy/Social Tagging
A

folksonomy is a means of categorisation that uses

keywords to group information.
Flickr

www.flickr.com

Semantic Web
An

emerging concept in the area of metadata that will

strongly influence the future of the internet, is that of
the Semantic Web.
An

ontology is a concept that links taxonomies

together by establishing relationships between the
elements within them.
Amazon.com

Amazon.com

is an instance of a Transactional website.

Transactional sites (along with Dynamic and Basic sites) are
members of a taxonomy called Types of Website.
Amazon.com

also resides on the World Wide Web. The

World Wide Web (along with email, FTP, Gopher, etc.)
belongs to a taxonomy called Internet Services.

Web Site Testing!

What is Website Testing?

What is the purpose of doing the
testing?

Website Testing:
Process for evaluating the
conformance of a site to
an agreed set of
guidelines
Purpose: to ensure a
website is capable of
operating to a minimum
acceptable standard in
order to meet the Goals
of the website.

In which phase do we start the testing ?

Website Testing Catalogue

Whose duties is the catalogue?

Development Team
Leader

Website Testing Catalogue

What do you think it should include?

Website Testing Catalogue

Website Testing Catalogue

The Final test after making sure all test are

done is :

Signing Off Successful

Website Testing
Which includes:
-Show Stoppers versus Nice to Change
-Ongoing Assessment

Thank you!!!