Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bridging the Gap Between Desktop and Mobile Publishing with Drupal<br />Drupalcon London 2011Tom Deryckere <br />twom<br />
Selling Mobile<br />Support for low end devices<br />Transcoding desktop sites<br />HTML5/CSS3<br />Closed Solutions<br />...
About Me<br />Started developing Drupal sites to share Sheet Music:<br /><ul><li>www.guitarfiles.be (D5)
www.wikifonia.org (D6)</li></ul>Moved to New York in 2009 and worked for Belgium mobile startup<br /><ul><li>OSMOBI provid...
High adoption / Low revenue</li></ul>In 2010 full time Drupal consultant for Northpoint Solutions (New York)<br /><ul><li>...
Complete site available mobile (high end devices)</li></li></ul><li>Modules maintained<br />Mobile<br /><ul><li>Mobile Tools
Wurfl
Bango Metrics</li></ul>Other<br /><ul><li>Foursquare Connect
Soundcloud Connect</li></ul>Abandoned<br /><ul><li>Osmobi
Osmobil Mobile Theme</li></li></ul><li>ConsumerSearch.com<br />Part of About.com and The New York Times<br />Find informat...
ConsumerSearch Mobile Traffic<br />Desktop<br />Mobile<br /><ul><li>5% mobile traffic in 2010
Today 10.49% mobile traffic
Slow but steady increase in mobile traffic
CPC is higher for mobile
CTR is typically lower</li></li></ul><li>Specifics of the mobile site<br /><ul><li>1 url for mobile and desktop
We deliver the same content for mobile and desktop
Seamless experience
Custom Akamai (caching) configfile
Device detection using user agent string matching
Mobile Theme
Template overwrites
Targetting high end devices
Get rid of default js and css
Some pages still go to desktop site (gradually add mobile pages)</li></li></ul><li>Mobile App?<br />Native<br />Arriving s...
The many faces of mobile<br />Mobile Testing<br />NativeApps<br />vs<br />(responsive) Design<br />Web Apps <br />and<br /...
…get a strategy<br />Before thinking technology …<br />
Support for which devices?<br />Cross platform?<br />Free service?<br />App store revenues?<br />Content repurposing?<br /...
Strategy<br />Technologies<br />Dedicated iPhone App for sale in the App Store<br />iOS / Services<br />Optimize reach by ...
STAGES OF CREATING A MOBILE PROJECT<br />
This Session: Drupal as a mobile CMS<br />Theming Layer<br />Services<br />Panels<br />Look at Drupal Core components <br ...
Adoption within the Drupal Community<br />
Main functionality provided by Drupal modules<br /><ul><li>Device Detection
Theme switching
Redirecting (+cookies)
Mobile Themes
Integration with other modules
Context
Panels
Views
Build modes</li></li></ul><li>Panels…<br />Highly customized….<br />CCK<br />Make a mobile version of your Desktop site<br...
Architecting for mobile<br />
CREATING AN APPLICATION WITH DRUPAL BACKEND<br />
CASE STUDY: MEDIUM-SIZED NON-PROFIT <br /><ul><li>Give access to information to members on all devices
Focus on availability of content
Consistency of design across platforms is important
No specific contextual mobile functionality
Value device reach more than design</li></ul>Mobile specific<br />Website size<br />
Creating a responsive template<br /><ul><li> Media Queries
  Fluid CSS
  Context Module</li></ul>Easy setup<br />Large reuse of existing infrastructure<br />Multi-content distribution<br />No m...
Use Case: Product Company<br />Focus on getting crucial information available on mobile devices<br />- Product information...
Creating a Mobile and Desktop Template<br /><ul><li>Create a theme specific for mobile and desktop
Share functionality across mobile and desktop </li></ul>Easy to setup<br />Large reuse of existing infrastructure<br />Mul...
Use Case: Big Hospital<br />Highly-contextual mobile site<br />- Navigation through campus<br />- Make simple appointments...
Multisite installation<br /> Create a theme specific for mobile and desktop<br /> Maintain separate configurations for mob...
OVERVIEW ARCHITECTURE<br />App<br />Responsive<br />Separate templates<br />
Your Drupal friends (and enemies)<br />Context<br />Panels<br />Theming layer<br />Views<br />MobileTools<br />
Context Module<br />
Upcoming SlideShare
Loading in …5
×

Briding the Gap between Desktop and Mobile publishing

36,111 views

Published on

Presentation given during Drupalcon London 2011 on creating mobile websites with Drupal.

