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.

Mobile Strategies for Drupal (NY DrupalCamp6)


Published on

These slides have been presented at DrupalCamp NY (28 februari 2009) and contain some scenarios for going mobile with Drupal. A range of modules are being described that will be release in the coming weeks. For more information go to

Published in: Technology
  • Be the first to comment

Mobile Strategies for Drupal (NY DrupalCamp6)

  1. 1. Mobile Strategies for Drupal Drupalcamp6 NYC 2009 p p Tom Deryckere Software Architect
  2. 2. Goal of the session: Strategy for making Drupal a mobile CMS Contrib CORE 2
  3. 3. Goals 1 Drupal i t ll ti D l installation containing Mobile and Desktop tii M bil d D kt content ( = real content management) Easy transformation of Desktop theme to mobile theme ( = appropriate content adaptation) Optimize mobile themes p Decide on functionality from within Drupal ( = cut chaos on mobile devices) Tweak layouting within drupal (reorganise your site) Lead traffic from Destkop to Mobile site Make the mobile development p p process less painfull!! 3
  4. 4. « Drupal is mobile friendly but does not leverage the mobile web yet. This is because the content is well structure, but no detection or adaptation is available or has been tested. » 4
  5. 5. Siruna Mobile Architects Unique Content adaptation engine and mobile authoring tool g Software as a service Repurposing of content Open Source with commercial license p Integration with Drupal possible Siruna is no drupal shop: we provide technology and services for web agencies and developers 5
  6. 6. The Siruna platform p 6
  7. 7. Adaptation engine: p g proxy to the mobile user Mobile URL Desktop D kt URL DNS Adaptation engine Website / XML stream 7
  8. 8. Adaptation engine: p g Atomic adaptations Desktop URL Mobile URL Atomic adaptations Adaptation Website / XML stream engine 8
  9. 9. Siruna hast the ambition to become the leading open source platform and service provider in mobile web p applications based upon its mobile internet gateway (So no Drupal shop) 9
  10. 10. Going mobile, where is the g complexity? Device detection Different screen sizes Image resizing Video transcoding Mobile Navigation Table linearization / splitting Pagination (reduction of vertical scrolling) HTML / CSS compliancy Reducing download size Javascript (e.g. Running google analytics javascript serverside!) xHTML and CSS cleanup ( =reducing download size) g ) Usability .... 10
  11. 11. Drupal mobile state p Many attempts Focus on Providing mobile themes (e.g. iUI) Theme switching Th it hi Mobile payments Not a lot of demos General no proven long term strategy An overview on 11
  12. 12. Proposition: p 4 step strategy Device Detection (Mobile device, desktop, PSP, ...) Switching (Make sure the user gets access to the best site) Functionality + content (What f (Wh functionality and content is relevant for the device) i li d i l f hd i ) Theming (Layout, image resizing, navigation, table linearization) 12
  13. 13. Step 1: device detection p Just detect J t d t t if access by mobile device b bil d i is enough (no device properties) Some PHP code available $_ $ SERVER['HTTP_USER_AGENT'], [ ], $_SERVER['HTTP_ACCEPT'], ... UAprof, UAprof Wurfl give also information on device characteristics etection/detection.asp?page=intro 13
  14. 14. Step 2, 3 and 4: p some architectures Legend Mobile module (new proposed) Drupal core & contrib External system (e.g. Siruna transcoder) 14
  15. 15. Scenario A: theme switching g Common url Step 1 & 2 Device detection + Theme switching (e.g. Mobit, Accessibility, Mobile Theme) Desktop theme Mobile theme Step 3 & 4 15
  16. 16. Scenario A: theme switching g Pro: Simple setup (no DNS settings needed) Seamless transistion to mobile site for the visitor Contra: Use cannot choose User ca ot c oose to see mobile o des top ob e or desktop site (e.g. Iphone user is not able to see advanced content on desktop site) No content adaptation service can be inserted The mobile Theme has to be very powerfull and needs lot of effort 16
  17. 17. Scenario b: use of seperate p mobile and desktop url Mobile Device Detection (user notification of existence mobile ( version or automatic redirection) Step 1 & 2 Mobile URL Desktop URL Theme switching b Th it hi based on url d l Step 3 & 4 Desktop theme Dk h Mobile theme 17
  18. 18. Scenario B: use of seperate p mobile and desktop url Pro User is free to choose what to see compliance with practise of providing a m.* or *.mobi domain Contra Needs setup of DNS entries 18
  19. 19. Mobile device dection module Screenshot configuration panel: See demo 19
  20. 20. Scenario C Mobile Device Detection Step 1 & 2 Desktop URL Mobile URL DNS Transcoding Drupal preprocessing Step 3 & 4 1 Drupal installation 20
  21. 21. Scenario C Pro Flexible and modular 1 th theme, 1 CMS th real multi-platform publishing CMS: the l lti l tf bli hi experience Functionality and content selection possible in Drupal (P D l (Preprocessing) i) Correct adaptation possible targetting all devices Con C Multiple components can seem complex This is our target scenario to allow optimal mobile g p experiences! Supporting modules are being developed. 21
  22. 22. Supporting modules pp g Mobile context in the permission system Roles of the mobile user gets replaced by a mobile role Administrator can use role permissions to toggle functionality • Node Acces, Menu per role, etc ... Can help = M bil context f permissions Mobile t t for ii Adding mobile context in the theming system Arrange blocks f the mobile user for Configure your theme for the mobile user This is not building a complete new mobile theme, but adapting your desktop theme and content 22
  23. 23. Supporting modules pp g Mobile permissions Mobile permission configuration panel 23
  24. 24. Supporting modules pp g Mobile permissions Automatic creation of a mobile user allows fine grained permission toggling 24
  25. 25. Supporting modules pp g Mobile permissions With help of the node acces module: Page only available for mobile users 25
  26. 26. Supporting modules pp g Theming system Duplicate your theme Copy dir of your theme and rename the dir and *.info file e.g. Garland -> mobile-garland, Garland/ -> mobile garland/mobile mobile-garland/ You have now two identical themes with a different name ☺ This manual “hack” is needed because there is no p possibility to hook in the theme detection process y p Configure your blocks and general theme settings 26
  27. 27. Supporting modules pp g Theming system Define the usage of a mobile theme (by using your existing deskop theme) 27
  28. 28. Supporting modules pp g Theming system 28
  29. 29. Supporting modules pp g Theming system Configure th bl k f you mobile C fi the blocks for bil context 29
  30. 30. Demo Device detection and user notifications Extension of the permission system Mobile user gets a mobile role Extension of the theming system gy Copy you theme as a mobile theme Integration with a content adaptation It ti ith t t d t ti engine 30
  31. 31. Step 3: Content adaptation p p Takes care of the device complexity Device detection Different screen sizes Image resizing Video transcoding Mobile Navigation Table linearization / splitting p g Pagination (reduction of vertical scrolling) HTML / CSS compliancy Reducing download size Javascript (e.g. Running google analytics javascript serverside!) (e g xHTML and CSS cleanup ( =reducing download size) Siruna can add location based services and the Insertion of mobile advertisments 31
  32. 32. Content adaptation engine p g Siruna Composer XML based rules Previewing Pre ie ing ( 32
  33. 33. Siruna with drupal integration p g Transcoding (Siruna) (Sir na) Siruna – Drupal integration Drupal
  34. 34. Siruna with drupal p integration In development! Easily create adaptation filters for menu pages / content types / individual nodes Reuse adaptations for the most p popular themes Previewing and testing 34
  35. 35. Two resulting modules g Mobile Tools module Notification / redirection / permission system / theming / .... Public soon! Siruna integration module Configuration f C fi ti from drupal d l Generation snippets / adaptation repository Configurations adaptation filters (e g Filters (e.g. for specific content types, pages, menu items) 35
  36. 36. resources Details and modules will be published soon on: http://www mobiledrupal com Adaptation service: http://composer siruna com pg p p g 36
  37. 37. Contact Mail : Blog: Siruna:, htt // i 37