web development process - updated!
DESCRIPTION
An updated presentation to showcase Whytespace's professional team and our finely tuned website design and development process. Tuesday, June 28, 2011TRANSCRIPT
![Page 1: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/1.jpg)
Travis Whyte
Whytespace Ltd.
![Page 2: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/2.jpg)
Presentation Outline
I. Whytespace, an IntroductionII. Our Web Design & Development Process
![Page 3: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/3.jpg)
I. Whytespace, an Introduction
The evolution of a local web design & development company
![Page 4: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/4.jpg)
History of Whytespace
Travis Whyte:• 1999 B.Sc. Chemistry (Physics/Astronomy)
Kings University College• Built my final research project as a website
• 2001 M.Ed. Instructional TechnologiesUniversity of Alberta
• Researched effective web design• Learned about process development
![Page 5: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/5.jpg)
History of Whytespace
• Educational Media Technologies 2001 – 2004 Sole Proprietor
• Canadian Space Agency• Canadian Astronomical Society• LearnAlberta.ca (Gov. Alberta)• Small web projects on the side
• New Media Solutions 2004 – 2005 Partnered with a Comp. Sci. grad
• Needed developer experience• Started building & hosting websites
![Page 6: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/6.jpg)
History of Whytespace
• April 2005 Partnership Dissolved• Reinventing the wheel, not servicing clients• Financial instability• Conflicting visions• Separation of clients and Code
• July 2005 Incorporated Whytespace Ltd.• Travis & Sarah Whyte• Old clients, New vision• How do we create a Great Company?
Powered by:www.whytespace.ca
![Page 7: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/7.jpg)
Whytespace’s Hedgehog
Best at:Teams & Processes
Economic:Website
Development &Hosting
Passion:Client-Focused
Customer Service
Dynamic Portal Websites
Dynamic Portal Websitesare websites custom designed and built on a Content Management System (CMS) framework that allows us to pass control of the website to our clients.
![Page 8: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/8.jpg)
Assembling a Team
• Employees– Travis President & PM
– Sarah Director of Design
– Jordan Lead Developer
– James Junior Developer
– Joel Graphic Artist
– Angie Graphic Artist
– Carla Bookkeeper
• Contractors– Bubble Up Marketing– Solid Technology Solutions– E-Commerce Developer– Flash Developer
• Getting people in the right seats
![Page 9: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/9.jpg)
2. Website Design & Development Processes
Process Outlined
![Page 10: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/10.jpg)
Whytespace Web Development Process
1. Environmental Scan2. Content3. Design & Development4. Assembly5. Testing & Pre-Launch6. Launch Day & Follow-Up
![Page 11: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/11.jpg)
Whytespace Web Development Process
1. Environmental Scan– Website consulting– Orientation to the client– Business analysis– Estimate & Quote– Proposal preparation
![Page 12: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/12.jpg)
1. Environmental Scan
a. Domain name– .ca vs .com– Business name, acronym, or other
b. Marketing materials– Logos, brochures, graphics, business plan
c. Industry– Competitors, partners, organizations
d. Website goals– Short term, long term
e. Need email?– Number of accounts, groupware
![Page 13: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/13.jpg)
1. Environmental Scan
f. Type of website?– Static site (developer develops and developer required for all updates)
• Splash page• Brochure site• Hosting anywhere (Whytespace, TELUS, Shaw, etc.)
– Portal site (developer develops and client does updates themselves)
• Content Management System (CMS)– Easily control content– One-time management
• Interaction (do something)– Modules
» Forums, blogs, feedback, gallery, e-com
• Whytespace hosting only
![Page 14: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/14.jpg)
Whytespace Web Development Process
2. Content– Who’s responsibility is it?– Organization, information architecture– Content & Design closely related• Content should be considered preliminary• Design the content
![Page 15: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/15.jpg)
2. Content
a. Writing– Consulting with client– Client research and writing
b. Organization– Topics, sections and pages– Entry points– Flow & Leading and guiding
c. Sitemap– Later helps the developer
![Page 16: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/16.jpg)
Whytespace Web Development Process
3. Design & Development (Programming)– Let the professionals do the work – Designers work directly with the clients• No miss-communications
– Designers in close contact with Developers
![Page 17: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/17.jpg)
3. Design & Development
3a. Design– Graphics Research (stock photos, new pictures)– Design Samples– Layout– White-space, how much text– Design Comp (comprehensive layout)
![Page 18: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/18.jpg)
Side Bar: Tien Lung
A lesson in patience & perseverance
![Page 19: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/19.jpg)
![Page 20: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/20.jpg)
![Page 21: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/21.jpg)
![Page 22: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/22.jpg)
![Page 23: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/23.jpg)
![Page 24: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/24.jpg)
3. Design & Development
3b. Development– Source code installed– Website setup and configured– Blank pages created– Modules installed & configured– Website skeleton – Alpha– Custom development
![Page 25: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/25.jpg)
Whytespace Web Development Process
4. Assembly– Design and Development comes together• Designing the content
– Close interaction with clients– New content added– Custom modules configured
![Page 26: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/26.jpg)
4. Assembly
a. Website skin (template)– Bring comps alive
b. Content migration & new content insertion– Important to have approved content
c. Graphics to complement content– Stock photos & client photos
d. Page linking and organization– Visitor flow
e. Culminates with Beta Launch
![Page 27: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/27.jpg)
Whytespace Web Development Process
5. Testing & Pre-Launch– Starts with Beta launch – Testing is important– Specific & Structured feedback is helpful
http://browsershots.org/
![Page 28: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/28.jpg)
5. Testing & Launch
a. Beta-launch– Testing and feedback
b. Presentation– Website is made available via temp web address– Email feedback and changes
c. Training– Introduction to CMS, modules
– Website user guide, client does updates themselves
d. Live Launch – Google Analytics installed– Website connected to the domain (DNS)– Website submitted to search engines (Web Master Tools)
e. Email configured
![Page 29: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/29.jpg)
Whytespace Web Development Process
6. Launch Day & Follow-Up– Important to finish strong– Initial support is key– Long-term relationship are formed– Friday launch days
![Page 30: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/30.jpg)
6. Launch Day & Follow-Up
a. Day of the launch– Sign-Off email & Invoice
b. One Week later– Email check-in– Site analytics (Google, other)• Page popularity, entry points, user flow, bandwidth
c. Two to Six Months later– Review analytics– Site growth plan– Referral to SEO company
![Page 31: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/31.jpg)
II. Website Design & Development Process
Flow Chart, for the visual learner
![Page 32: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/32.jpg)
![Page 33: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/33.jpg)
![Page 34: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/34.jpg)
![Page 35: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/35.jpg)
![Page 36: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/36.jpg)
![Page 37: Web Development Process - updated!](https://reader035.vdocument.in/reader035/viewer/2022070302/547a57a35806b571048b4812/html5/thumbnails/37.jpg)
Whytespace Ltd.
Find us Onlinewww.whytespace.cawww.twitter.com/whytespace