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?