plog2014 - saucelabs - a perspective on tiles to empower your plone editors
DESCRIPTION
Overview on sauceslabs.com migration to Plone CMS. The official public website is in the process o migrating to Plone. We empowered their editors using Plone and a custom interface for building composite pages with predefined tiles.TRANSCRIPT
A perspective on tiles to empower your Plone editors.
Saucelabs
Abstract and Zentraal for PLOG2014S. Orsi - D. Siedband /
Who we are
Simone Orsi
Web developer
at Abstract
Plone contributor
@simahawk
David Siedband
Software developer
at Zeentral
Plone contributor
@siebo
What’s Saucelabs?
● San Francisco based start-up
● Automated and manual testing
● Uses open source tools○ Selenium○ Windmill
● Plone community uses it
The project
Migrate their custom Pylons-based CMS to Plone
Migrate their Wordpress blog to Plone
Separate CMS functionality from custom testing app
Challenges
● Empower marketing team to make direct updates
● Support complex layouts for product pages
● High-traffic○ 5k uniques/day○ 30k pageviews/day
● Incremental deployment
Why they choose plone
● Open Source
● Ease of Use
● Strength of Community
● Strong Security Record
HOW TO SOLVE THIS?
Our solution: composite pages
A page built on using tiles.
The UX empowers the editors to select a tile,
customize the content of the tile and select
some predefined styles for each of them.
Custom tiles
We identified the blocks that compose their
current site layout and we replicated it on top
of tiles.
Every row / block is a tile and the editor can
sort the order of the blocks thanks to the
custom UX.NOTE: to avoid unnecessary transactions to ZODB you need
to save the layout when done.
Custom editing UX
With a “good amount” of Javascript we render the
add and edit forms of the tiles and we render
them on the fly without page reload.
That allows editors to create landing pages in a
couple of minutes without having
Predefined styles
All the tiles have a predefined layout but
the editor can apply some predefined
styles on each tile via checkboxes.
We can configure those styles via plone
registry.
Incremental DeploymentGo live with just a bunch of pages.
1) CSS is ok (pattern-matchable)++theme++saucelabs++resource++
2) JS is ok (pattern-matchable)/portal_javascripts
++theme++saucelabs
3) Images are a bit more involvedCompositePage - tile images live downstream of the tile
LIVE DEMO!
Improvements (??)
A lot…
● better UX
● allow to handle columns (not our use case though)
● manage predefined layouts
QUESTIONS?