VCE IT Theory Slideshows By Mark Kelly [email protected] Vceit.com Types of websites.
Website Development Process. Introduction A. Types of websites B. Web development team.
-
Upload
amie-casey -
Category
Documents
-
view
226 -
download
1
Transcript of Website Development Process. Introduction A. Types of websites B. Web development team.
![Page 1: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/1.jpg)
Website Development Process
![Page 2: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/2.jpg)
Introduction
A. Types of websites
B. Web development team
![Page 3: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/3.jpg)
Types of websites
A. Static pages
B. Dynamic pages
C. Web content management
![Page 4: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/4.jpg)
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
![Page 5: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/5.jpg)
Static pages
Simple
Secure
Less prone to technology errors
Easily visible by search engines
![Page 6: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/6.jpg)
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)
![Page 7: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/7.jpg)
Dynamic web pages
Flexibility
Requires rapid high-end web server
Much less visible to search engines than static pages
![Page 8: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/8.jpg)
Web content management
Most large corporate, enterprise, and university sites
Enables non-technical content contributors to update and create new web pages
![Page 9: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/9.jpg)
Web content management
Use a database to store web content
Use templates to provide a consistent user interface
![Page 10: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/10.jpg)
Blog
Simple CMS
Popular, inexpensive, widespread
Easy publication of text, graphics, multimedia content
![Page 11: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/11.jpg)
Blog
Built in tools to enable readers to post comments
Built in features such as calendars
![Page 12: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/12.jpg)
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
![Page 13: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/13.jpg)
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
![Page 14: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/14.jpg)
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.
![Page 15: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/15.jpg)
General advice
III Small is good
Stay small and focused.
Large websites are expensive to maintain.
![Page 16: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/16.jpg)
Website Development Process
![Page 17: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/17.jpg)
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
![Page 18: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/18.jpg)
1. Site Definition and Planning
A. Mission statement
B. Competitive Analysis
C. Audience Profile
![Page 19: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/19.jpg)
1. Site Definition and Planning
A. Mission statement
1. Define purpose/goals To buy and sell something To entertain To educate To inform
![Page 20: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/20.jpg)
1. Site Definition and Planning
2. Define scope
• Serves as a useful prioritizer and simplifier when the project is growing complex
• Prevents scope creeping
![Page 21: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/21.jpg)
1. Site Definition and Planning
B. Analyze competitors’ websites
Extrapolate techniques: approaches, functionality, usability, and accessibility
Search engine visibility
Promotional techniques
![Page 22: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/22.jpg)
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
![Page 23: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/23.jpg)
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?
![Page 24: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/24.jpg)
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
![Page 25: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/25.jpg)
1. Site Definition and Planning
Need to form relationship with customers
Promotion planning
Search engine strategy: keyword and key phrase is developed here.
![Page 26: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/26.jpg)
Content & layout will
largely
depend
on the
target audience
![Page 27: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/27.jpg)
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
![Page 28: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/28.jpg)
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
![Page 29: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/29.jpg)
2. Information Architecture
A. Inventory your content
B. Establish a hierarchical outline of content
C. Chunking
D. Site map
E. Wireframe
![Page 30: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/30.jpg)
2. Information Architecture
A. Inventory your content
Assess the content you need to achieve your goals
![Page 31: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/31.jpg)
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?
![Page 32: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/32.jpg)
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
![Page 33: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/33.jpg)
2. Information Architecture
Web content inventories of existing sites take form of spreadsheet with multiple worksheets
![Page 34: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/34.jpg)
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
![Page 35: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/35.jpg)
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
![Page 36: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/36.jpg)
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
![Page 37: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/37.jpg)
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
![Page 38: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/38.jpg)
2. Information Architecture
C. Chunking
Let the nature of the content suggest how it should be subdivided and organized.
![Page 39: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/39.jpg)
2. Information Architecture
You need to divide your content into Topics
![Page 40: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/40.jpg)
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)
![Page 41: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/41.jpg)
2. Information Architecture
Find examples of sites:
Divide content into topics based on Time and sequence Task People Type of information Questions people ask
![Page 42: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/42.jpg)
2. Information ArchitectureNavigation workshopReadBuild your site up from the content (pg 50)
Online card sorting
![Page 43: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/43.jpg)
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
![Page 44: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/44.jpg)
2. Information Architecture
D. Site map
Site diagrams visualize the developing information hierarchy
Help communicate the concepts to the team
![Page 45: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/45.jpg)
2. Information Architecture
D. Sitemap
![Page 46: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/46.jpg)
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
![Page 47: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/47.jpg)
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
![Page 48: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/48.jpg)
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
![Page 49: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/49.jpg)
2. Information Architecture
C. Wireframe
![Page 50: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/50.jpg)
2. Information Architecture
E. Wireframes
Eventually be used by graphic and interface designers to create preliminary and final page designs for the site
![Page 51: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/51.jpg)
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.
![Page 52: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/52.jpg)
2. Information Architecture
E. Wireframe
![Page 53: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/53.jpg)
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
![Page 54: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/54.jpg)
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
![Page 55: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/55.jpg)
2. Information Architecture
E. Wireframe
Sample
Sketch
![Page 56: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/56.jpg)
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
![Page 57: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/57.jpg)
2. Information Architecture
Where to put things, and why
Handout
![Page 58: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/58.jpg)
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
![Page 59: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/59.jpg)
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)
![Page 60: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/60.jpg)
3. Site DesignDesign Critiques
Look at successful models of websites from the user perspective.
See what works and what does not
![Page 61: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/61.jpg)
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
![Page 62: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/62.jpg)
3. Site Design Interface
Interface design
How the user interacts with the site
Methods Used: Metaphors Images Text
![Page 63: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/63.jpg)
3. Site Design Interface
Must suit target audience
Simple
Consistent
![Page 64: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/64.jpg)
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.
![Page 65: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/65.jpg)
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”.
![Page 66: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/66.jpg)
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?
![Page 67: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/67.jpg)
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
![Page 68: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/68.jpg)
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
![Page 69: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/69.jpg)
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
![Page 70: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/70.jpg)
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.
![Page 71: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/71.jpg)
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.
![Page 72: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/72.jpg)
3. Site Design Interface
![Page 73: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/73.jpg)
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.
![Page 74: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/74.jpg)
3. Site Design Interface
No matter how big your site is, users only see one page at a time.
![Page 75: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/75.jpg)
3. Site Design Interface
Even the view of individual web pages is restricted for many users.
![Page 76: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/76.jpg)
3. Site Design Interface
Web pages need to give the user explicit cues to the context and organization of the site.
![Page 77: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/77.jpg)
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.
![Page 78: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/78.jpg)
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
![Page 79: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/79.jpg)
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.
![Page 80: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/80.jpg)
3. Site Design Interface
Main interface problem
lack of any sense of where you are within the local organization of information.
![Page 81: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/81.jpg)
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.
![Page 82: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/82.jpg)
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.
![Page 83: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/83.jpg)
… 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
![Page 84: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/84.jpg)
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.
![Page 85: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/85.jpg)
… 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.
![Page 86: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/86.jpg)
… 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.
![Page 87: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/87.jpg)
… Interface Design
4. Simplicity and consistency
Let your content shine, and let the interface recede.
The best information designs are never noticed.
![Page 88: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/88.jpg)
… 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.
![Page 89: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/89.jpg)
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.
![Page 90: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/90.jpg)
3. Site Design Interface
6. Feedback
Feedback also means being prepared to respond to your users’ inquiries and comments.
![Page 91: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/91.jpg)
3. Site Design Interface
7. Bandwidth Considerations
Research shows that the threshold for frustration is about 10 seconds
![Page 92: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/92.jpg)
3. Site Design Interface
Every web page needs:
An informative title
The creator’s identity
A creation or revision date
![Page 93: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/93.jpg)
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
![Page 94: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/94.jpg)
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
![Page 95: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/95.jpg)
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.
![Page 96: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/96.jpg)
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.
![Page 97: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/97.jpg)
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
![Page 98: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/98.jpg)
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
![Page 99: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/99.jpg)
3. Site Design
Universal usability
a. Equitable use
b. Flexibility in use
c. Simple and intuitive to use
d. Perceptible information
![Page 100: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/100.jpg)
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
![Page 101: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/101.jpg)
3. Site Design Page
![Page 102: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/102.jpg)
3. Site Design Page
Visual Design Consistency Contrast Whitespace Style Simplicity
![Page 103: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/103.jpg)
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
![Page 104: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/104.jpg)
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
![Page 105: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/105.jpg)
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
![Page 106: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/106.jpg)
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
![Page 107: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/107.jpg)
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
![Page 108: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/108.jpg)
A. Conduct basic technical tests
Check Validation
XHTML
http://www.sitepoint.com/launch/htmlforum
CSS
http://www.sitepoint.com/launch/cssforum
![Page 109: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/109.jpg)
A. Conduct basic technical tests
Check Accessibility
http://www.contentquality.com/
![Page 110: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/110.jpg)
A. Conduct basic technical tests
Check browser compatibility (preview in browsers)
Find & fix problems
![Page 111: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/111.jpg)
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
![Page 112: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/112.jpg)
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
![Page 113: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/113.jpg)
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
![Page 114: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/114.jpg)
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
![Page 115: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/115.jpg)
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
![Page 116: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/116.jpg)
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.
![Page 117: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/117.jpg)
B. Conduct basic usability tests
Accessibility tests measure how well users with visual, auditory, motor and other impairments can access the site.
![Page 118: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/118.jpg)
C. Collect site feedback
Gather feedback informally, by interviewing the client and asking questions, or formally through the use of a survey.
![Page 119: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/119.jpg)
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.
![Page 120: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/120.jpg)
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
![Page 121: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/121.jpg)
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
![Page 122: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/122.jpg)
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/
![Page 123: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/123.jpg)
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.
![Page 124: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/124.jpg)
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
![Page 125: Website Development Process. Introduction A. Types of websites B. Web development team.](https://reader035.fdocuments.net/reader035/viewer/2022062314/56649dd55503460f94acd13a/html5/thumbnails/125.jpg)
Site Promotion
Read
37 ways to market your website