website development process. introduction a. types of websites b. web development team
TRANSCRIPT
Website Development Process
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.
Website Development Process
The Website Development Process
1. Site definition and planning2. Information architecture
3. Site design
4. Site construction
5. Site marketing
6. 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.
Content & layout will
largely
depend
on the
target audience
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. Site definition and planning
2. Information architecture3. Site design
4. Site construction
5. Site marketing
6. 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) Letting people start key tasks immediately
2) 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 ArchitectureNavigation workshopReadBuild your site up from the content (pg 50)
Online card sorting
2. Information ArchitectureNavigation workshopReadBuild 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. Site definition and planning
2. Information architecture
3. Site design4. Site construction
5. Site marketing
6. Tracking, evaluation and maintenance
Website Design Involves
1. Interface DesignHow the user interacts with the site
2. Page DesignDesigning the appearance/style of the ‘pages’ of the site
Balancing elements (text, graphics)
3. Site DesignDesign Critiques
Look at successful models of websites from the user perspective.
See what works and what does not
3. Site DesignEvery 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. Orientation: Where am I am right now?
2. Route decisions: Can I find the way to where I want to go?
3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
4. Closure: Can I recognize that I have arrived in the right place?
3. Site Design Interface
Most people’s maps were populated by five types of elements:
1. 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. Regions: Create a unique but related identity for each site region
3. Nodes: Don’t confuse the user with too many choices on home and major menu pages
4. 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. Clear navigation aids
2. No dead-end pages
3. Direct access
4. Simplicity and consistency
5. Design integrity and stability
6. Feedback
7. Bandwidth
3. Site Design Interface
1. Clear Navigational Aidsa. Users should always be able to return easily to
your home page and to other major navigation points in the site.
b. Basic links should be present and in consistent locations on every page.
c. 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
4. Simplicity and consistency
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
4. Simplicity and consistency
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 handoutPage Structure & Site Design
Briefly explain with the aid of a diagram what should be each of the following areas:
headercontentfooter
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. Flexibility in use
c. Simple and intuitive to use
d. 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
1. Site definition and planning
2. Information architecture
3. Site design
4. Site construction
5. Site evaluation and maintenance6. 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. 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
A. Conduct basic technical tests
Check spelling
links http://validator.w3.org/checklink
[broken & orphaned links (files with no links to them)]
Find & fix problems
A. Conduct basic technical tests
Check Validation
XHTMLCheck markup to see if it conforms to the rules of the Doctypehttp://validator.w3.org
CSShttp://jigsaw.w3.org/css-validator/
Point out problem & provide an explanation
Only checks one page at a time
A. Conduct basic technical tests
Check Validation
XHTML
http://www.sitepoint.com/launch/htmlforum
CSS
http://www.sitepoint.com/launch/cssforum
A. Conduct basic technical tests
Check Accessibility
http://www.contentquality.com/
A. Conduct basic technical tests
Check browser compatibility (preview in browsers)
Find & fix problems
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
B. Conduct 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. Conduct 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. Conduct basic usability tests
Note how easily and quickly user completes each task
Record users reaction to the site architecture, navigation and page elements
B. Conduct basic usability tests
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. Conduct basic usability tests
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. Conduct basic usability tests
Accessibility tests measure how well users with visual, auditory, motor and other impairments can access the site.
C. Collect site feedback
Gather feedback informally, by interviewing the client and asking questions, or formally through the use of a survey.
D. Present web pages to others
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
1. Site definition and planning
2. Information architecture
3. Site design
4. Site construction
5. Site evaluation and maintenance
6. Site promotion
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/listofirishwebdirectories/
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