IMD09117 and IMD09118 Web Design and Development

Functionality.Style Sheets.

The 5 Planes Model

Last session we looked at Content.

By now we knowwhy we’re bulding our site(site objectives)who we’re building it for (user needs/ accessibility)what we’re going to say (content)

This session we will be looking at Functionality (what we’re going to build).

What is Functionality

Functionality is also known as gathering requirements.

We need to know what we are building.

We also need to know what we’re NOT building.

Requirements

Some requirements are site wide. Branding Supported Browsers

Some requirements are specific to particular areas.

Where do we gather requirements.

Users – ask them what they might want

Stakeholders – Anyone from the client or organisation who has a vested interest in the Website and can affect the outcome.

Stakeholders

When you are designing for outside companies you need the enthusiasm and support of everyone involved.

Find out who has a vested interest in the site and make time to talk with them.

Types of Requirement

Features clients say they want.

Features clients actually want.

Features clients don’t know they want.

Client Education

Ask clients to do their homework ask them to provide certain documents for working with: A printout of 3 sites they would like to be

similar to. A list of features they would like to

incorporate from direct competitors sites. A rough “shopping list” of what they want.

Methods of requirement gathering

InterviewsFocus GroupsSurveysCard SortingPrototyping

Methods

Interviews: A formal, recorded interview with stakeholders and users is invaluable.

Focus Group: 4-12 target users gather and discuss what they would expect from the site.

Methods

SurveysPaperWeb basedemail

Card SortingFeeds into architecture design. List all

requirements onto a cards and ask users to lay them out on a table in logical order.

Prototyping

Paper based or electronic, producing and agreeing on prototypes can help.

Prototypes give a quick visual guide to clients, helping them to understand what they will be getting.

Methods of requirement gathering

InterviewsFocus GroupsSurveysCard SortingPrototyping

Cascading Style Sheets

CSS affords a designer a large degree of flexibility whilst ensuring the site conforms to Web standards as set out by the World Wide Web Consortium.

http://www.w3.org/Style/CSS/

What is CSS?

CSS is a distinct set of files that describe the style of particular elements within a site.

The CSS file sits outside the site and browsers incorporate the information within to dictate the style of each element.

Style and content

Specifically, what CSS does is separate style and content. This ensures that these two aspects can be worked on separately.

CSS also means that we can make changes to an aspect of our site, for example a font or a colour and roll it site wide by simply changing the CSS file.

How do you use CSS?

“Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.”

Taken from http://www.w3.org/Style/CSS/

It may be simple but it is not intuitive. It is beyond the remit of this course to teach expertise in CSS but it is essential that you understand it’s power and what it can be used for.

The only way to become an expert in its use is to practice, there are many free tutorials out there.

What can CSS determine?

FontsColoursBackgroundsPositioning

Positioning

Pre CSS, tables were the most common method of placing items in specific positions on a page.

Although tables are still widely used, they are becoming less fashionable.

Liquid vs fixed layouts.

CSS

CSS is being developed constantly and is currently seen as the future.

To create standards compliant efficient Web sites, CSS is the key.

CSS

Of course in 5 years, it could be something else …