Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

BUILDING RESPONSIVE
DRUPAL SITES

Drupal Consulting, Development, and Training
evolvingweb.ca | 514-844-4930

Suzanne Kennedy, Co-founder
@suzanne_kennedy

• Mobile First

• Responsive Design

• Building a Responsive Drupal Theme

• Designing Responsive Elements

• Tools & Resources

• Outstanding Challenges

WHAT IS MOBILE FIRST?

• Design
your website for the mobile experience
(phones, tablets, and everything in between)
• Allow the mobile experience to impact the
overall design

WHAT IS RESPONSIVE
DESIGN?

RESPONSIVE DESIGN

• Create
a single site and design framework that adapts to any
browser size

• Tweak the design at different browser sizes to improve the
experience

• Usually easier than building separate experiences for different
devices

http://mattkersley.com/responsive/

RESPONSIVE DESIGN
PROCESS
1. Create a Flexible Width website

2. Set limits for large screens if needed

3. Figure out how content ﬁts best at different widths

4. Add breakpoints to accommodate different widths

5. Deal with tricky elements like tables, grids, images, iframes,
etc.

WHAT WORKS ON MOBILE?

• Make links big enough to touch

• Show the most important information

• Show only the most important information

• Make the menu easily accessible

DESIGN APPROACHES

• Prototype rather than make mockups

• No pixel-perfect design

• Allow the design for mobile to impact the design for desktop

HOW TO BUILD A
RESPONSIVE DRUPAL THEME?

MEDIA QUERY COMPONENTS

• Media Type (i.e. screen or print)

• Media Feature (i.e. max-width, min-width)

TARGETING LARGE SCREENS
Use the min-width media feature

<link rel="stylesheet" type="text/css"
media="screen and (min-width: 960px)" href="/style.css" />

@media screen and (min-width: 960px) {
left-column {
float: left;
width: 60%;
}
}

TARGETING SMALL SCREENS
Use the max-width media feature

<link rel="stylesheet" type="text/css"
media="screen and (max-width: 480px)" href="/style.css" />

.panels-pane {
float: none;
}
}

DEVICE ORIENTATION
orientation: landscape orientation: portrait

OTHER MEDIA FEATURES
• min-device-width

• max-device-width

• resolution

• color

• aspect-ratio

IN YOUR DRUPAL THEME

Inline in your CSS ﬁles:
left-column {
float: left;
width: 60%;
}
}

IN YOUR DRUPAL THEME
In your .info ﬁle:
stylesheets[screen and (min-width: 960px)][] = css/screen-
min-960.css
stylesheets[screen and (max-width: 480px)][] = css/screen-
max-480.css
stylesheets[screen and (max-width: 240px)][] = css/screen-
max-240.css

stylesheets[screen and (min-width: 480px) and (max-width:
760px)][] = css/screen-480-760.css

ANDROID DEVICES
You need to set the viewport meta tag to make media
queries work on android devices.
<?php
$meta_viewport = array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width'
)
);
drupal_add_html_head($meta_viewport, 'viewport');
?>

INTERNET EXPLORER

Versions 6-8 don’t support media queries

In your .info ﬁle:
stylesheets-conditional[lt IE 9][all][] = ie-960.css

DESIGNING RESPONSIVE
WEBSITES

http://www.lukew.com/ff/entry.asp?1514

img {
max-width: 100%;
}

ADAPTIVE IMAGE MODULE
Add an ‘Adaptive effect’ to your image styles to
resize images based on device detection

drupal.org/project/adaptive_image

input,
select {
max-width: 100%;
}

jquerymobile.com
drupal.org/project/jquerymobile

OTHER IDEAS

• Use Google Charts to show a pie chart instead of a table

• Provide a CSV download of the data

iframe {
max-width: 100%;
}

CSS 3: FONT-FACE

@font-face {
font-family: Futura;
src: url("../fonts/Futura-Book.otf");
}

h2 {
font-family: Futura;
}

CSS3: BORDER-RADIUS
www.css3.info

#example {
-moz-border-radius: 15px;
border-radius: 15px;
}

OTHER CSS ADVICE

• Avoid absolute
positioning

• Avoid setting absolute
heights and widths

RESPONSIVE THEMES
• Omega Theme

• Adaptive Theme

• Square Grid

• Twitter Bootstrap

• Others...

DRUPAL MODULES
http://drupal.org/project/adaptive_image

http://drupal.org/project/touch_icons

http://drupal.org/project/jquerymobile

http://drupal.org/project/mobile_tools

ARTICLES

• Evolving Web: http://evolvingweb.ca/story/responsive-theming-
how-apply-responsive-design-techniques-drupal-theme

• Responsive Tables: http://css-tricks.com/responsive-data-tables/

•A List Apart: http://www.alistapart.com/articles/responsive-
web-design/

• Responsive Layouts http://www.lukew.com/ff/entry.asp?1514

OTHER RESOURCES

• Media
Features: http://www.w3.org/TR/css3-mediaqueries/
#media1

• Drupal Base Themes: http://groups.drupal.org/node/175234

• Testing
your responsive design: http://mattkersley.com/
responsive

•A List Apart Book: http://www.abookapart.com/products/
responsive-web-design

VIDEOS FROM DRUPALCON
• Mobile First: http://denver2012.drupal.org/keynote/luke-wroblewski

• Responsive Theming + Omega Theme: http://denver2012.drupal.org/
program/sessions/creating-responsive-and-mobile-ﬁrst-drupal-themes

• UX Design: http://denver2012.drupal.org/program/sessions/ux-design-
every-screen

• Responsive Techniques: http://denver2012.drupal.org/program/sessions/
rethinking-responsive-building-techniques-drupal

• Responsive Design: http://denver2012.drupal.org/program/sessions/
responsive-web-design-past-present-and-future

TRAINING PROGRAM
We offer public and private Drupal training sessions.
evolvingweb.ca/training

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (13)

Similar a Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Similar a Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012 (20)

Más de Suzanne Dergacheva

Más de Suzanne Dergacheva (15)

Último

Último (20)

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012