Introduction
A.
Types of websites
B.
Web development team

Types of websites
A.
Static pages
B.
Dynamic pages
C.
Web content management

Static pages
 Content or layout changes only when a web author manually updates them
 Vast majority of web sites use static pages
 Highly cost-effective for publishing information that doesn’t change substantially

Static pages
 Simple
 Secure
 Less prone to technology errors
 Easily visible by search engines

Dynamic web pages
 Adapt their content or appearance depending on the user’s interactions
 Can use client-side scripting techniques
(XML, Ajax, Actionscript)
 Most content is assembled on the web server using server-side scripting language (PHP,
ASP, Perl)

Dynamic web pages
 Flexibility
 Requires rapid high-end web server
 Much less visible to search engines than static pages

Web content management
 Most large corporate, enterprise, and university sites
 Enables non-technical content contributors to update and create new web pages

Web content management
 Use a database to store web content
 Use templates to provide a consistent user interface

Blog
 Simple CMS
 Popular, inexpensive, widespread
 Easy publication of text, graphics, multimedia content

Blog
 Built in tools to enable readers to post comments
 Built in features such as calendars

Website Development Team
Core skill sets needed in team
 Strategy and planning
 Project management
 Information Architecture & user interface design
 Graphic design
 Web technology
 Site production

General advice
I Ready, aim, fire
Make pages only when you have all the important answers in place to guide the rest of the design process
Goals
Audience

General advice
II Stay away from visual design until everything else is planned
Visual form of your site should flow from careful and informed decisions about site structure, navigation, content requirements, and overall business goals.

General advice
III Small is good
Stay small and focused.
Large websites are expensive to maintain.

The Website Development
Process
1.
4.
5.
2.
3.
6.
Site definition and planning
Information architecture
Site design
Site construction
Site marketing
Tracking, evaluation and maintenance

1. Site Definition and Planning
A.
Mission statement
B.
Competitive Analysis
C.
Audience Profile

1. Site Definition and Planning
A. Mission statement
1. Define purpose/goals
 To buy and sell something
 To entertain
 To educate
 To inform

1. Site Definition and Planning
2. Define scope
• Serves as a useful prioritizer and simplifier when the project is growing complex
• Prevents scope creeping

1. Site Definition and Planning
B. Analyze competitors’ websites
 Extrapolate techniques: approaches, functionality, usability, and accessibility
 Search engine visibility
 Promotional techniques

1. Site Definition and Planning
C. Define the target audience
 who are the potential site visitors
 skills and needs
 market segmentation
If you know your audience, you have a better chance of success

1. Site Definition and Planning
 Who is your product or service aimed at?
 Is this target group online? If so, how literate are they?
 Will your audience be different in an online environment?

1. Site Definition and Planning
 Role play: User/task analysis. Use cases.
 Have a set of requirements, and have real people in a real situation.
 Produce design and functionality specification for project

1. Site Definition and Planning
 Need to form relationship with customers
 Promotion planning
 Search engine strategy: keyword and key phrase is developed here.

will largely depend on the

1. Site Definition and Planning
 Read Letting Go of the Words, Chapter 2
 Write a brief explanation of the 7 steps to understand your audience

The Website Development
Process
1.
2.
5.
6.
3.
4.
Site definition and planning
Information architecture
Site design
Site construction
Site marketing
Tracking, evaluation and maintenance

2. Information Architecture
A.
Inventory your content
B.
Establish a hierarchical outline of content
C.
Chunking
D.
Site map
E.
Wireframe

2. Information Architecture
A.
Inventory your content
Assess the content you need to achieve your goals

2. Information Architecture
Build an inventory of the existing content
 List all the content that you currently have available in your organization
 Include text, images, video clips, and databases
 Note what format they are currently in. Do they need to be converted to web friendly formats.
 Does the text need web editing? Who will do this?

2. Information Architecture
Content wish list
 Based on your target audience, what content to you wish to acquire
 Plan for content which you will need
 Brainstorm for ideas
 Source content
 Text such as articles, recipes, references, help descriptions

2. Information Architecture
Web content inventories of existing sites take form of spreadsheet with multiple worksheets

2. Information Architecture
Each page on the site gets a row with columns listing




Page title
URL
People responsible for content
General type of content
Example

2. Information Architecture
B. Establish a hierarchical outline of content
 Divide the content into logical units
 Establish a hierarchy of importance among units
 Use this to structure relationships among units

