Responsive Web Design for Drupal, CMS Expo

Responsive Web Design
for Drupal
www.responsivewebdesignguild.com

@emmajanedotnet
emma@designtotheme.com

Drupal
drupal.org/user/1773

Photo: morten.dk
Legs: walkah

Author / Trainer

http://www.designtotheme.com/workshops
http://www.designtotheme.com/ebooks

Agenda
●
Whirlwind tour of responsive web design.
●
Crash course on base themes in Drupal.
●
Applying responsive principles to Drupal sites.
● Case study #1: responsive retrofit
● Case study #2: using Fusion
● Awesome give-away

Introduction
In the beginning:
● Flexible Layouts

● Media queries

● Resizeable Images

Screen Sizes
● 320px / 80px per column = 4 columns
● 480px / 80px = 6 columns

● 600px / 80px = 7 columns with extra

breathing room
● 768px / 80px = 9 columns with extra

breathing room
● 960px / 80px = 12 columns

Media Queries in HTML
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 320px)”
href="320-and-smaller.css" />

Media Queries in CSS
@media screen and (max-width: 320px) {
#content, #nav, #sidebar {
width: 100%;
}
#banner {
display: none;
}
}

Flexible Content
● Images, Media
● Forms

img, iframe, embed, object, input, form {
max-width: 100%;
}

Tables
● Decide how to linearize your data and collapse or
hide <td>s as appropriate.

IE8 and Lower
● Polyfill: a javascript shim that replicates the
standard API for older browsers (e.g. for media
queries, border radius, etc).
● respond.js

● adapt.js – doesn’t serve stuff until it can be used

by the browser (good for bandwidth)
● modernizr

Responsive Media Handling
● This is not solved yet. We’re still working on what a “best practice” is.
● Typically a JS script determines screen size and reports back to the server.

● Server then gives predetermined “low bandwidth” content.

● However, small screen doesn't always mean “low bandwidth.” It's just easier to

make that assumption.
● e.g. http://drupal.org/project/responsive_images

Your Responsive Toolkit
Check out your handout for
resources.

Summary
● Responsive web sites are “just” sites that squish
down politely.
● The technology is harder because of our
expectations of delivering perfect content.
● By using existing libraries we can provide an
acceptable experience to browsers that don't
support modern tech.

Drupal Themes
Provides “overrides” for any CSS or HTML markup in
Drupal core or contrib modules. Occasionally add
additional effects.

Base Themes Drupal
● Base themes are a set of improved theming
defaults over Drupal core.
● If your base theme doesn't improve Drupal, it's not
the right base theme for you.
● http://www.designtotheme.com/blog/base-themes

My Fave Base Themes
●
Zen has amazing documentation. Use with
Zen Grids for maximum efficiency.
●
NineSixty is my go-to theme for quickly banging
out just about any theme.
●
Fusion is my go-to theme when I will be handing off
the site to someone else to maintain who is tech
savvy and may need to update the layout later on.

Responsive + Drupal = ?
● Creating a responsive Drupal site can be as simple
as applying a single style sheet.
● http://drupal.org/project/domicile_responsive

Planning the Retrofit
● Audit the content on the site.
● Identify content break points.

● Determine page element

characteristics for each new width.
● Bonus: allocate time for retrofit based

on visitor stats.

Planning the Retrofit
● Identify the goal of every type of page.
“Beauty” is not a page goal. (And if it is, you’re doing it wrong.)

● Audit the content on the site.
● Identify content break points.

● Determine page element characteristics

for each new width.
● Bonus: allocate time for retrofit based on

visitor browser stats.

Content Audit
● Find all the different kinds of things you
display on the site.
● Make a spreadsheet if you have a big site.

● If relevant, note the contextual

relationships of content pieces (e.g. user
picture + video submission).

Identify Break Points
● Retrofit is (sort of) a luxury because
you have real content.
● Use content, not device sizes, to

determine break points.
● Stretch / expand your browser to

find where the design “breaks”.

Page Element Characteristics
● Navigation (reflow)
● Font sizes (allow to adapt)

● Imagery (is it necessary to

accomplish page goals?)

Flexible Layouts
●Add a new CSS file to your
theme that will override fixed-
pixel #ID and .class properties.
stylesheets[all][] =
responsivedefault.css

Media Queries
● Based on your content’s break
points, set up the media queries in
your new CSS file.
@media screen and (maxwidth: 960px) {}

● Assign new properties and values
for containers, fonts and
navigation.

Flexible Content
● Reset fixed-width content to be
fluid.
● Images, Forms, Video

● Maybe also data tables.

Viewport Sizes
● Create a new template file
html.tpl.php
● Add the relevant meta tags

● Don’t forget to clear Drupal’s

cache

Maybe Support IE
● Choose and use a polyfill.
● e.g. respond.js

Test Your Site
● Check content reflows.
● Check rich media resizes.

● Check navigation is usable.

● Adjust CSS if necessary.

Retrofit Summary
● Define your goals for each page.
● Ensure your page goals can be

met for a variety of device sizes.
● Apply relevant CSS media

queries to ensure content
“squishes”.

Get It For Yourself
The responsive Drupal theme, Alloy, is
available from:
http://drupal.org/project/alloy

Fusion
● Uses 960gs with 12 columns by default.
● Uses more than just regions for layout.
● Uses “skins” to alter the properties of
blocks for layout.
● Most configuration done through the
admin interface.
● Well documented.

Disclaimer
Fusion is my favourite GUI-based base
theme.
● I love their team of developers.
● The skins are great for clients who want
to extend their site.
● They don’t rush to market with the latest
feature. They get it right the first time.

Responsive Features
● Flexible layouts.
● Sane media queries with four layouts.
● Context-aware forms. Need to add responsiveness
for rich media.
● Supports older browsers with polyfill css3-
mediaqueries.js
● Focuses on “show all” approach, so there are no
hidden elements eating up bandwidth.

Layouts
●
Desktop only screen and (min-width:1200px)
●
Tablet (landscape) only screen and (max-device-width: 1024px) and
(orientation:landscape), only screen and (min-width:960px) and (max-
width:1199px) and (min-device-width: 1100px)

●
Tablet (portrait) only screen and (max-device-width: 1024px) and
(orientation:portrait), only screen and (min-width:768px) and (max-width:959px)
and (min-device-width: 1100px)

●
Mobile only screen and (max-width:759px)
● These can all be easily adjusted in the UI.

Regions + Blocks
● Fusion relies on the 960gs for its
regions and block
configurations.
● You may subdivide any region

into more columns by assigning
the width of a block.

Alloy Responsive
● Fusion compresses the wireframe for
desktop -> tablet.
● The mobile layout is linearized.
● You can choose the position of the sidebars
through the UI for each of the layouts.
● With additional CSS you might want to
collapse / linearize regions for the the tablet –
portrait display.

Navigation
● Using superfish JS library.
● No additional adjustments are made

for mobile-friendly navigation.
● You can make these adjustments

based on the Domicile retrofit.
● Or look at the beta superfish options

for touch-friendly navigation.

Give Aways!

@emmajanedotnet
emma@designtotheme.com

www.responsivewebdesignguild.com

Responsive Web Design for Drupal, CMS Expo

More Related Content

Viewers also liked

Similar to Responsive Web Design for Drupal, CMS Expo

More from Emma Jane Hogbin Westby

Recently uploaded

Responsive Web Design for Drupal, CMS Expo