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?