2. About us
@CedricS • Frontend Developers
Cedric Spillebeen
• Focus on Dev and UX
@janyves • krimson.be
Jan-yves Vanhaverbeke
@elswens
Els Wens
3. Agenda
• Introduction
• Optimal Design Input
• From Design to Theme
• Basic Frontend Performance
• Questions?
4. Introduction
• Drupal is a CMS.
• Content-first approach.
• Built by backend developers.
“ The Views output contains a rich set of div
tags allowing fine-grained CSS control over
the output. ”
5. Introduction
• Get optimal design input. (complete designs)
• A way of working that leads to a Drupal
theme that is flexible, maintainable and
consistent.
• Optimize the Frontend Performance.
7. Problems with designs
• A design is static but Drupal is flexible.
• Not all pages will be designed.
• Designs are rarely consistent.
• A design reflects the ideal situation.
8. Solutions
• Take out inconsistencies before the final
delivery.
• Check for feasibility.
• Ask for a style guide.
9. Style guide
• An overview of all recurring design elements.
• A requirement for every CMS design.
• A separate design with all elements in the
site.
• Leading in case of inconsistencies.
10. Style guide
• Site elements:
• Navigations: including mouse-over and active states.
• One or more block templates.
• A pager.
• Message boxes: warning, confirmation and error.
• A form. Typically useful for the contact form.
• A list of the most important colors.
11. Style guide
• Typography:
• Headings: H1, H2, H3 and H4.
• Links: color and (optional) underline. Also define a
mouse-over state.
• Paragraph: for default text the line-height and space
between text should be defined.
• Unordered list: How does an unordered list in content
look?
14. Analyze the design
• Print all designs.
• Look for patterns:
• Image styles
• View Modes
• Decide on HTML tags / classes / IDs
15. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.
16. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.
17. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.
18. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.
• Use generic classes above IDs.
• Replace module specific HTML.
19. First step
• Get the basics right first!
• Add a simple page with mixed typographical
content.
• Style all generic elements: header, footer,
navigation, typography, colors, links etc.
20. Keep your CSS flexible
• Work as generic as possible.
.field
vs
.page-article #content
div.node div.field-title
21. Keep your CSS flexible
• Theme a visual element, not a Drupal
module:
.article-teaser
vs
.views-articles .views-
row
22. Keep your CSS flexible
• Dare to rework existing CSS as features are
added.
23. Optimize your CSS
• Remove Drupal and module CSS (see
Frontend Performance).
• Use Drupal CSS standards: http://drupal.org/
node/302199
• Use comments to add structure to your CSS.
/*
* Navigation
*/
/* Sidebar Navigation */
25. Reduce download size
• Clean up your HTML.
• Gzip compression for HTML.
• mod_expires in Apache.
• Optimize your images: http://drupal.org/
project/imageapi_optimize.
• Use Image Styles and Image Resize Filter.
26. Reduce download size
• Remove unused Drupal and module CSS
and javascript:
• hook_css_alter()
• hook_js_alter()
• Add page specific CSS and javascript:
• drupal_add_css()
• drupal_add_js()
27. Less HTTP requests
• Aggregate CSS and javascript.
• Combine different groups into one:
/** /**
* Implements hook_js_alter(). * Implements hook_css_alter().
*/ */
function mymodule_js_alter(&$javascript) { function mymodule_css_alter(&$css) {
uasort($javascript, 'drupal_sort_css_js'); uasort($css, 'drupal_sort_css_js');
$i = 0; $i = 0;
foreach ($javascript as $name => $script) { foreach ($css as $name => $style) {
$javascript[$name]['weight'] = $i++; $css[$name]['weight'] = $i++;
$javascript[$name]['group'] = JS_DEFAULT; $css[$name]['group'] = CSS_DEFAULT;
$javascript[$name]['every_page'] = FALSE; $css[$name]['every_page'] = FALSE;
} }
} }
28. Other
• Move JS to the bottom in your html.tpl.php.
• Use a CDN: http://drupal.org/project/cdn.
• Test your site with Yslow.
Drupal is a CMS, thus flexible. \nBuilt by developers: the theming layer is super-flexible but very technical.\nContent-first approach: you have to build the site first, before you can start to theme. This is largely due to the fact that there are always several ways to achieve one goal, each with different HTML. So you can’t go from design to HTML without keeping Drupal HTML into account.\nQuote: one of the big issues in Drupal. Drupal 7 is already better, and Drupal 8 will be a lot better in this area.\n
Let’s compare to backend development: there is Functional Analysis and Technical Analysis. But in most companies, Frontend Development is an afterthought. \n\nNot: these are great tools, but should not patch up a bad process. Get your basics right first.\n
\n
A design is static: but Drupal is a CMS, and thus flexible. It is difficult to visualize what will happen in case blocks are added, content grows longer etc.\nNot all pages will be designed: which is not always a bad thing. As this leads to the third point: the more designs, the more inconsistencies.\nDesigns are rarely consistent: and you cannot blame the designer, since designs go back and forth between designer and client.\nIdeal situation: teaser with right length, equal height blocks etc.\n
Inconsistencies: Sit down with the designer, and take out the risks and inconsistencies.\nFeasibility: HAALBAARHEID: zijn er zaken die heel moeilijk of niet te bereiken zijn.\nStyle guide: see next slides. \n
Leading: important to discuss this with the designer.\n
\n
\n
NA DESIGN ANALYSE ==> GEOPTIMALISEERDE DESIGNS ==> START THEMING\n\nWAT IS THEMING?\n\nTHEMING VAAK ONDERSCHAT ==> MEER DAN KLEURTJES EN AFMETINGEN\n\nEIST DOORDACHTE AANPAK ==> CONSISTENTIE & FLEXIBILITEIT\n
WE HADDEN VANDAAG NOG DISCUSSIE ==> 2x 1 onderdeel is consistentie\n
Consistentie: Patronen, Afbeeldingsstijlen, weergave van content\n\nZet die consistentie om naar HTML => TAGS, CLASS & ID\n
Remember that Drupal has a content-first approach, so the developer will fill the site with content and features. \nModule specific HTML: everything is overridable in Drupal so use that to make the HTML consistent. It will hugely improve the quality of your CSS.\n\nCase: we will compare a Default Drupal 7 with some Views and some content, and our optimized Drupal. For coolness, we will do a 3D comparison in Firefox.\n
Remember that Drupal has a content-first approach, so the developer will fill the site with content and features. \nModule specific HTML: everything is overridable in Drupal so use that to make the HTML consistent. It will hugely improve the quality of your CSS.\n\nCase: we will compare a Default Drupal 7 with some Views and some content, and our optimized Drupal. For coolness, we will do a 3D comparison in Firefox.\n
Remember that Drupal has a content-first approach, so the developer will fill the site with content and features. \nModule specific HTML: everything is overridable in Drupal so use that to make the HTML consistent. It will hugely improve the quality of your CSS.\n\nCase: we will compare a Default Drupal 7 with some Views and some content, and our optimized Drupal. For coolness, we will do a 3D comparison in Firefox.\n
Remember that Drupal has a content-first approach, so the developer will fill the site with content and features. \nModule specific HTML: everything is overridable in Drupal so use that to make the HTML consistent. It will hugely improve the quality of your CSS.\n\nCase: we will compare a Default Drupal 7 with some Views and some content, and our optimized Drupal. For coolness, we will do a 3D comparison in Firefox.\n
Start met de basis!\n
Generic: it’s not about being sure it won’t break. It is about reusability and consistency.\n\nVisual element = an article teaser. Every module has its own output, such as Panels or Views, but don’t theme on it.\n
Generic: it’s not about being sure it won’t break. It is about reusability and consistency.\n\nVisual element = an article teaser. Every module has its own output, such as Panels or Views, but don’t theme on it.\n
Generic: it’s not about being sure it won’t break. It is about reusability and consistency.\n\nVisual element = an article teaser. Every module has its own output, such as Panels or Views, but don’t theme on it.\n
\n
We will only focus on the Drupal specifics here, not Frontend Performance in general.\n\nImportant for mobile devices. 20% server time and 80% client side.\n
Gzip compression is available in Drupal, but you should do it on server level.\nmod_expires: Drupal adds cache expiration headers by default but you need to activate this Apache module.\nImage Styles: Image size presets.\nImage Resize Filter: solves the issue of huge images that are manually rescaled in the WYSIWYG.\n
Every module adds its own CSS and possibly JS. Always check if you even use those files. \nOr if you feel like you are overwriting everything, think twice.\n\nDon’t stuff everything in your .info file.\n
Aggregate: Configuration > Performance\nFewer HTTP requests are better than smaller files.\nCombine: SYSTEM, DEFAULT, THEME\n\nOther options such as sprites are also useful, but we want to focus on Drupal specific options.\n