2. Information Architecture
C. Chunking
Readers appreciate short chunks of information that can be located and scanned
Short reference documents that are intended to be read nonsequentially

2. Information Architecture
C. Chunking
Discrete chunks of information lend themselves to web links
Chunking can help organize and present information in modular layout that is consistent throughout the site

2. Information Architecture
C. Chunking
Let the nature of the content suggest how it should be subdivided and organized.

2. Information Architecture
You need to divide your content into Topics

2. Information Architecture
Read
1)
2)
Letting people start key tasks immediately
Sending people the right way (pg 41-46)
3)
Breaking up large documents (pg 69-80)

2. Information Architecture
Find examples of sites:






Divide content into topics based on
Time and sequence
Task
People
Type of information
Questions people ask

2. Information Architecture
Navigation workshop
Read
Build your site up from the content (pg 50)
Online card sorting

2. Information Architecture
Navigation workshop
Read
Build your site up from the content (pg 50)
1. Write each topic on a card
2. Organize topics into groups/clusters that seem intuitive and logical
3. Label groups/clusters
4. Go through the steps again
5. Repeat until there is consensus about what organization makes most sense

2. Information Architecture
D. Site map
Site diagrams visualize the developing information hierarchy
Help communicate the concepts to the team

2. Information Architecture
D. Sitemap

2. Information Architecture
D. Sitemap
Site diagrams provide the global overview of the developing web site
Useful when your project moves from planning to web page production

2. Information Architecture
D. Sitemap
First place programmers look to gain an understanding of how the site files should be subdivided into directories (folders) on the server

2. Information Architecture
E. Wireframe
“Rough map”
Rough two-dimensional guides to where the major navigation and content elements of your site might appear on the page

2. Information Architecture
C. Wireframe

2. Information Architecture
E. Wireframes
Eventually be used by graphic and interface designers to create preliminary and final page designs for the site

2. Information Architecture
E. Wireframes
Force teams to stay focused on the information architecture and structural design without getting sidetracked by the distraction of the visual layer.

2. Information Architecture
E. Wireframe

2. Information Architecture
E. Wireframe - standard elements






Organizational logo
Site identity or titles
Page title headlines
Breadcrumb trail navigation
Search form
Links to a larger organization of which you are a part

2. Information Architecture
C. Wireframe - standard elements






Global navigation links for the site
Local content navigation
Primary page content
Mailing address and email information
Copyright statements
Contact information

2. Information Architecture
E. Wireframe
Sample
Sketch

2. Information Architecture
Keep your wireframe diagrams




 simple and unadorned avoid distinctive typography use a single generic font use gray tones if you must to distinguish functional areas avoid color or pictures
 usually only graphic that appears is the organization logo

2. Information Architecture
Where to put things, and why
Handout

The Website Development
Process
1.
2.
3.
4.
5.
6.
Site definition and planning
Information architecture
Site design
Site construction
Site marketing
Tracking, evaluation and maintenance

Website Design Involves
How the user interacts with the site
Designing the appearance/style of the ‘pages’ of the site
Balancing elements (text, graphics)

3. Site Design
Design Critiques
Look at successful models of websites from the user perspective.
See what works and what does not

3. Site Design
Every site will consist of a number of linked pages.
The differences will be:
 Number of pages (breath and scope)


How they are linked (navigation system)
How easy or difficult to use and get around

3. Site Design
Interface
Interface design
How the user interacts with the site
Methods Used:



Metaphors
Images
Text

3. Site Design
Interface
 Must suit target audience
 Simple
 Consistent

3. Site Design
Interface
“Wayfinding” describe concept of environmental legibility that is, the elements of the built environment that allow us to navigate successfully through complex spaces like cities and towns.

3. Site Design
Interface
The most fundamental underlying metaphor of the World Wide Web is navigation through a space populated by places we call web
“sites”.

3. Site Design
Interface
Wayfinding has four core components:
1.
2.
3.
4.
Orientation: Where am I am right now?
Route decisions: Can I find the way to where I want to go?
Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
Closure: Can I recognize that I have arrived in the right place?

3. Site Design
Interface
1.
Most people’s maps were populated by five types of elements:
Paths: Familiar streets, walkways, subway routes, bus lines
2.
Edges: The physical barriers of walls, fences, rivers, or shorelines

