Last week Marianne Kay tweeted that the Dumbarton Oaks site was a “beautiful example of responsive design”. (Thanks Marianne!) Kudos for the beautiful Dumbarton Oaks graphic design go to the design firm Might & Main. But kudos for the responsive behavior go to Plone and the Plone community, which made implementation easy. Here’s how we did it.
A responsive design provides an optimal viewing experience across a wide range of devices, from large desktop monitors to mobile phones. It uses CSS3 media queries, fluid, proportion-based grids, and flexible images to adapt the layout to the browser width. Normally, adding responsiveness to a website’s design means multiplying theming time by a factor of 2 or 3. But for the Dumbarton Oaks site responsiveness didn’t add much time because we used Plone’s built-in Diazo theming tool and started with a theme that provided responsive behavior out of the box. We didn’t have to write the code that (for example) makes images re-size, portlets change position, and menu tabs transform into drop downs for smaller screens. The Plone UI/CSS integration was already done for us.
Diazo is a fantastic tool that lets you map dynamic web page content from any CMS or web application into an HTML design. The mapping is done via a set of rules that define how to move elements from the content page into placeholders in the theme. Plone provides nicely integrated Diazo theming, soon to get even better with a through-the-web theme editor that will come with Plone 4.3. You can see a preview of it in this screencast made by Eric Steele.
Here is our recommended Diazo theming process.
- Choose a Diazo Plone theme that provides the desired responsive behavior. For the Dumbarton Oaks project we used beyondskins.responsive by Simples Consultoria.
- Create a static theme package to contain the designer’s HTML templates (including header and footer code), CSS, Javascript, and graphic assets. Diazo themes are pure HTML/CSS, so there is no need for designers to learn a special templating language.
- Have the designer base his or her HTML templates on the ones provided in the responsive theme.
- Add CSS files to the static theme that provide the responsive UI (from the responsive theme package), the Plone editing interface, IE fixes, and any special features provided by add-ons that are used on the site. Extract the contents of these files from the CSS that Plone serves with all products installed. Plone’s large CSS payload can be significantly pruned, only provide what’s needed.
- To style the HTML, have the designer supplement this CSS in a way that doesn’t interfere with necessary UI elements or harm the responsiveness. It is helpful to add this graphic-design-specific CSS in a separate file.
- Apply the static theme to the Plone site with Diazo rules.
- Plone’s markup consistency and quality is a huge benefit during this process. Just give the designer sample HTML and let them do what’s needed in the theme’s CSS.
When we engaged Might & Main to do the Dumbarton Oaks design, we forgot to tell them it was going to be responsive. They were very perturbed when they found out, since they had not budgeted to do the extra work that is normally required. We told them not to worry because that extra work had already been done in beyondskins.responsive. And sure enough, Dumbarton Oaks got a responsive design with very little effort from Might & Main.
Here is what the site looks like without the Diazo theme applied.
Here is what the themed site looks like on the desktop.
And here is what it looks like on a mobile device.
