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 visitor’s 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 branchesShows 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.

PresentationThe appearance of web content controlled usin

g presentation language.

InteractivityControlled 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 t

o 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 Lan

guage)

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 CompatibilityBrowser 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 BrowsersIt 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 BrowsersA 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 WarsMicrosoft, Netscape

Mozilla Firefox

The 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 BrowsingMobile 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 ResolutionLiquid 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 InitiativeEnsuring 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 [double–A] or Priority Two

• Level AAA [triple–A] or Priority Three.

WCAG 2.0Content 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 SetA 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:

TaxonomyA 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 TaggingA folksonomy is a means of categorisation that uses keywords to group information.

Flickr

www.flickr.com

Semantic WebAn 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!!!