Your SlideShare is downloading. ×
0
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Briding the Gap between Desktop and Mobile publishing

33,546

Published on

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

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

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
33,546
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
101
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Bridging the Gap Between Desktop and Mobile Publishing with Drupal<br />Drupalcon London 2011Tom Deryckere <br />twom<br />
    • 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. About Me<br />Started developing Drupal sites to share Sheet Music:<br /><ul><li>www.guitarfiles.be (D5)
    • 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. 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. Complete site available mobile (high end devices)</li></li></ul><li>Modules maintained<br />Mobile<br /><ul><li>Mobile Tools
    • 7. Wurfl
    • 8. Bango Metrics</li></ul>Other<br /><ul><li>Foursquare Connect
    • 9. Soundcloud Connect</li></ul>Abandoned<br /><ul><li>Osmobi
    • 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.
    • 12. ConsumerSearch Mobile Traffic<br />Desktop<br />Mobile<br /><ul><li>5% mobile traffic in 2010
    • 13. Today 10.49% mobile traffic
    • 14. Slow but steady increase in mobile traffic
    • 15. CPC is higher for mobile
    • 16. CTR is typically lower</li></li></ul><li>Specifics of the mobile site<br /><ul><li>1 url for mobile and desktop
    • 17. We deliver the same content for mobile and desktop
    • 18. Seamless experience
    • 19. Custom Akamai (caching) configfile
    • 20. Device detection using user agent string matching
    • 21. Mobile Theme
    • 22. Template overwrites
    • 23. Targetting high end devices
    • 24. Get rid of default js and css
    • 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.
    • 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. …get a strategy<br />Before thinking technology …<br />
    • 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. 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. STAGES OF CREATING A MOBILE PROJECT<br />
    • 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. Adoption within the Drupal Community<br />
    • 34. Main functionality provided by Drupal modules<br /><ul><li>Device Detection
    • 35. Theme switching
    • 36. Redirecting (+cookies)
    • 37. Mobile Themes
    • 38. Integration with other modules
    • 39. Context
    • 40. Panels
    • 41. Views
    • 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. Architecting for mobile<br />
    • 44. CREATING AN APPLICATION WITH DRUPAL BACKEND<br />
    • 45. CASE STUDY: MEDIUM-SIZED NON-PROFIT <br /><ul><li>Give access to information to members on all devices
    • 46. Focus on availability of content
    • 47. Consistency of design across platforms is important
    • 48. No specific contextual mobile functionality
    • 49. Value device reach more than design</li></ul>Mobile specific<br />Website size<br />
    • 50. Creating a responsive template<br /><ul><li> Media Queries
    • 51. Fluid CSS
    • 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. 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. Creating a Mobile and Desktop Template<br /><ul><li>Create a theme specific for mobile and desktop
    • 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. 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. 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. OVERVIEW ARCHITECTURE<br />App<br />Responsive<br />Separate templates<br />
    • 59. Your Drupal friends (and enemies)<br />Context<br />Panels<br />Theming layer<br />Views<br />MobileTools<br />
    • 60. Context Module<br />
    • 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. Context: Mobile Context<br />Provided by Mobile Tools<br />
    • 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. Desktop context<br />
    • 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. Views<br />
    • 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. Use multiple displays with same path<br />Configure access restrictions<br />
    • 69. Panels<br />
    • 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. Create variant<br />
    • 72. Mobile selection rule<br />
    • 73. Save panel<br />
    • 74. Create your mobile panel (as usual)<br />
    • 75. Theming<br />override<br />Cleanup CSS / JS<br />Offen struggle with contrib modules<br />Create separate mobile theme<br />
    • 76. Lot’s of things to say about this<br />Responsive/adaptive design<br />CSS3<br /><ul><li>Gradients
    • 77. Rounded corders
    • 78. Flexible grids
    • 79. Media queries …</li></ul>HTML5<br /><ul><li>Caching
    • 80. Local storage
    • 81. Geo
    • 82. …</li></li></ul><li>Mobile Tools<br />
    • 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. 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. 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. Set viewportto device width
    • 87. Do notallowzooming</li></ul><link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png><br />
    • 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. 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. Caching<br />Device detection?<br />Caching often happens outside Drupal!<br />
    • 91. Caching strategies<br />All Drupal (with or without memcache)<br /><ul><li>Drupal stores pages in the page cache
    • 92. In hook_boot() device can be detected
    • 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. Need for specific Varnish/Akamai config files</li></ul>Drupal + Boost<br /><ul><li>Drupal is not called for cached pages
    • 95. Need for specific .htaccess file </li></li></ul><li>Q&A and Testing<br />
    • 96. Testing<br />Test all your targeted devices<br />Simulators<br /><ul><li>iPhone simulator /Android Simulator
    • 97. Blackberry Simulators
    • 98. Opera Mini Simulator</li></ul>Device banks<br /><ul><li>Nokia Remote Access
    • 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. Test on task completion
    • 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. Questions?<br />
    • 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 />

    ×