Web Site Development

1
Web Site Development

• The Process

2
Development Options

• Make (Create In-house)
• More Control
• Buy (Acquire from Software Vendor)
• Lower Overall Cost
• Higher Quality
• Faster Implementation
• Less Staff Required

3
Process

• Project Definition
• Site Structure
• Visual Design
• Site Development
• Testing
• Launch

4
Project Definition

• Conduct Client Survey Interview
• Purpose of Project
• Launch a Business Presence
• Selling Goods or Services
• Increase Brand Recognition
• Product Information
• Provide Operational Instructions
• Employment

5
Project Definition

• Conduct Client Survey Interview
• Target Audience
• Demographics
• Age
• Gender
• Education
• Financial
• Geographic

6
Project Definition

• Conduct Client Survey Interview
• Branding/Perception Goals
• Signifies Goods/Services
• Name
• Slogan
• Logo
• Color Scheme

7
Project Definition

• Conduct Client Survey Interview
• Content Source
• Initial Technical Specs
• Web Benchmarking
• Competition
• Paradigm Shifts
• Other Sites that Your Users Frequent
• Offer Comparable Features / Capabilities
• Communication Strategy

8
Project Definition

• Write Project Brief
• Derived from Client Survey
• Your Understanding Of
• Project Goals
• Audience Profile
• Audience Perception
• Primary Message
• Competitive Advantage

9
Project Definition

• Develop Persona(s)
• Derived from Client Survey
• Create Imaginary Audience Member
• Photo, Name, Quote, Description
• Demographics
• Technical Profile
• Top Three User Goals
• Top Three Business Objectives

10
Project Definition

• Write Technical Specifications
• Establish Requirements
• Screen Resolution
• Browser Compatibility
• Download Time
• Web Standards
• Accessibility

11
Project Definition

• Develop Project Plan/Timeline
• For Each Phase of Project
• Establish Timeline for Deliverables
• Establish Timeline for Tasks
• Assign Due Dates
• Assign Resources

12
Project Definition

• Document Maintenance Considerations
• Develop Web Site Maintenance Plan
• Document How Site Will Be Regularly
• Reviewed
• Updated
• Set Clear Expectations Regarding Support
  Maintenance

13
Site Structure

• Content Outline
• Create List of Existing Content
• Brainstorm Content that Needs to be Added
• Trim Anything that Does Not Match Goals
• Group Content Into Categories
• Card Sort
• Create Outline of Content
• Review with Clients for Accuracy

14
Site Structure

• Site Diagram
• AKA Sitemap, Flowchart
• Visual Representation of Content Outline Site
  Structure

15
Site Structure

• Page Description Diagram (PDD)
• Display Content that Belongs on Page
• Display Priority of Each Piece of Content
• Use Horizontal Axis for Priority
• First Column Lists High Priority Content
• Second Column Lists Medium Priority Content
• Third Column Lists Low Priority Content

16
Site Structure

• Wireframe
• Layout of Web Page
• Depict Containers for All Major Page Elements
  Functionality
• Navigation
• Images
• Content
• Functional Elements (e.g., Search)
• Footer
• Created for Home Page
• Each Unique Second Level Page
• Any Other Significantly Different Page On Site

17
Visual Design

• Review
• Project Brief
• Sitemap
• Wireframes
• Brainstorm Design Solutions
• Branding Guidelines
• Technical Requirements for Screen Resolution
• Browser Compatibility
• Download Time
• Web Standards
• Accessibility

18
Visual Design

• Implement Design Principles
• Balance
• Rhythm
• Proportion
• Dominance
• Use Design Elements
• Point / Line
• Shape
• Color
• Typography
• Usability

19
Visual Design

• Deliverables
• 1st Draft for Home Page One Sub-page
• Client Provides Feedback on Designs
• 2nd Draft for Home Page One Sub-page
• Client Selects Design Provides Feedback
• 3rd Draft for Home Page All Unique Sub-pages
• Client Provides Feedback on Design
• Final Designs for Home Page All Unique
  Sub-pages
• Client Approval of Final Design

20
Site Development

