Paint it Plone! (Simone Deponti)

Simone is a developer but is still talking about design to bridge the gap between both ‘worlds’.

Theming is not only about adding decorations. It’s also about altering structure and modifying user experience.

Start of a project

A good approach is with wireframes, mockups with specs and modular design. This way you only focus on the important parts first. Unfortunately sometimes you start with printed stuff (the design), no specs and no patterns in the design (where e.g. two pages look completely different). Try to prevent this.

Since web sites are not print, you should work with proportions instead of absolute measures. Use the font size as the base. Then make paddings and margins relative to the font size. Finally decide on the size of the other elements.

If you don’t start with a mobile experience, you are doing graceful degradation instead of progressive enhancement. The latter is harder do design, but should improve performance. But apparently mobile browsers download everything even if the CSS will not be applied (because the media query does not match).

Do not focus on decorations. Instead focus on a black and white version and add colours and graphical elements later. Otherwise you are adding lipstick to a pig.

Typography

By starting out with he black and white version, it also immediately becomes clear that typography is very important. But it is also complex. It encompasses both single characters and the text as a whole. Besides fonts, space is also essential: line heights, spacing between paragraphs, spacing between words (e.g. caused by justified text). Please give your design space.

A tip regarding web fonts: when you use them, please make sure you do it right. Do not include a different name for a variant of a font (e.g. MyFont and MyFontBold for example), but give them the same name and change the font-weight or font-style.

Grids

A grid is a creative constraint and provides a exoskeleton to the page. It is a tool that helps in placing stuff. Simone warns us to avoid fluid grid. Because they take up a certain proportion of the screen, they will not work on small screens for example. You could for instance use the Deco grid system.

You can also make your own grid. If you use a good starting point (e.g. the Golden Grid System) it is not that hard. For responsive design, you will have a different number of columns based on the screen size.

CSS

CSS preprocessors are a handy tool. Simone gave an example using Less. For simple examples, the benefit might not be clear. But if you use variables for colours and need to change a colour, the benefit is obvious: you only need to change it in one place (instead of doing a global search and replace). Whenever you use CSS3 and need vendor prefixes, preprocessors can handle them automatically for you if you want to so you don’t have to be bothered with it.

Simone presents statistics for IE usage and gives us a list of bugs/missing features for IE 6–9. Tricks: use modernizr.js to include browser specific optimisations and throw away borders for old IE since they cause a lot of problems due to a broken box model.

Reuse what’s there

In Plone there are too many page types to generate a design for each of them. It’s easier to decompose a page into blocks and widgets which can be reused. Twitter bootstrap is more than a set of CSS. It’s a documented set of widgets. But you can also generate something similar yourself.

Try to reuse the classes already available in Plone. For instance, do not create your own class to hide content. There’s markup for tables, tabs, portlets, etc. There’s also Javascript available you can reuse, such as jQuery.

With Diazo you can for instance wrap existing elements with custom tags (e.g. a <div> with a class or id). XSL also provides if…then…else constructions you might want to use. You can also override classes if needed (because you didn’t reuse the Plone classes). Diazo might be overkill. You might also use z3c.jbot to override templates.

Conclusion

Theming is a complicated thing. But if you communicate you can get feedback and accomplish teamwork. This will lead to a better result. If you are working on a team, do not settle for less than “good.” If something looks bad, the customer will also complain about it so it’s better to do a good job straight away.

View the slides or watch the video.