3. Site Design
Interface
3. Districts: Places with a distinct identity, such as, in
New York, Chinatown, Wall Street, and Greenwich
Village
4. Nodes: Major intersection or meeting places, such as the clock in New York’s Grand Central Terminal
5. Landmarks: Tall, visible structures that allow you to orient over long distances

3. Site Design
Interface
Principles for wayfinding in web sites
1.
Paths: Create consistent, well-marked navigation paths
2.
3.
4.
Regions: Create a unique but related identity for each site region
Nodes: Don’t confuse the user with too many choices on home and major menu pages
Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented

3. Site Design
Interface
Readers need a sense of context of their place within an organization of information.
Electronic documents provide none of the physical cues we take for granted in assessing information.

3. Site Design
Interface
Your home page is not the only gateway to your site.
Search engine users increasingly arrive at a site on internal content pages, not the home page.

3. Site Design
Interface

3. Site Design
Interface
Browse versus search
User interface research shows that about half of web users prefer to browse through menu lists of links to find information, and the other half will go straight to the search box to enter keywords for search.

3. Site Design
Interface
No matter how big your site is, users only see one page at a time.

3. Site Design
Interface
Even the view of individual web pages is restricted for many users.

3. Site Design
Interface
Web pages need to give the user explicit cues to the context and organization of the site.

3. Site Design
Interface




Site graphics
Page titles
Breadcrumb trails
Navigation links can supply the cues that allow users to establish their “you are here” location within the site.

3. Site Design
Interface
1.
2.
3.
4.
5.
6.
7.
Clear navigation aids
No dead-end pages
Direct access
Simplicity and consistency
Design integrity and stability
Feedback
Bandwidth

3. Site Design
Interface
1. Clear Navigational Aids a.
Users should always be able to return easily to your home page and to other major navigation points in the site. b.
c.
Basic links should be present and in consistent locations on every page.
Headers provide basic navigation links and create an identity that tells users they are within the site domain.

3. Site Design
Interface
Main interface problem lack of any sense of where you are within the local organization of information.

3. Site Design
Interface
 Clear consistent icons



Graphic identity schemes
Page titles
Headings can give users confidence that they can find what they are seeking without wasting time.

3. Site Design
Interface
2. No dead end pages
Make sure all pages in your site have at minimum a link back to the home page or, better yet, a home page link along with links to other main sections of the site.

… Interface Design
3. Direct access
Define an efficient hierarchy of information


This allows users to access what they want quickly
Minimize the steps needed to reach it the information

3. Site Design
Interface
The goal is to be consistent and predictable; your users should feel comfortable exploring your site and confident that they can find what they need.

… Interface Design
Your interface metaphors should be simple, familiar, and logical —if you need a metaphor for collections of information, choose something familiar, such as file folders.

… Interface Design
4. Simplicity and consistency
Unusual or peculiar “creative” navigation and home page metaphors always fail because they impose an unfamiliar, unpredictable interface burden on the user.

… Interface Design
4 . Simplicity and consistency
Let your content shine, and let the interface recede.
The best information designs are never noticed.

… Interface Design
A consistent approach to the



 layout of titles subtitles page footers/headers navigation links to your home page or related pages will reinforce the user’s sense of context within the site.

3. Site Design
Interface
5. Design integrity and stability
A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.

3. Site Design
Interface
6. Feedback
Feedback also means being prepared to respond to your users’ inquiries and comments.

3. Site Design
Interface
7. Bandwidth Considerations
Research shows that the threshold for frustration is about 10 seconds

3. Site Design
Interface
Every web page needs:
 An informative title

The creator’s identity
 A creation or revision date

3. Site Design
Interface
Every web page needs:
 A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights
 At least one link to a local home page or menu page, in a consistent location on all pages
 The home page url

3. Site Design
Interface
Most web pages should also incorporate these additional elements:
 An organization logo or name near the upper left corner, with a link back to your home page
 Navigation links to other major sections of your site
 At least one heading to identify and clarify the page content
 Mailing address and contact information or a link to this information

Alternate (“alt”) text identifying any graphics on the page

3. Site Design
Interface
Include these basic information elements and you will have traveled 90 percent of the way toward providing your users with an understandable web user interface.

3. Site Design
Interface
Read handout
Page Structure & Site Design
Briefly explain with the aid of a diagram what should be each of the following areas: header content footer
Make sure you have placed all relevant in your wireframe.

