Website Planning 201 by Jen McKibben
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Website Planning 201 by Jen McKibben

Uploaded on

Website Planning 201 by Jen McKibben presented at CMS Expo in Denver, December 2008.

Website Planning 201 by Jen McKibben presented at CMS Expo in Denver, December 2008.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 4 2 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Website Planning 201 Jen Kramer McKibben 4Web, Inc. CMS Expo, Denver, CO December 2008
  • 2. Agenda
    • Introduce Jen
    • Introduce Jesse James Garrett and the Five Planes of User Experience
    • Structure, Skeleton and Surface
  • 3. 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
    • author: Joomla! Creating and Editing Custom Templates and Joomla! Advanced CSS
    • Not really a PHP/MySQL kind of gal!
  • 4. “ 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?”
  • 5. The Elements of User Experience
    • Developed by Jesse James Garrett,
  • 6. Structure Plane
    • Questions:
    • How should the content be organized?
    • What are the navigation button names?
  • 7. 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?
  • 8. 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.
  • 9. 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
  • 10. What is a site map?
    • Home
    • FAQ
    • About
      • Location & Directions
      • Photos
    • Area Resources
      • Recreation
      • Links
        • Chamber of Commerce
        • Visitor’s Bureau
  • 11. How to develop a site map?
    • Card sorting
  • 12. Sections and Categories in Joomla
    • Everyone has their own theory and philosophy.
  • 13. “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
  • 14. “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
  • 15. 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.
  • 16. 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
  • 17. Flow charts
  • 18. Structure Plane
    • Any Questions?
  • 19. Skeleton Plane
    • Questions
    • How should forms and other interactive screens look?
    • Where should important information be located?
  • 20. Skeleton Plane
    • Wireframe diagrams
    • Low-fidelity usability testing
    • HTML sketches
  • 21. Wireframe Diagram
  • 22. 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
  • 23. 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!
  • 24. Skeleton Plane
    • Any questions?
  • 25. 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.
  • 26. Where does the design come from?
    • Two choices with Joomla:
      • Canned template (JoomlaShack, SiteGround, others)
      • Build your own template based on a graphic design
  • 27. Which is better?
    • It Depends.
  • 28. Canned template positives
    • Cheap to develop with a free or low-cost canned template
    • Template almost always works correctly.
    • Generally reasonable graphic designs.
  • 29. 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
  • 30. 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 
  • 31. 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?)
  • 32. Absolutely shameless plug
    • Be sure to check out
    • “ Joomla!: Creating and Editing Custom Templates”
    • With Jen Kramer McKibben
    • (released December 2, 2008)
    • (Releasing soon: Joomla! Advanced CSS)
  • 33. Not so shameless plug
    • And attend Barrie North’s talk on template development
    • (at 2:30 immediately following this talk)
  • 34. Exercise
    • Take a look at structure, skeleton, and surface for this site. Discuss.
  • 35. If you liked this talk, you may also like…
    • Graphics for Non-Designers
      • 1-2:30 PM 12/5
  • 36. Questions?
    • Jen Kramer McKibben
    • 4Web, Inc.
    • [email_address]
    • Twitter: jen4web