[DCTPE2011] 7) Mobile Drupal(英/中雙語)
0 likes2,025 views
The document discusses building responsive mobile themes for Drupal. It recommends a mobile-first responsive design approach using flexible grids, flexible images, and CSS3 media queries to target different screen sizes. It also provides examples of meta tags for controlling zoom levels and queries for targeting different devices. It addresses support for older IE browsers through conditional comments and polyfill scripts.
![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](https://image.slidesharecdn.com/mobile-drupal-110709035619-phpapp02-110814094115-phpapp02/85/DCTPE2011-7-Mobile-Drupal-8-320.jpg)
![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](https://image.slidesharecdn.com/mobile-drupal-110709035619-phpapp02-110814094115-phpapp02/85/DCTPE2011-7-Mobile-Drupal-9-320.jpg)
![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](https://image.slidesharecdn.com/mobile-drupal-110709035619-phpapp02-110814094115-phpapp02/85/DCTPE2011-7-Mobile-Drupal-12-320.jpg)
[DCTPE2011] 7) Mobile Drupal(英/中雙語)
- 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