Site Design
 Organising information
 Organising site content. Each page in your site needs to be placed in a structure chart or storyboard
 Designing the Navigation Structure


Textual v graphical
Consistent placement and colour of links
 Global, local and document navigation

Organising Information
 Organising content
 We can learn from the organisation of printed material ie books, magazines and periodicals and their conventions:
 Chapters, tables of contents, page numbering, footnotes, indexes etc
 Web documents will evolve and develop their own conventions in time

3. Site Design
Universal usability a.
Equitable use b.
c.
d.
Flexibility in use
Simple and intuitive to use
Perceptible information

3. Site Design
Page
Page design
Design grids - Good design depends on creating a hierarchy of contrast and viewer attention, so that a few focal areas of the page become entry points and the other page materials are clearly secondary

3. Site Design
Page

3. Site Design
Page
Visual Design
 Consistency




Contrast
Whitespace
Style
Simplicity

The Website Development
Process
3.
4.
1.
2.
5.
6.
Site definition and planning
Information architecture
Site design
Site construction
Site marketing

3. Evaluating and maintaining a site
A.
Conduct basic technical tests
B.
Conduct basic usability tests
C.
Collect site feedback
D.
Present web pages to others (team and clients) for feedback and evaluation

3. Evaluating and maintaining a site
A.
B.
Conduct basic usability tests
C.
Collect site feedback
D.
Present web pages to others (team and clients) for feedback and evaluation

A. C onduct basic technical tests
Check
 spelling
 links http://validator.w3.org/checklink
[broken & orphaned links
(files with no links to them)]
Find & fix problems

A. C onduct basic technical tests
Check
 Validation
 XHTML
Check markup to see if it conforms to the rules of the Doctype http://validator.w3.org
 CSS http://jigsaw.w3.org/css-validator/
Point out problem & provide an explanation
Only checks one page at a time

A. C onduct basic technical tests
Check
 Validation
 XHTML http://www.sitepoint.com/launch/htmlforum
 CSS http://www.sitepoint.com/launch/cssforum

A. C onduct basic technical tests
Check
 Accessibility http://www.contentquality.com/

A. C onduct basic technical tests
Check
 browser compatibility (preview in browsers)
Find & fix problems

3. Evaluating and maintaining a site
A.
Conduct basic technical tests
B.
C.
Collect site feedback
D.
Present web pages to others (team and clients) for feedback and evaluation

B. C onduct basic usability tests
Usability testing is conducted to measure how well users interact with the site.



It tells whether users can
Find information
Navigate the site
Utilize its features without difficulty

B. C onduct basic usability tests
The user is given a series of tasks, such as find some information that is known to be on the site, and observe how quickly they perform the task.
 One-to-one with an observer and individual user

Recording a user’s activities with software or a camera

B. C
Note how easily and quickly user completes each task
Record users reaction to the site architecture, navigation and page elements

B. C
Testing is conducted in rounds, with just a few users per round
After a round of testing, a review is conducted by the design team, changes made to the site, and a subsequent round of testing is conducted

B. C
After a few rounds, the main issues that prevent users from accessing the site have usually been identified and resolved, and the site is ready for publication.

B. C
Accessibility tests measure how well users with visual, auditory, motor and other impairments can access the site.

C. C
Gather feedback informally, by interviewing the client and asking questions, or formally through the use of a survey.

When your site is close to completion and technical errors have been resolved, you may wish to present it to the client and others outside of the project team and gather feedback.

The Website Development
Process
3.
4.
1.
2.
5.
6.
Site definition and planning
Information architecture
Site design
Site construction
Site evaluation and maintenance

Site Promotion
1. Submit your website to search engines
 Link from other sites search engines know about
 Fill in a form on a site http://www.google.com/addurl http://search.msn.com/docs/submit.aspx
http://search.yahoo.com/info/submit.aspx

Site Promotion
2. Register with directories
 Internet directories
Open Directory Project http://dmoz.org/add.html
 Regional directories http://www.delicious.com
http://cubeonlinemarketing.ie/listofirishwebdirector ies/

Site Promotion
2. Register with directories




Vertical directories (related to industry)
Put press releases into classified sites.
Put adds in for your service and link to website.
Link from as many services as possible.
 Look at competitors.

Site Promotion
3. Friends and colleagues
4. Email signatures with site details
5. Add signatures to posts on related forums
6. Link exchange
Swap links with other sites

Site Promotion
Read
37 ways to market your website