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 an 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’s 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 anything 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.