Briding the Gap between Desktop and Mobile publishing


Published on

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi all,Thank you for attending this session on mobile Drupal. I have been talking about Mobile Drupal since beginning 2010 and must say that the mobile landscape has changed a lot.I hope you will enjoy this session and the other sessions that are being presented here at Drupalcon
  • The transistion has been in many areas and the industry has changed… So many of the things I told in the past
  • So before we really delf into
  • Mobile Development has many faces and covers many aspects of web and software development. Each topic has it’s own specific knowledge base and good knowledge of these topics is important to get the big picture and make the right deicsiions
  • I would like to give more context before delving into technology.In my eyes, one of the biggest mistakes is to focus on technology to soon in the project. This keeps the focus away on the real problem….Also the things I am going to talk about here can not be the ideal solutio for your problem
  • After having
  • 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> (D5)
    4. 4. (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, 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><br />Part of 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 />
    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 />
    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 /><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 /><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 /><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 /><br /><br /><br /><br />