SlideShare a Scribd company logo

Designing and Theming Drupal for Mobile Devices

•
•
D
David Lanier

Have you noticed how a site can look great on your computer, but when viewing it on a mobile device it's unreadable, ugly, and takes forever to load? Maybe you're designing a site, or you already have one or more sites. Now is the time to make it friendlier for mobile devices such as iPhone, Android, and others. This session covers design considerations if you are still in the design phase, as well as demonstrate techniques for adding a mobile interface for your existing sites.

1 of 44
Download to read offline
Theming and Designing for Mobile Devices David Lanier http://twitter.com/nadavoid Blue Tent Marketing http://www.bluetentmarketing.com
Introduction and Outline • About how to think about mobile design • About how to approach your theming tasks • A touch of implementation near the end
How big of a deal is mobile stuff? • 418 Million mobile internet users in Europe (David Moore) • US Usage doubled in 2009 (David Moore) • How many of you use a smartphone or internet connected mobile device? (iPhone, Droid, BlackBerry)
Stats
Stats
How big of a deal is it to YOU? • Look at stats for your current sites. • What percentage of your visitors are mobile? • How does that compare to last year? • What are the most common mobile devices to visit your site? • How do their traffic patterns compare?
What should I think about? • The Visitor • Their needs and objectives • In and out, looking for something, quick results • Base this on the data you can gather from your visitors
What should I think about? • The Technology • Slow transfer speeds • Often there are fees for data transfer • Small screens (100 x 80 to 480 x 320) • Fewer features (no flash, limited javascript, bookmarking, clicking vs tapping) • Again, base this on data you gather from your visitors
What’s the big idea? • What is the one main goal of your site for you? • Sell a product? • Distribute information? • Get a contact or lead? • Establish an image? • Provide availability information? (rentals, flights) • And not just your mobile site. What’s the main point of your main site?
Approaches • 1. Solid foundation of logical markup and other good practices • Or put it this way: a mobile friendly desktop theme • Allows for graceful degradation • Allows repurposing of content to happen more logically and easily • You can’t know ALL of the possible destination devices -- the fridge computer, and the talking computer in your car
Approaches • 2. CSS that adjusts for smaller screens -- “media queries” • <link media=”screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”mobile.css” /> • http://www.alistapart.com/articles/responsive-web-design/ • Great for designs that are minimal to begin with
Approaches • 3. Different theme, same content • The theme is altogether different • Content from the same site is displayed in this theme • Content is optimized for mobile delivery (smaller & fewer images, leaner HTML, minimal javascript and CSS)
Approaches • 4. Completely separate site • Completely different content, only lightly related to the desktop site. • Separate theme. • Wouldn’t even have to be a Drupal site, necessarily. • Redirect mobile users to this other site by auto detection or by user choice.
Approaches, the guiding principles • Reduce markup • Reduce content • Optimize for the mobile user
How to think • Think in terms of “panes” rather than “pages” • Focus on single column layouts, rather than multiple columns. • What do I want to keep? (rather than: What do I want to eliminate) • What is the one most important user action?
A little experiment • Which sites have mobile versions available? • For the ones that do, notice what they chose to keep. • Notice the design elements.
Better Homes and Gardens?
Better Homes and Gardens?
Kayak?
Kayak?
Work at Play?
Work at Play?
Work at Play?
Work at Play?
Verizon Wireless?
Verizon Wireless?
mobiForge?
mobiForge?
Apple?
Apple?
Hicks Design?
Hicks Design?
Design Issues • Forms: minimal & simple (limited screen space) • Links, anything clickable, make a large clickable area • Scrolling in only one direction. Scrolling a long pane is OK, but if you have to scroll left and right too? Not so good.
Implementation Issues • Device detection -- Is it mobile? How big is the screen? Is it a touch device? • Site selection and redirection – m.example.com, example.mobi, example.com/m • Content selection and optimization
A Splash of Implementation • SonnenalpRealEstate.com (a development copy) • New theme: .mobi • Conditionally switch theme: mobile_tools • Custom home page – panels variant with php snippet – hook_boot() in a custom module • New top menu
SonnenalpRealEstate.com
PHP Snippet • Using the mobile_tools module • In a Panels Selection Rule if (module_exists('mobile_tools')) $device = mobile_tools_is_mobile_device(); } else { return FALSE; } if ($device['type'] == 'mobile' && $device['group'] != 'ipad') { return TRUE; } else { return FALSE; } • In a Custom Module function MYMODULE_boot() { if (module_exists('mobile_tools')) { $device = _mobile_tools_is_mobile_device(); if ($device['type'] == 'mobile') { global $conf; $conf['site_frontpage'] = 'mobile_frontpage'; } } }
Takeaways • Much of this work has more to do with architecture and planning and usability than about visual aesthetics. • There are some good implementation techniques for Drupal, but there is no complete and ready to go solution. Your developer must assemble elements that meet the mobile needs of your site and visitors.
Drupal Modules • mobile_tools • mobile_redirects -- a module that Bob Christenson is working on, only at github currently. • idrupal -- for managing a drupal site by iphone ( + idrupal_ui theme) • wurfl -- for device detection • browscap -- for device detection • mobile_theme -- simply switches theme when it detects a mobile device • mobileplugin -- device detection, redirection, automatic content optimization
Drupal Modules (more to look at) • context • section • rules • domain • subdomain • spaces • ds (display suite) plus views or panels to override default node display
Drupal Themes • .mobi -- very lean • mobile -- very lean • nokia_mobile -- looks nice right away • iui -- provides an iPhone-like interface • iwebkit • mobilewebkit -- only at hedindesign.com
Design, testing, and development resources • iphonetester.com • User Agent Switcher -- addons.mozilla.org/en-US/firefox/ addon/59/ • jqtouch.com • iphone stencils -- mortenjust.com/2010/05/02/iphone- wireframe-stencils-for-google-docs/ • Mobile Design and Development, O’Reilly, Brian Fling • noupe.com/how-tos/mobile-web-design-tips-and-best- practices.html • mobiledrupal.com/content/overview-mobile-modules-drupal
Bonus Resources • Slides from David Moore’s mobile presentation -- http:// crookednumber.com/sites/crookednumber.com/files/ mobile101.pdf (more details on implementation) • mobiforge.com -- discussions and resources on all things mobile. (and their site is in Drupal) • Mobile Analytics – google.com/analytics – code.google.com/mobile/analytics/docs/web/ • handsetdetection.com -- “Mobile Website Redirection | Mobile Analytics | Handset Detection” • delicious.com/nadavoid/mobile
Theming and Designing for Mobile Devices David Lanier http://twitter.com/nadavoid Blue Tent Marketing http://www.bluetentmarketing.com

