PSD to Theme - Acquia Webinar

Get Ready ...

To prepare for this seminar you should download a copy of the following themes:● http://drupal.org/project/ninesixty● http://drupal.org/project/domicile

If you need to leave:● This session is recorded. If the recording fails, this is a similar

presentation to the one I gave at DrupalCon London.● The information is available in: Drupal User's Guide or workbooks

at Designtotheme.com.● Slides are available from: slideshare.net/emmajane

Drupal Trainer

www.sitebuildingextravaganza.com

Workbook Author

www.designtotheme.com

Discount code available at the end of the webinar.

Book (Co)Author

Agenda

Theme Building● Theming philosophy● Process● Case study: Domicile

35 minutes

Summary● Questions/Answers● Discount Coupons

20 minutes

Theming Philosophy

Lazy Front End Developer

Working With OthersProduces More Honey

node.tpl.php

page.tpl.php

field.tpl.php

jplayer.tpl.php

Theming by tpl.php Files

Wastes Your Time

Minimum Viable Theme

UX

UX

UX

UX

Take Only Pictures, Leave Only Footprints

Theme Only What You Need To

Budget-Appropriate Web Design● Know your Drupal toolkit. Know your budget.● Focus on the biggest elements first.● Work closely with your designer and your client to

make sure you get the important things right.● Theme with the markup you have, not the markup

you'd like to have.● Pixel perfect design is for print. Get over it.

Accessible Web Design

“Accessible web design refers to the philosophy and practice of designing web pages so that they can be navigated and read by everyone, regardless of location, experience, or the type of computer technology used.” Australian Human Rights Commission

● Know your guidelines (508 or WAI).● Use a checklist.● Use an automated testing suite.● Test with users.

http://www.designtotheme.com/tutorials/automated-accessibility-testing

Responsive Web Design

“Any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device” zeldman.

● Read: http://tinyurl.com/responsive-article

● Buy (and read): http://tinyurl.com/responsive-book

● Watch: http://tinyurl.com/pathtomobile

● Use: http://drupal.org/project/omega

(Eventually “all” base themes will be responsive.)

Theming Goals● Budget-appropriate.● Accessible.● Responsive.

Process

Steps to Making a Theme

1. Communicate with your whole team.

2. Plan your data structure.

3.Use wire frames to prove what you're saying about how the site ought to be built.

4.Build the site (ignore the theme).

5.Convert your wire frame to its grid layout.

6.Build out the HTML fragments in the relevant tpl.php files. Substitute CSS effects for PSD effects where possible.

7. Apply your theme to the site.

8.Refine as necessary based on the UX.

Data Model

http://www.flickr.com/photos/alan-dean/3513723498

Wire Frames

Begin Site Building

(This may affect site design decisions based on the theming goals of budget-appropriate, accessible and responsive.)

Grid Framework

http://960.gs/

CSS (Grid) Framework

Base Theme

● drupal.org/project/ninesixty● drupal.org/project/fusion● drupal.org/project/zen

To Build a Successful Theme

You must:● Know your data model.● Create wire frames describing page elements.● Identify the modules, templates and configuration

responsible for every element described in your wire frames.

● Use a grid framework in both your design files and Drupal templates.

● Use a base theme that meets your web design goals.

Case StudyBuild me a theme!

Steps to MVT

1. Prepare design.

2. Create theme shell (text files for Drupal).

3.Create regions.

4.Extract and embed images.

5.Launch MVT.

Domicile● Designed by Betty

Biesenthal.● Themed by Emma

Jane Hogbin (and the base theme NineSixty).

● Code available from http://drupal.org/project/domicile

Domicile Theme

Grid Overlay

Wire Frame for NineSixty Sub-Theme

Create a Theme Shell

sites/example.com/themes/theme_name   theme_name.info   page.tpl.php

Also: sites/all/themes/base_theme

Take a peek

1. Download the theme: http://drupal.org/project/domicile

2. Unzip the package.

3.Look at the files inside.

domicile.infoname = D7SBE - Domicile

description = A three-column design by Design House (www.design-house.ca) and themed by Design to Theme.

screenshot = screenshot.png

core = 7.x

engine = phptemplate

base theme = ninesixty

; Stylesheets.

; Regions

; Features

Build page.tpl.php from NineSixty

Identify These Shapes in Domicile

Define Regions and Blocks

Extract Images from the PSD

Hard Code Fixed Images

Minimum Viable Theme

Steps to MVT Summary

1. Prepare design.

2. Create theme shell (text files for Drupal).

3.Create regions.

4.Extract and embed images.

5.Launch MVT.

What's Wrong?

Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/

Theme by UX

Locate “problem” areas and fix with:● The administrative interface.● CSS enhancements.

And if you need more control add:● Helper modules.● Theme template files.● Theme functions.

Administrative Interface

CSS Enhancements

Relevant HTML source

Page element CSS styles

Apply Generic Styles

Apply Build-Specific Styles

Site Building/Theming Helpers

Themer Tools● Devel● Theme Developer● Firebug for Drupal

Layout● Panels● Context● Display Suite

Site Building● Views● Nodes in Block● Menu Block● Entity View Mode● Media● jPlayer● etc

tpl.php● page.tpl.php● node.tpl.php● page-front.tpl.php● block.tpl.php● Error pages: 403, 404, 500

Theme Functions

Finally...and only if you really must:● Preprocess functions.● Form altering functions.● Functionality-based PHP snippets.● (etc)

Domicile: the theme

Theme Building Summary

Minimum Viable Theme1. Prepare design.

2. Create required theme files.

3. Create regions in page.tpl.php.

4. Extract and embed images.

5. Launch MVT.

Theme by UX6. Administrative interface

7. CSS enhancements

8. Module helpers

9. tpl.php files

10.Theme functions

PSD to Theme Summary● Plan your theme from the data model out, not the template files in.

● Use relevant Drupal modules to break up content and display it in relevant locations.

● Extract only the images and colours you need from your PSD file.

● Using your grid, rebuild your design as a minimum viable theme in the fewest possible tpl.php files.

● Fix any outstanding problems according to the expected user experience with the site.

● Test your site using automated testing suites for cross-browser and accessibility issues. Then test again using as much real content and as many real people as you can afford.

● Cross your fingers and launch.

www.informit.comSAVE 35% on Drupal User's Guide.Discount Code: DRUPALUSER

www.designtotheme.comSave 35% on all titles.

Discount Code: ACQUIA-P2T

1. PSD to Drupal Theme2. SBE Guide: Micro Site

www.drupalwatchdog.com/readIssue 1: Free PSD to Theme article.

Discounts on Practical Drupal Guides

Stay in Touch● @emmajanedotnet● [email protected]● www.designtotheme.com