Thursday, August 25, 2011 - Drupal...THE KICK-OFF Supply the designer with a list of common items...

Thursday, August 25, 2011

A bulletproof approach to theming

Presented by Rasmus Kalms

Design, UX and Theming


STATE OF THEMING

How do you define yourself as a themer?


Goals for this talk


NO SILVER BULLETS

preprocess_make_it_all_go_away();


CASE #01

Bad timing and the indifferent backend dev, with little to no interest in presentation or markup


So, how do we deal with these scenarios?


LET YOUR THEMER ASK

Does the output match the intended design?


SHARING IS CARING

How do we improve communication?


REMEMBER


• Focus on how you can make a difference from your point-of-view.

REMEMBER


• Focus on how you can make a difference from your point-of-view.

• Ensure consistent communication and regular meetings, with output and code reviews.

REMEMBER


Style guides and Drupal


A style guide or style manual is a set of standards for the writing and design of

documents... The implementation of a style guide provides uniformity in style and

formatting of a document.

FROM WIKIPEDIA.ORG:

http://en.wikipedia.org/wiki/Style_guide








BASICALLY

A style guide is a document describing a set of visual standards.


A STYLE GUIDE COULD BE


• Description of logo usage




• Colorschemes




• Colorschemes

• Typography




• Colorschemes

• Typography

• Grids




• Colorschemes

• Typography

• Grids

And so on...



Skype brand style guideLocate it here: http://bit.ly/9oksav


http://bit.ly/9oksav

http://bit.ly/9oksav

BENEFIT

It ensures consistent usage of deliverables


PRINT VS. DEVELOPMENT

How could we use style guides in a Drupal environment?


The typical workflow


THE KICK-OFF

Supply the designer with a list of common items like typography, lists, form elements etc.


THE KICK-OFF

Pinpoint common design elements like content boxes (panels) and lists (views) together


SPECIFICALLY


• Typography

SPECIFICALLY


• Typography

• Grid / baseline

SPECIFICALLY


• Typography

• Grid / baseline

• Lists (views)

SPECIFICALLY


• Typography

• Grid / baseline

• Lists (views)

• Form elements

SPECIFICALLY


• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY


• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color


• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color

• Navigation & links


• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color


• Images (usage)


• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color


• Images (usage)

• Taxonomy and teaser lists


• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color


• Images (usage)

• Taxonomy and teaser lists

DEFINE MARGINS, DIFFERENT STATES (I .E LINKS & FORMS), POSITIONING ETC.


VALUABLE NOTES ABOUT IA

How we use Information Architecture at Peytz & Co.


HEADER

SIDEBAR

FOOTER

CONTENT

NAV

NODE

NODE SEC. NAV

SEARCH

NODE BLOCK

NODE


KEEPING CONTENT CONSISTENT

If the project warrants it, you should keep a list of intended output for each page


PAGE DESIGN VS. CONTENT SYSTEMS

The benefit is the replacement of page design in Photoshop, with the design of content systems in Drupal


The standard theme or boilerplate


REMEMBER


• Create a style guide, and keep using and maintaining it.

REMEMBER



• Make sure the site has a strong, well-defined information architecture. Help maintain it!

REMEMBER



• Make sure the site has a strong, well-defined information architecture. Help maintain it!

• If you’re providing a client with a theme for Drupal, you should make sure it works on even the most basic Drupal installation.

REMEMBER


Code Structure


CODE STRUCTURE

Divide templates into folders like “views”, “panels”, “nodes” etc.


CODE STRUCTURE

Use Drupal’s module architecture and avoid bloat


My small crisis of faith as a front-end developer

Story time!


Using HTML5/CSS3 doesn’t have to be complicated


CLEAR BENEFITS

It’s fast and it keeps the code flexible; less need for cutting out graphics in Photoshop


CLEAR BENEFITS

Leaves more room for prototyping and an iterative approach


Adaption and ease of use


LE SIGH (VENDOR PREFIXES)

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-o-border-radius: 4px;

... and on and on.


LESS VS. SASS

CSS pre-processors


THEY TYPICALLY PROVIDE


• Variables



• Variables

• Mixins



• Variables

• Mixins

• Functions



• Variables

• Mixins

• Functions

• Nesting



VARIABLES EXAMPLE

@color: #4D926F;

#header { color: @color;}

h2 { color: @color;}


MIXINS: LIKE VARIABLES WITH CLASSES

.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}

#header { .rounded-corners;}

#footer { .rounded-corners(10px);}


NESTED RULES: SIMPLE INHERITANCE

#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}


FUNCTIONS

@the-border: 1px;@base-color: #111;@red: #842210;

#header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2;}

#footer { color: @base-color + #003300; border-color: desaturate(@red, 10%);}


Is there a module for this? Yes!



• http://drupal.org/project/sass


http://drupal.org/project/sass



• http://drupal.org/project/sass

• http://drupal.org/project/less




http://drupal.org/project/less

http://drupal.org/project/less

FINAL NOTE

Organizing your theme and approach goes a long way


THEMERS

Take it upon yourself to communicate the constraints and possibilities


Your designers should be running their own projects. Do not place some non-designer in

between them and their client. You have a responsibility to shepherd your designers

toward consummate professionalism. (...) To do otherwise is to cripple their professional development; perhaps permanently.

TO QOUTE ANDY RUTLEDGE:

From “Design Professionalism”, designprofessionalism.com


Thank youIf you want to catch up: @kalms on Twitter


What did you think?


What did you think?Locate this session on the DrupalCon London website:http://london2011.drupal.org/conference/schedule


http://london2011.drupal.org/conference/schedule



Click the “Take the survey” link




THANK YOU!


Click the “Take the survey” link




Thursday, August 25, 2011 - Drupal...THE KICK-OFF Supply the designer with a list of common items...

Documents

Transcript of Thursday, August 25, 2011 - Drupal...THE KICK-OFF Supply the designer with a list of common items...