Building Responsive Websites with Drupal

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 PROCESS1. Create a Flexible Width website2. Set limits for large screens if needed3. Figure out how content ﬁts best at different widths4. Add breakpoints to accommodate different widths5. 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 ARESPONSIVE DRUPAL THEME?

MEDIA QUERIES

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" />@media screen and (min-width: 480px) { .panels-pane { float: none; }}

DEVICE ORIENTATIONorientation: landscape orientation: portrait

OTHER MEDIA FEATURES• min-device-width• max-device-width• resolution• color• aspect-ratio

IN YOUR DRUPAL THEMEInline in your CSS ﬁles:@media screen and (min-width: 960px) { left-column { float: left; width: 60%; }}

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

BROWSER ISSUES

ANDROID DEVICESYou 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 queriesIn your .info ﬁle:stylesheets-conditional[lt IE 9][all][] = ie-960.css

DESIGNING RESPONSIVE WEBSITES

LAYOUT

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

evolvingweb.ca

owltastic.com

palentir.net

foodsense.is

workatplay.com

barackobama.com

HORIZONTAL MENUS

VERTICAL MENUS

smashingmagazine.com

workatplay.com

IMAGES

img { max-width: 100%;}

ADAPTIVE IMAGE MODULEAdd an ‘Adaptive effect’ to your image styles to resize images based on device detection drupal.org/project/adaptive_image

ADVERTISING!

bostonglobe.com

smashingmagazine.com

Form elements are too wide

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

jquerymobile.comdrupal.org/project/jquerymobile

TABLES

Avoid usingtables for grids

TABULAR DATA

Tabular Data

denver2012.drupal.org

OTHER IDEAS• Use Google Charts to show a pie chart instead of a table• Provide a CSV download of the data

PANELS

palentir.net

CSS TO ADJUST PANEL

SEARCH

drupalsun.com

BANNERS

happycoghosting.com

foodsense.is

IFRAMES

iframe { max-width: 100%;}

DECORATIVE ELEMENTS

css-tricks.com

CRAFTING YOUR CSS

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

TOOLS AND RESOURCES

DRUPAL THEMES & MODULES

RESPONSIVE THEMES• Omega Theme• Adaptive Theme• Square Grid• Twitter Bootstrap• Others...

DRUPAL MODULEShttp://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

CHALLENGES

canada.gc.ca

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

THANK YOU!

http://mvp-fil	25
https://si0.twimg.com	1
https://twitter.com	1
http://pinterest.com	1

Building Responsive Websites with Drupal

by evolvingweb

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 28

Statistics