This is a dual English/Chinese slideshow for DrupalCamp Taipei covering Responsive Design techniques for Drupal themes.

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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

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

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

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

16. 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