View
1.081
Download
2
Category
Tags:
Preview:
DESCRIPTION
Many organizations have big ideas about what they want their website to do, but a budget that common wisdom would judge too modest for those aspirations. The University of Minnesota Press had lots of great ideas for a cutting-edge, dynamic, data-driven site where users would get lost exploring their remarkable catalog of books. Their budget, however, was only enough to cover a modest 200 hours of development. In this talk, Sally Kleinfeldt and Alec Mitchell describe how we were able to create the site that UMP dreamed of within their budget constraints by using Plone, plone.app.theming, and Plone add-ons such as eea.factednavigation. Visit the site at upress.umn.edu. A link to audio of this presentation is here: http://2011ploneconference.sched.org/event/4db13ec7ca5072646b3defa0c22d811d
Citation preview
How To Get a Fabulous Website on a Modest Budget Using Plone
Sally Kleinfeldt and Alec MitchellPlone Conference, San Francisco
November 6, 2011
The Project
• Dynamic, data-driven site
• Great customer interactions
• Cutting edge design
• Awesome search
• Unified identity across 3 divisions
• Unique and standout presence in the academic publishing world
The People• Emily Hamilton, UMP Marketing
Director and Project Owner
• Curtis Michelson, Business Analyst and FileMaker consultant
• Sally Kleinfeldt, Project Manager
• Carlos de la Guardia and Alec Mitchell, Developers
• Kevin Brooks and Arielle Walrath, UI/UX Design
The Budget
• Discovery
• UI/UX Design
• Development
• Training
• Project Management
$60,000
Before
After
The Role of FileMaker• Internal FileMaker application, Minnesota
Projects (MP)
• Authoritative source of book and journal information
• title, author, ISBN, price, reviews, copy, etc.
• FileMaker data pushed to publisher for e-commerce
• FileMaker data pushed to Plone for website
The Process
BRD
• UMP conducted 9 month discovery process prior to RFP
• Business analyst led
• Resulted in 42 page Business Requirements Document
BRD
• Pros
• Well articulated vision
• Consensus hammered out
• Entire organization bought in
• Cons
• So very many requirements
• Scant information on priorities
• Very high expectations
Need for Agile
• Many requirements
• Unclear priorities
• Fixed budget
• ==> Flexible scope agile project
• First pass by project manager
• Defined stories that took Plone functionality into account
• Stories for content editors and for site users
• Discussed and edited by project owner and business analyst
Turning the BRD into User Stories
User Stories
• 48 stories in 6 categories (plus 17 deferred)
• CMS features (Plone + add-ons)
• FileMaker data transfer
• Custom content types
• Discoverability
• E-commerce
• Other
Planning Poker
• Estimate relative size of stories
• Use modified Fibbonacci “story points”:
• 0, .5, 1, 2, 3, 5, 8, 13, 20, 40, 100
• Project owner needs this information to prioritize
• 4 hours with developers, project owner, business analyst, project manager
Story Prioritization
• Google doc was hard to navigate
• Switched to Pivotal Tracker
• Rearrange stories in backlog to reflect priorities
• Drag ‘n drop stories into iterations
Development
• Four one-week iterations
• Pauses before 3rd and 4th iterations to allow for evaluation and design work
• Remaining work (theming, fixes, deployment) managed through tickets
How We Used Our Time
Discovery 24
Story Development 15
FileMaker Import, Custom Types 63
Theming 34
Other Development 35
Training 11
Production Deployment 22
Technical Discussions, Meetings 47
Project Management 73
How We Used Our Time
Discovery 24
Story Development 15
FileMaker Import, Custom Types 63
Theming 34
Other Development 35
Training 11
Production Deployment 22
Technical Discussions, Meetings 47
Project Management 73
Yikes
How We Used Our Time
Discovery 24
Story Development 15
FileMaker Import, Custom Types 63
Theming 34
Other Development 35
Training 11
Production Deployment 22
Technical Discussions, Meetings 47
Project Management 73
Yikes!!!
Yikes
The Site
Custom Functionality
• Complex content types and a more complex importer
• Elaborate categorization
• Faceted navigation
• “Theme Pages” - Custom Collections?
Complex Content Types
Book Content
• Many read-only fields imported from FileMaker book catalog
• Books are Archetypes containers and reference other content:
• Copy content (Reviews, Awards, Blurbs, ...). Also from FileMaker
• Product content (Paperback, E-Book, ...)
• A few editable fields to tweak presentation
User editable
Title/Sub-Title
User editable
Contributor references& release dates
Title/Sub-Title
User editable
Contributor references& release dates
Title/Sub-Title
Listing of Product content
User editable
Contributor references& release dates
Title/Sub-Title
Listing of Product content
Copy content & more
User editable
Contributor references& release dates
Title/Sub-Title
Listing of Product content
Copy content & more
Related Books
User editable
So many attributes!
Contributor references& release dates
Title/Sub-Title
Listing of Product content
Copy content & more
Related Books
User editable
Categorization
Organizing it All
• Thousands of books and journals going back 50+ years
• Existing ad-hoc taxonomy needed refinement:
• Primary discipline
• Additional disciplines
• Sub-disciplines
• User editable tags (PloneKeywordManager)
Faceted Navigation
Faceted Navigation
• Saved by an add-on: eea.facetednavigation
• Developed to provide nifty navigation for publications on the EEA website
• Completely generic multi-parameter searching of content with a fancy AJAX interface
• Can make implicit category hierarchies explicit
• Easy to theme. A perfect fit for user-friendly searching across heavily categorized content.
Quick Faceted Nav Demo
“Theme Pages”
“Theme Pages”
• Display a set of related books: both manually selected and generated based on categories
• Need to create new theme pages often → usability is critical → not collections!
• Also needed tag filtering (Tag Cloud)
• eea.facetednavigation to the rescue again
• Can customize default facets via GenericSetup
Theming
Theming on a Budget
• plone.app.theming/Diazo to the rescue
• Minimal Sunburst UI CSS → designer
• HTML + CSS + Images → developer
• Diazo rules file does the rest
• Only template customized was folder_listing
• Content managers can use Sunburst or manage content in-theme
Diazo Rules File Tips
• Theme HTML included a fixed graphical navigation
• Just explicitly map each section to the appropriate theme element
• No dynamic section navigation for admins? The navigation portlet can take care of that.
• Grabbing conditional comments and google analytics scripts may require some fancy XPath.
Odds and Ends
What was Left
• Listings and portlets need theming too!
• Plone’s markup consistency and quality is a huge benefit. Just give your designer some sample HTML and let them do what’s needed in the theme CSS.
• Plone’s frequent use of <dl> tags may not be to some designers’ liking.
• Content Well Portlets (Weblion) can be very useful for page designs which require dynamic listings as a part of the content area.
Questions?
Recommended