website planning 201 by jen mckibben
DESCRIPTION
Website Planning 201 by Jen McKibben presented at CMS Expo in Denver, December 2008.TRANSCRIPT
![Page 1: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/1.jpg)
Website Planning 201
Jen Kramer McKibben4Web, Inc.CMS Expo, Denver, CODecember 2008
![Page 2: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/2.jpg)
Agenda
• Introduce Jen• Introduce Jesse James Garrett
and the Five Planes of User Experience
• Structure, Skeleton and Surface
![Page 3: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/3.jpg)
Jen Kramer McKibben
• Building websites since 2000, Joomla sites since 2005, Joomla 1.5 since RC1
• Program Director, MSIT, Marlboro College Graduate Center
• Manager, New England Adobe User Group and Joomla! User Group New England
• Lynda.com author: Joomla! Creating and Editing Custom Templates and Joomla! Advanced CSS
• Not really a PHP/MySQL kind of gal!
![Page 4: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/4.jpg)
“I need a site and I want it blue. How much will that cost?”
“I need a house, and I’d like blue paint and beige carpet. How much will that cost?”
![Page 6: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/6.jpg)
Structure Plane
Questions:
• How should the content be organized?
• What are the navigation button names?
![Page 7: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/7.jpg)
How should the content be organized?
• In Joomla, there are two considerations:• What does the site map look like?• How are sections and categories
organized?
![Page 8: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/8.jpg)
What is a site map?
• Think of this as an org chart.• This is the hierarchy of your
pages in your website.• It can be displayed as an org
chart, or as a bulleted list.
![Page 9: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/9.jpg)
What is a site map?Home
About
Location & Directions
Photos
Physician Directory
Physician Profiles
Testimonials
Primary Care
Surgery
Area Resources
Cultural Attractions
Schools
Recreation
Real Estate
Newspapers
Links
C of C
Visitors Bureau
FAQ Career Opportunities
![Page 10: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/10.jpg)
What is a site map?
• Home• FAQ• About
• Location & Directions• Photos
• Area Resources• Recreation• Links
• Chamber of Commerce• Visitor’s Bureau
![Page 12: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/12.jpg)
Sections and Categories in Joomla
• Everyone has their own theory and philosophy.
![Page 13: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/13.jpg)
“Sections and Categories Don’t Matter”
Positives• Set all articles to
“uncategorized” – no thought required
• Client doesn’t need to worry about assigning correct section/category
Negatives• Possible in Joomla
1.5 only• Can the client find
an article to edit in the article manager?
• Can’t use section/category blogs or other features
![Page 14: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/14.jpg)
“Sections and Categories Follow the Site Map”
Positives• Easier to find
content in the manager
• Savvy clients find categories more intuitive
Negatives• Client may get
confused with too many categories
• Potentially too much slicing and dicing
![Page 15: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/15.jpg)
Sections and Categories Work for Your Content
• Organize them so you can find what you need, and so can your client.
• Thoughtfully make use of section/category blogs, and other section and category based organization.
![Page 16: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/16.jpg)
Flow charts
• Helpful for thinking about tasks and the order they need to be completed
• Makes you think about error handling
• Helpful for developing modules and components
![Page 17: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/17.jpg)
Flow charts
![Page 18: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/18.jpg)
Structure Plane
• Any Questions?
![Page 19: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/19.jpg)
Skeleton Plane
Questions• How should forms and other
interactive screens look?• Where should important
information be located?
![Page 20: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/20.jpg)
Skeleton Plane
• Wireframe diagrams• Low-fidelity usability testing• HTML sketches
![Page 21: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/21.jpg)
WireframeDiagram
![Page 22: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/22.jpg)
Low-fidelity usability testing?
• Make a paper diagram of how the site will work.
• Test the site with users, next-door neighbors, anyone you can
• “Paper Prototyping” by Carolyn Snyder
![Page 23: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/23.jpg)
HTML Sketches
• Most practical in Joomla• Build the website out with
sections, categories, articles, menu items (SCAM)
• Let the client look at it.• Test with users.• Wireframe template available!
![Page 24: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/24.jpg)
Skeleton Plane
• Any questions?
![Page 25: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/25.jpg)
Surface Plane
Questions:• What will the finished product
look like?• What colors, fonts, and logo will
we use?• Sanity checks on layout, user
understanding of the site, etc.
![Page 26: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/26.jpg)
Where does the design come from?
• Two choices with Joomla:• Canned template (JoomlaShack,
SiteGround, others)• Build your own template based
on a graphic design
![Page 27: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/27.jpg)
Which is better?
• It Depends.
![Page 28: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/28.jpg)
Canned template positives
• Cheap to develop with a free or low-cost canned template
• Template almost always works correctly.
• Generally reasonable graphic designs.
![Page 29: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/29.jpg)
Canned template negatives
• Not a unique look• Limited in regions for adding
modules• Helps to know HTML and CSS for
modifying the template• Can be tricky to understand what
the template designer did and why
![Page 30: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/30.jpg)
Custom template positives
• Unique, perfect look for the client• Changeable and moldable to the
content• No extra code – does only what it
needs to do• You can charge more
![Page 31: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/31.jpg)
Custom template negatives
• Expen$$$ive• How good are your graphic
design skills? (Or do you know a graphic designer who can design for Joomla?)
• Can you convert the design to Joomla templates? (Or know someone who can?)
![Page 32: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/32.jpg)
Absolutely shameless plug
Be sure to check out“Joomla!: Creating and Editing
Custom Templates”With Jen Kramer McKibbenwww.lynda.com(released December 2, 2008)
(Releasing soon: Joomla! Advanced CSS)
![Page 33: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/33.jpg)
Not so shameless plug
And attend Barrie North’s talk on template development
(at 2:30 immediately following this talk)
![Page 34: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/34.jpg)
Exercise
www.winemakermag.com
Take a look at structure, skeleton, and surface for this site. Discuss.
![Page 35: Website Planning 201 by Jen McKibben](https://reader036.vdocument.in/reader036/viewer/2022070313/554bb115b4c905ae618b58de/html5/thumbnails/35.jpg)
If you liked this talk, you may also like…
• Graphics for Non-Designers• 1-2:30 PM 12/5