Mobile Drupal:
Drupal :
Building a mobile theme
Drupal Camp Taipei 2011
John Albin Wilkins
Saturday, July 9, 2011

Traditional way to support mobile
• Build a separate mobile website
• Detect mobile device
• Redirect to mobile site
This is really hard!
Saturday, July 9, 2011

Responsive Design
• Single source of HTML
HTML
• Responds to different viewport sizes
• First described by Ethan Marcotte’s article
Ethan Marcotte
“Responsive Web Design”
http://www.alistapart.com/articles/responsive-web-
design
Saturday, July 9, 2011

Building a responsive mobile theme
• Mobile First
• Responsive Design
1. Flexible Grids
2. Flexible Images
3. CSS3 Media Queries
CSS3 Media Queries
Saturday, July 9, 2011

Mobile device zooming
• Meta tags can control the scaling/zooming of
mobile devices
Meta tags
• More info:
http://davidbcalhoun.com/2010/viewport-metatag
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
Saturday, July 9, 2011

Flexible grids
• Use percentages to set grid sizes
•
.content { width: 62.5%; } // 5 grids
.sidebar { width: 37.5%; } // 3 grids
• Grid will grow/shrink with the screen size
/
• Target ÷ context = result
÷ =
Saturday, July 9, 2011

Flexible images
• Use max-width to constrain images within
the flexible grid.
max-width
• img, embed, iframe, object, video {
max-width: 100%;
}
Saturday, July 9, 2011

How do we target
different screen sizes?
• With CSS2 media types we could target different
classes of devices:
CSS2 media types class:
print, screen, handheld, all
• With CSS3 media queries we target device
capabilities.
CSS3 media queries
• [type] and ([query])
• all and (max-width: 768px)
Saturday, July 9, 2011

3 ways to query
query
1. <link rel="stylesheet" href="wide.css" media="screen
and (min-width: 992px)">
2. @import url(wide.css) screen and (min-width:
992px);
theme.info:
stylesheets[screen][] = file.css
stylesheets[screen and (min-width: 992px)][] = file.css
3. @media screen and (min-width: 992px) {
.selector { property: value; }
}
Saturday, July 9, 2011

Breakpoints
320px — iPhone in portrait mode
iPhone
480px — iPhone in landscape mode
iPhone
768px — iPad in portrait mode
iPad
992px — small laptop (minus browser chrome)
1200px — large desktop
Saturday, July 9, 2011

Dealing with IE 6-8
IE6~8
‣ IE8 and earlier don’t support media queries
IE8 media queries
1. They do support IE conditional comments
IE conditional comments
2. They do support JavaScript polyfills
JavaScript polyfills
Saturday, July 9, 2011

Dealing with IE 6-8
IE6~8
Conditional Stylesheets module:
http://drupal.org/project/conditional_styles
<!--[if lte IE 8]>
<link src="/css/layout/desktop.css">
<![endif]-->
Saturday, July 9, 2011

Dealing with IE 6-8
IE6~8
Scott Jehl, Filament Group
Respond.js
https://github.com/scottjehl/Respond
Saturday, July 9, 2011

Responsive Design
1. Flexible Grids
2. Flexible Images
3. CSS3 Media Queries
CSS3 Media Queries
Saturday, July 9, 2011

Zen 7.x-5.x-dev
http://john.albin.net/
Saturday, July 9, 2011

Related Topics
• HTML5
http://html5doctor.com/how-to-use-html5-in-your-
client-work-right-now/
• CSS3
http://www.css3.info
• Progressive enhancement
http://www.alistapart.com/articles/
understandingprogressiveenhancement
• JavaScript polyfills
http://remysharp.com/2010/10/08/what-is-a-polyfill
• Front-end Performance
http://developer.yahoo.com/performance/rules.html
Saturday, July 9, 2011