• Technical Plan
• Targets Designed For or Supported
• Browsers
• Operating Systems
• Display Resolution
• Connection Speed
• Page Download Size
• 30K and Under
• 30-80K (Typical)
• 80-100K (Heavy)
• 100K (Requires Broadband)

21
Site Development

• Functional Plan
• HTML
• DHTML (Dynamic HTML)
• Interactivity
• JavaScript, CSS
• XHTML (Extensible HTML)
• Includes Features of HTML XML
• XML (Extensible Markup Language)
• Elements Describe Data Passed to Client
• Ties Database Data to Web Pages
• Client, Rather Than Server, Processes Data

22
Site Development

• Functional Plan
• WML (Wireless Markup Language)
• Design Pages Specifically for Wireless Devices
• Uses WAP (Wireless Application Protocol)
• AJAX (Asynchronous JavaScript and XML)
• Create Interactive Web Applications
• Designed To Provide Immediate Response
• Google Maps
• PHP (PHP Hypertext Preprocessor)
• Server-side Database Access

23
Site Development

• Functional Plan
• Java
• Create Web Applications
• CGI (Common Gateway Interface)
• Defines how Server Communicates with Clients
• CGI Script
• Perl (Practical Extraction and Report Language)
• Web Design Software
• Create Web Pages Without Programming
• Generates HTML / Some JavaScript
• Dreamweaver, Expression Web

24
Site Development

• Functional Plan
• Rich Media
• Audio / Video
• Search
• Secure Credit Card Transactions
• Backend Technologies
• Database, CMS, Personalization, Login
• Web Analytics

25
Site Development

• Project Plan
• Timeline
• Tasks
• Dependencies
• Responsibilities
• Target Dates with Deliverables
• Build Site

26
Testing

• Quality Assurance Lead
• Create Realistic QA Plan
• Manage Testing Process
• Prioritze Issues
• Insure High Priority Issues are Solved
• Conduct Final Review
• Release Site

27
Testing

• QA Testing
• Content
• Accurate, Understandable, Spelling, Grammar
• Conducted by Content Contributors / Content
  Editors
• Links
• Review Site For Linkrot
• Broken Links
• Functionality
• Does Site Perform Functions Defined in Project
  Definition

28
Testing

• QA Testing
• Validity
• Validate HTML / XHTML / CSS
• Accessibility
• Section 508 Tests
• Browser / OS / Resolution
• Test Site on Target Browsers
• Connection Speed
• Get Analysis Recommendations On Page Speed/Size

29
Testing

• QA Testing
• Usability
• Informal or Formal Testing with Target Audience
• Search Engine Optimization
• Load Testing
• Contact Server Administrator To Discuss
  Techniques
• Security
• Review File Authorizations
• Review Authentication Method
• Conduct Authentication Test

30
Testing

• Prioritize Issues
• Priority 1
• Critical
• Must be Fixed Before Launch
• Priority 2
• Would Enhance The Site, Can Go Live Without It
• Address as Soon as Time Permits
• Priority 3
• Nice Idea / Feature, Future Enhancement
• Will Consider For Future Release

31
Launch

• Style Guide
• Visual Design Standards
• Logos, Colors, Typography (Keep Site on Brand)
• Naming Conventions
• Files, Directories, CSS, Images, Titles
• Site Structure
• Document Site Diagram
• Indicate How Structure is Built to Handle Growth
• Templates
• Provide (X)HTML Templates and CSS
• Indicate Layout, Typography, Size, Color,
  Navigation, Menus

32
Launch

• Minimize Downtime
• Consider Current Web Site Traffic Patterns
• Deploy
• FTP (File Transfer Protocol)
• Everyone on Team is on Call

33
Maintenance

• Decide What Content Needs Updating
• Determine Frequency
• Day, Week, Month, Quarter, Annual
• Who Maintains Site Content
• Who are Content Contributors
• How Will Site be Updated

34
Maintenance

• Collect Statistics
• Number of Visitors
• Pages Viewed
• Views Per Visit
• Duration
• Popularity
• Elicit Feedback from Visitors
• ROI