More Related Content

Designing and Theming Drupal for Mobile Devices

  • 1. Theming and Designing for Mobile Devices David Lanier http://twitter.com/nadavoid Blue Tent Marketing http://www.bluetentmarketing.com
  • 2. Introduction and Outline • About how to think about mobile design • About how to approach your theming tasks • A touch of implementation near the end
  • 3. How big of a deal is mobile stuff? • 418 Million mobile internet users in Europe (David Moore) • US Usage doubled in 2009 (David Moore) • How many of you use a smartphone or internet connected mobile device? (iPhone, Droid, BlackBerry)
  • 6. How big of a deal is it to YOU? • Look at stats for your current sites. • What percentage of your visitors are mobile? • How does that compare to last year? • What are the most common mobile devices to visit your site? • How do their traffic patterns compare?
  • 7. What should I think about? • The Visitor • Their needs and objectives • In and out, looking for something, quick results • Base this on the data you can gather from your visitors
  • 8. What should I think about? • The Technology • Slow transfer speeds • Often there are fees for data transfer • Small screens (100 x 80 to 480 x 320) • Fewer features (no flash, limited javascript, bookmarking, clicking vs tapping) • Again, base this on data you gather from your visitors
  • 9. What’s the big idea? • What is the one main goal of your site for you? • Sell a product? • Distribute information? • Get a contact or lead? • Establish an image? • Provide availability information? (rentals, flights) • And not just your mobile site. What’s the main point of your main site?
  • 10. Approaches • 1. Solid foundation of logical markup and other good practices • Or put it this way: a mobile friendly desktop theme • Allows for graceful degradation • Allows repurposing of content to happen more logically and easily • You can’t know ALL of the possible destination devices -- the fridge computer, and the talking computer in your car
  • 11. Approaches • 2. CSS that adjusts for smaller screens -- “media queries” • <link media=”screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”mobile.css” /> • http://www.alistapart.com/articles/responsive-web-design/ • Great for designs that are minimal to begin with
  • 12. Approaches • 3. Different theme, same content • The theme is altogether different • Content from the same site is displayed in this theme • Content is optimized for mobile delivery (smaller & fewer images, leaner HTML, minimal javascript and CSS)
  • 13. Approaches • 4. Completely separate site • Completely different content, only lightly related to the desktop site. • Separate theme. • Wouldn’t even have to be a Drupal site, necessarily. • Redirect mobile users to this other site by auto detection or by user choice.
  • 14. Approaches, the guiding principles • Reduce markup • Reduce content • Optimize for the mobile user
  • 15. How to think • Think in terms of “panes” rather than “pages” • Focus on single column layouts, rather than multiple columns. • What do I want to keep? (rather than: What do I want to eliminate) • What is the one most important user action?
  • 16. A little experiment • Which sites have mobile versions available? • For the ones that do, notice what they chose to keep. • Notice the design elements.
  • 17. Better Homes and Gardens?
  • 18. Better Homes and Gardens?
  • 33. Design Issues • Forms: minimal & simple (limited screen space) • Links, anything clickable, make a large clickable area • Scrolling in only one direction. Scrolling a long pane is OK, but if you have to scroll left and right too? Not so good.
  • 34. Implementation Issues • Device detection -- Is it mobile? How big is the screen? Is it a touch device? • Site selection and redirection – m.example.com, example.mobi, example.com/m • Content selection and optimization
  • 35. A Splash of Implementation • SonnenalpRealEstate.com (a development copy) • New theme: .mobi • Conditionally switch theme: mobile_tools • Custom home page – panels variant with php snippet – hook_boot() in a custom module • New top menu
  • 37. PHP Snippet • Using the mobile_tools module • In a Panels Selection Rule if (module_exists('mobile_tools')) $device = mobile_tools_is_mobile_device(); } else { return FALSE; } if ($device['type'] == 'mobile' && $device['group'] != 'ipad') { return TRUE; } else { return FALSE; } • In a Custom Module function MYMODULE_boot() { if (module_exists('mobile_tools')) { $device = _mobile_tools_is_mobile_device(); if ($device['type'] == 'mobile') { global $conf; $conf['site_frontpage'] = 'mobile_frontpage'; } } }
  • 38. Takeaways • Much of this work has more to do with architecture and planning and usability than about visual aesthetics. • There are some good implementation techniques for Drupal, but there is no complete and ready to go solution. Your developer must assemble elements that meet the mobile needs of your site and visitors.
  • 39. Drupal Modules • mobile_tools • mobile_redirects -- a module that Bob Christenson is working on, only at github currently. • idrupal -- for managing a drupal site by iphone ( + idrupal_ui theme) • wurfl -- for device detection • browscap -- for device detection • mobile_theme -- simply switches theme when it detects a mobile device • mobileplugin -- device detection, redirection, automatic content optimization
  • 40. Drupal Modules (more to look at) • context • section • rules • domain • subdomain • spaces • ds (display suite) plus views or panels to override default node display
  • 41. Drupal Themes • .mobi -- very lean • mobile -- very lean • nokia_mobile -- looks nice right away • iui -- provides an iPhone-like interface • iwebkit • mobilewebkit -- only at hedindesign.com
  • 42. Design, testing, and development resources • iphonetester.com • User Agent Switcher -- addons.mozilla.org/en-US/firefox/ addon/59/ • jqtouch.com • iphone stencils -- mortenjust.com/2010/05/02/iphone- wireframe-stencils-for-google-docs/ • Mobile Design and Development, O’Reilly, Brian Fling • noupe.com/how-tos/mobile-web-design-tips-and-best- practices.html • mobiledrupal.com/content/overview-mobile-modules-drupal
  • 43. Bonus Resources • Slides from David Moore’s mobile presentation -- http:// crookednumber.com/sites/crookednumber.com/files/ mobile101.pdf (more details on implementation) • mobiforge.com -- discussions and resources on all things mobile. (and their site is in Drupal) • Mobile Analytics – google.com/analytics – code.google.com/mobile/analytics/docs/web/ • handsetdetection.com -- “Mobile Website Redirection | Mobile Analytics | Handset Detection” • delicious.com/nadavoid/mobile
  • 44. Theming and Designing for Mobile Devices David Lanier http://twitter.com/nadavoid Blue Tent Marketing http://www.bluetentmarketing.com