Published in: Technology
  • Be the first to comment

Briding the Gap between Desktop and Mobile publishing

  1. 1. Bridging the Gap Between Desktop and Mobile Publishing with Drupal<br />Drupalcon London 2011Tom Deryckere <br />twom<br />
  2. 2. Selling Mobile<br />Support for low end devices<br />Transcoding desktop sites<br />HTML5/CSS3<br />Closed Solutions<br />Open Standards<br />Highly Customized apps or websites <br />Android<br />People recall WML<br />2 years<br />iPhone Browser<br />Focus on High End<br />OperaMini<br />Audience already solved<br />Nokia/symbian<br />Android<br />Audience easily impressed<br />Small room<br />WML WTF?<br />Tables<br />Only Speaker<br />Many high end devices<br />Many specialists<br />Big room<br />
  3. 3. About Me<br />Started developing Drupal sites to share Sheet Music:<br /><ul><li>www.guitarfiles.be (D5)
  4. 4. www.wikifonia.org (D6)</li></ul>Moved to New York in 2009 and worked for Belgium mobile startup<br /><ul><li>OSMOBI provided mobile websites for > 1000 Drupal sites
  5. 5. High adoption / Low revenue</li></ul>In 2010 full time Drupal consultant for Northpoint Solutions (New York)<br /><ul><li>We pioneered several mobile sites and mobile apps for the pharmaceutical industry, hospitals, media industry and mayor mobile carriers</li></ul>In 2011 (now) Director of Technology at ConsumerSearch<br /><ul><li>Part of About.com, a business unit of the New York Times
  6. 6. Complete site available mobile (high end devices)</li></li></ul><li>Modules maintained<br />Mobile<br /><ul><li>Mobile Tools
  7. 7. Wurfl
  8. 8. Bango Metrics</li></ul>Other<br /><ul><li>Foursquare Connect
  9. 9. Soundcloud Connect</li></ul>Abandoned<br /><ul><li>Osmobi
  10. 10. Osmobil Mobile Theme</li></li></ul><li>ConsumerSearch.com<br />Part of About.com and The New York Times<br />Find information about consumer products<br />High quality content driven by dedicated editorial team<br />First D5 now D6<br />Great Drupal team!<br />Mobile website in 2011<br />“People search for information everywhere”<br />
  11. 11.
  12. 12. ConsumerSearch Mobile Traffic<br />Desktop<br />Mobile<br /><ul><li>5% mobile traffic in 2010
  13. 13. Today 10.49% mobile traffic
  14. 14. Slow but steady increase in mobile traffic
  15. 15. CPC is higher for mobile
  16. 16. CTR is typically lower</li></li></ul><li>Specifics of the mobile site<br /><ul><li>1 url for mobile and desktop
  17. 17. We deliver the same content for mobile and desktop
  18. 18. Seamless experience
  19. 19. Custom Akamai (caching) configfile
  20. 20. Device detection using user agent string matching
  21. 21. Mobile Theme
  22. 22. Template overwrites
  23. 23. Targetting high end devices
  24. 24. Get rid of default js and css
  25. 25. Some pages still go to desktop site (gradually add mobile pages)</li></li></ul><li>Mobile App?<br />Native<br />Arriving soon<br />Focus on very specific tasks and interactions<br />iPhone first, Android later<br />Complementary to mobile website!<br />
  26. 26.
  27. 27. The many faces of mobile<br />Mobile Testing<br />NativeApps<br />vs<br />(responsive) Design<br />Web Apps <br />and<br />Online / Offline<br />Media Queries<br />Usability<br /> & Navigation<br />Javascript Frameworks<br />jQuerySencha Touch<br />Sproutcore<br />Web Standards<br />HTML5 & CSS3<br />Location Based Apps<br />Product Development<br />Cross-Platform development<br />Multi-platform distribution<br />Mobile SEO<br />
  28. 28. …get a strategy<br />Before thinking technology …<br />
  29. 29. Support for which devices?<br />Cross platform?<br />Free service?<br />App store revenues?<br />Content repurposing?<br />Graphics intensive?<br />Content Driven?<br />Existing knowledge?<br />Current technology?<br />Budget?<br />Linkable?<br />Which functionality<br />Strategy<br />Technology<br />
  30. 30. Strategy<br />Technologies<br />Dedicated iPhone App for sale in the App Store<br />iOS / Services<br />Optimize reach by cross Platform Native App<br />Appcellerator/PhoneGap / Services<br />Browser based webapp for high end devices<br />HTML5/CSS3/Drupal<br />Browser based webapp all devices<br />XHTML/Drupal<br />Multi-platform website<br />Responsive/Adaptive design<br />
  31. 31. STAGES OF CREATING A MOBILE PROJECT<br />
  32. 32. This Session: Drupal as a mobile CMS<br />Theming Layer<br />Services<br />Panels<br />Look at Drupal Core components <br />Views<br />Multi-Sites<br />Caching<br />Context<br />
  33. 33. Adoption within the Drupal Community<br />
  34. 34. Main functionality provided by Drupal modules<br /><ul><li>Device Detection
  35. 35. Theme switching
  36. 36. Redirecting (+cookies)
  37. 37. Mobile Themes
  38. 38. Integration with other modules
  39. 39. Context
  40. 40. Panels
  41. 41. Views
  42. 42. Build modes</li></li></ul><li>Panels…<br />Highly customized….<br />CCK<br />Make a mobile version of your Desktop site<br />Views<br />…<br />Making a mobile only website<br />“Just” build a site. <br />
  43. 43. Architecting for mobile<br />
  44. 44. CREATING AN APPLICATION WITH DRUPAL BACKEND<br />
  45. 45. CASE STUDY: MEDIUM-SIZED NON-PROFIT <br /><ul><li>Give access to information to members on all devices
  46. 46. Focus on availability of content
  47. 47. Consistency of design across platforms is important
  48. 48. No specific contextual mobile functionality
  49. 49. Value device reach more than design</li></ul>Mobile specific<br />Website size<br />
  50. 50. Creating a responsive template<br /><ul><li> Media Queries
  51. 51. Fluid CSS
  52. 52. Context Module</li></ul>Easy setup<br />Large reuse of existing infrastructure<br />Multi-content distribution<br />No mobile first approach<br />Desktop-focused default themingbehaviorneedsmany changes to fit mobile context<br />Hard tocreate real mobile “experiences” or contextualapps<br />
  53. 53. Use Case: Product Company<br />Focus on getting crucial information available on mobile devices<br />- Product information<br />- Contact details<br />- Use cases<br /> No specific contextual functionality<br />- User tasks are similar as on desktop<br />Need for very high usability and nice design<br />- Good responsive design must attract customers<br />Mobile specific<br />Website size<br />
  54. 54. Creating a Mobile and Desktop Template<br /><ul><li>Create a theme specific for mobile and desktop
  55. 55. Share functionality across mobile and desktop </li></ul>Easy to setup<br />Large reuse of existing infrastructure<br />Multi-content distribution<br />No mobile first approach<br />Desktop-focused default theming behavior needs many changes to fit mobile context<br />Hard to create real mobile experiences or contextual apps<br />
  56. 56. Use Case: Big Hospital<br />Highly-contextual mobile site<br />- Navigation through campus<br />- Make simple appointments through mobile<br />- Shared content store<br />- Strip down some desktop functionality<br />Complex Information Architecture<br />Reuse of content needed<br />- Doctors’ contacts<br />- Divisions<br />- General information<br />Mobile specific<br />Website size<br />
  57. 57. Multisite installation<br /> Create a theme specific for mobile and desktop<br /> Maintain separate configurations for mobile and desktop<br />Room to create a highly-optimized mobile experience<br />Large reuse of existing infrastructure<br />Multi-content distribution<br />Harder to setup and maintain<br />
  58. 58. OVERVIEW ARCHITECTURE<br />App<br />Responsive<br />Separate templates<br />
  59. 59. Your Drupal friends (and enemies)<br />Context<br />Panels<br />Theming layer<br />Views<br />MobileTools<br />
  60. 60. Context Module<br />
  61. 61. Context<br />http://drupal.org/project/context<br />Provide a way to configure parts of your site based on certain parameters.<br />Flexible way to configure blocks on your website<br />E.g.: Configure blocks in your regions based on URL<br />
  62. 62. Context: Mobile Context<br />Provided by Mobile Tools<br />
  63. 63. Naming conventions<br />Use naming conventions (mobile_<name_desktop_context>)<br />Disable non mobile contexts using<br />~mobile_*<br />Or<br />Mobile context rule<br />
  64. 64. Desktop context<br />
  65. 65. Caveat <br />What if the region names are not corresponding?<br />=> Small plugin that loads the regions of the mobile theme when the context starts with “mobile”<br />
  66. 66. Views<br />
  67. 67. Views<br />Often very heavy on the “tables”<br />Requirement to provide a mobile view on the same path as the desktop view<br />e.g. /overview<br />
  68. 68. Use multiple displays with same path<br />Configure access restrictions<br />
  69. 69. Panels<br />
  70. 70. Panels<br />http://drupal.org/project/panels<br />Multipurpose tools to create flexible layouts<br />Possibility to overwrite pages such as nodes<br />Concept of variations:<br /><ul><li>Different panel configurations depending on the context</li></li></ul><li>Panels configuration<br />Create a panel for all these pages<br />
  71. 71. Create variant<br />
  72. 72. Mobile selection rule<br />
  73. 73. Save panel<br />
  74. 74. Create your mobile panel (as usual)<br />
  75. 75. Theming<br />override<br />Cleanup CSS / JS<br />Offen struggle with contrib modules<br />Create separate mobile theme<br />
  76. 76. Lot’s of things to say about this<br />Responsive/adaptive design<br />CSS3<br /><ul><li>Gradients
  77. 77. Rounded corders
  78. 78. Flexible grids
  79. 79. Media queries …</li></ul>HTML5<br /><ul><li>Caching
  80. 80. Local storage
  81. 81. Geo
  82. 82. …</li></li></ul><li>Mobile Tools<br />
  83. 83. Mobile Tools<br /> http://drupal.org/project/mobile_tools<br />Basic Functionality<br />Device detection<br />Device redirection<br />Theme switching <br />Detection of device groups<br />Mobile user roles<br />Force full view | mobile <br />Set custom homepage<br />Custom number of FrontPage nodes<br />Hide mobile browser scrollbar<br />Viewport header<br />Provide mobile build modes<br />Provide mobile contexts<br />Provide panel context<br />
  84. 84. Using Mobile Tools to configure mobile theme<br />Tell whento switch theme<br />1<br />Select the mobile theme<br />2<br />Additional mobile headers<br />3<br />
  85. 85. MOBILE-SPECIFIC HEADERS ADDED BY MOBILE TOOLS<br /><meta name = "viewport" content = "user-scalable=no, width=device-width, maximum-scale=1.0" /><br /><ul><li>Default iPhoneviewport is 900px
  86. 86. Set viewportto device width
  87. 87. Do notallowzooming</li></ul><link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png><br />
  88. 88. Configure Redirection<br />Choice to have site on two domains or one domain<br />Add URLs<br />1<br />Enable Redirection<br />2<br />Add Exceptions<br />3<br />
  89. 89. Override Redirection<br /> Give users control<br /> Add override arguments to your URL<br />?device=desktop<br />?device=mobile<br />?device=auto<br />?device=<device-group><br />http://mobile_tools.local?device=desktop<br />
  90. 90. Caching<br />Device detection?<br />Caching often happens outside Drupal!<br />
  91. 91. Caching strategies<br />All Drupal (with or without memcache)<br /><ul><li>Drupal stores pages in the page cache
  92. 92. In hook_boot() device can be detected
  93. 93. Mobile Tools has example code using page_cache_fastpath()</li></ul>Drupal + Varnish/Akamai<br /><ul><li>Drupal is not called for cached pages
  94. 94. Need for specific Varnish/Akamai config files</li></ul>Drupal + Boost<br /><ul><li>Drupal is not called for cached pages
  95. 95. Need for specific .htaccess file </li></li></ul><li>Q&A and Testing<br />
  96. 96. Testing<br />Test all your targeted devices<br />Simulators<br /><ul><li>iPhone simulator /Android Simulator
  97. 97. Blackberry Simulators
  98. 98. Opera Mini Simulator</li></ul>Device banks<br /><ul><li>Nokia Remote Access
  99. 99. Commercial solutions available</li></ul>Performance Testing<br />Speeds can vary from 70-135 Kbits/s while new 4G standards will allow for peak values up to 100 Mbit/s<br />Usability Testing<br /><ul><li>Evaluate your designs and improve
  100. 100. Test on task completion
  101. 101. Evaluate usage</li></li></ul><li>Know your devices upfront!<br />Enables good client communication. No surprises at the end<br />Know what to develop for<br />Know what to test<br />Different projects will have different lists<br />
  102. 102. Questions?<br />
  103. 103. Thank you<br />tom.deryckere@gmail.com<br />http://twitter.com/twom<br />http://www.mobiledrupal.com<br />http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal<br />

×