Mobile Drupal:                           Drupal       :                         Building a mobile theme                   ...
Traditional way to support mobile                         • Build a separate mobile website                         • Dete...
Responsive Design                         •   Single source of HTML                                       HTML            ...
Building a responsive mobile theme                         • Mobile First                         • Responsive Design     ...
Mobile device zooming                         •   Meta tags can control the scaling/zooming of                            ...
Flexible grids                         • Use percentages to set grid sizes                         •                      ...
Flexible images                         • Use max-width to constrain images within                           the flexible g...
How do we target                                     different screen sizes?                         •   With CSS2 media t...
3 ways to query                                    query                 1. <link rel="stylesheet" href="wide.css" media="...
Breakpoints                         320px — iPhone in portrait mode                                iPhone                 ...
Dealing with IE 6-8                               IE6~8                         ‣ IE8 and earlier don’t support media quer...
Dealing with IE 6-8                              IE6~8                         Conditional Stylesheets module:            ...
Dealing with IE 6-8                           IE6~8                         Scott Jehl, Filament Group                    ...
Responsive Design                         1. Flexible Grids                         2. Flexible Images                    ...
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-yo...
Upcoming SlideShare
Loading in …5
×

Mobile drupal: building a mobile theme

3,273 views

Published on

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

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,273
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile drupal: building a mobile theme

  1. 1. Mobile Drupal: Drupal : Building a mobile theme Drupal Camp Taipei 2011 John Albin WilkinsSaturday, July 9, 2011
  2. 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. 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- designSaturday, July 9, 2011
  4. 4. Building a responsive mobile theme • Mobile First • Responsive Design 1. Flexible Grids 2. Flexible Images 3. CSS3 Media Queries CSS3 Media QueriesSaturday, July 9, 2011
  5. 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. 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. 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. 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. 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. 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 desktopSaturday, July 9, 2011
  11. 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 polyfillsSaturday, July 9, 2011
  12. 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. 13. Dealing with IE 6-8 IE6~8 Scott Jehl, Filament Group Respond.js https://github.com/scottjehl/RespondSaturday, July 9, 2011
  14. 14. Responsive Design 1. Flexible Grids 2. Flexible Images 3. CSS3 Media Queries CSS3 Media QueriesSaturday, July 9, 2011
  15. 15. Zen 7.x-5.x-dev http://john.albin.net/Saturday, July 9, 2011
  16. 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.htmlSaturday, July 9, 2011

×