Post on 25-Dec-2014
description
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Effective Website PlanningToronto WordPress Group @ Podcamp Toronto 2013February 23, 2013
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Introduction• Andy McIlwain (@andymci)
• Sales & Marketing, Kobayashi Online
• Account Management, WordPress Training, Customer Support
• Organizer, Toronto WordPress Group, Toronto WordPress Developers Group, WordCamp TO
• WordPress Advocate, Website Administrator, Web Enthusiast
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
What are we talking about?
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Planning your Website• On the fly? It works sometimes.
• Define in advance for accountability & timeliness.
• Create something tangible to present.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roupStep 1: Mapping
Visualize your plan.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Map it out!• One of the best things taught in elementary school.
• Example: Creating a story. What’s involved?
• Visual aid helps communicate your ideas.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Mapping your Website• Three Things: Design, Features, Content
• Design: What does it look like?
• Features: What can you do on your website?
• Content: What pages, categories, images, videos, etc...?
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Example: A Standard Small Business Site Design
• Clean• Blues & Whites
Features• Forms• Sharing Buttons
Content
• About• Services• Contact• Testimonials• Blog
A (very) generic example of what a small business site might include.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Some tools to help you…• MindMeister.com
• Text2Mindmap.com
• Bubbl.us
• Draw (Google Docs)
• SmartArt (MS Office)
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roupStep 2: Documenting
Tying it all together.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Requirement Documents• Organizes your thoughts.
• Can be followed for guidelines.
• An excellent appendix for larger planning docs.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Example: Website Requirements Document
Description Requirements Comments
Design
Colour Scheme Blues & Whites
Layout MinimalistClear Navigation
Features
Forms Contact FormLead CaptureJob Application
Sharing Buttons TwitterFacebookLinkedInEmail
Content
About Staff Bios
Blog No Comments
A simplified version of what we use at Kobayashi Online.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
A Living Document• Requirement documents are just the starting point.
• Adjust it to serve different needs.
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
E.g. Defining ScopeWhat will and won’t be done?
Feb
ruar
y 23
, 201
3
Description In Scope Out of Scope
Design
Colour Scheme Colours finalized before launch.
Colour changes by administrator.
Layout Navigation can be updated by site admin.
Layouts modified by site visitors.
Features
Forms Can be created by administrator.
Conditional Logic
Sharing Buttons Custom Icons Placement on per-page basis.
Content
About Content provided by HR dept.
Content editing by web designer.
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
E.g. Setting DeadlinesWhen will things be completed? Who is responsible?
Feb
ruar
y 23
, 201
3
Description Due Date Responsibility
Design
Colour Scheme March 1, 2013 Marketing Dept.
Layout March 15, 2013 Designer
Features
Forms March 18, 2013 Developer
Sharing Buttons March 21, 2013 Designer (Icons)Developer (Code)
Content
About March 28, 2013 HR Department
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roupStep 3: The Solution
We know our requirements. What about the deliverables?
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Tying your Planning to WordPressIn your Requirements WordPress Dependency
Design Requirements Theme Requirements
Feature Requirements Theme Function RequirementsPlugin Requirements
Content Requirements PagesCategories(Sometimes) Plugins/Themes
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Requirements to SolutionsHow do the requirements correlate to WordPress?
Feb
ruar
y 23
, 201
3
Description WordPressDependency
Solution
Design
Colour Scheme Theme Child Theme
Layout Theme Genesis Framework
Features
Forms Plugin Formidable Pro
Sharing Buttons Plugin ShareThis
Site Stats Plugin WordPress.com Stats
Content
About Page
Blog Posts
Products Plugin Shopp
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roupTL;DR: Summary
In closing…
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
What are the takeaways?Visually map out your website requirements. (Brainstorm!)
Organize your requirements in an easy-to-read document. (Tables!)
Adjust your document to serve different purposes. (Iterate!)
Relate your requirements to specific solutions. (WordPress!)
Feb
ruar
y 23
, 201
3
HASHTAG #WPTO ON TWITTER
Toro
nto
Wor
dPre
ss G
roup
Effective Website Planning
Click icon to add picture
Toronto WordPress Group @ PodCamp Toronto 2013
Feb
ruar
y 23
, 201
3