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.

1. A perspective on tiles to empower your Plone editors.
Saucelabs
Abstract and Zentraal for PLOG2014S. Orsi - D. Siedband /

2. Who we are
Simone Orsi
Web developer
at Abstract
Plone contributor
@simahawk
David Siedband
Software developer
at Zeentral
Plone contributor
@siebo

3. What’s Saucelabs?
● San Francisco based start-up
● Automated and manual testing
● Uses open source tools
○ Selenium
○ Windmill
● Plone community uses it

4. The project
Migrate their custom Pylons-based CMS
to Plone
Migrate their Wordpress blog to Plone
Separate CMS functionality from custom
testing app

5. Challenges
● Empower marketing team to make direct updates
● Support complex layouts for product pages
● High-traffic
○ 5k uniques/day
○ 30k pageviews/day
● Incremental deployment

6. Why they choose plone
● Open Source
● Ease of Use
● Strength of Community
● Strong Security Record

7. HOW TO SOLVE THIS?

8. 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.

9. 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.

10. 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

11. 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.

12. Incremental Deployment
Go 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 involved
CompositePage - tile images live downstream of the tile

13. LIVE DEMO!

14. Improvements (??)
A lot…
● better UX
● allow to handle columns (not our use case though)
● manage predefined layouts

15. QUESTIONS?