Mobile Strategies for
Drupal
Drupalcamp6 NYC 2009
   p     p

Tom Deryckere
Software Architect
Goal of the session:
Strategy for making Drupal a mobile CMS




                          Contrib
         CORE

        ...
Goals

1 Drupal i t ll ti
  D     l installation containing Mobile and Desktop
                          tii     M bil    ...
« Drupal is mobile friendly but does
not leverage the mobile web yet. This
    is because the content is well
    structur...
Siruna
Mobile Architects

 Unique Content adaptation engine and mobile
authoring tool
        g
 Software as a service
Rep...
The Siruna platform
           p




                      6
Adaptation engine:
   p          g
proxy to the mobile user
       Mobile URL               Desktop
                      ...
Adaptation engine:
   p         g
Atomic adaptations

                                              Desktop URL
          ...
Siruna hast the ambition to become
the leading open source platform and
    service provider in mobile web
             p
...
Going mobile, where is the
    g
complexity?

Device detection
 Different screen sizes
 Image resizing
 Video transcoding
...
Drupal mobile state
   p


  Many attempts
  Focus on
        Providing mobile themes (e.g. iUI)
        Theme switching
 ...
Proposition:
    p
4 step strategy
                         Device Detection
                 (Mobile device, desktop, PSP...
Step 1: device detection
   p


 Just detect
 J t d t t if access by mobile device
                     b      bil d i
is ...
Step 2, 3 and 4:
   p
some architectures


 Legend

              Mobile module (new proposed)



                   Drupa...
Scenario A: theme switching
                          g



                     Common url


                             ...
Scenario A: theme switching
                          g


 Pro:
         Simple setup (no DNS settings needed)
         Se...
Scenario b: use of seperate
                     p
mobile and desktop url



              Mobile Device Detection
       ...
Scenario B: use of seperate
                     p
mobile and desktop url


 Pro
     User is free to choose what to see
 ...
Mobile device dection module


                       Screenshot configuration panel:
                       See demo




...
Scenario C


                Mobile Device Detection
                                                   Step 1 & 2


     ...
Scenario C


   Pro
         Flexible and modular
         1 th
           theme, 1 CMS th real multi-platform publishing
...
Supporting modules
  pp     g

 Mobile context in the permission system
     Roles of the mobile user gets replaced by a m...
Supporting modules
  pp     g
Mobile permissions




             Mobile permission configuration panel




              ...
Supporting modules
  pp     g
Mobile permissions


              Automatic creation of a mobile user allows
             f...
Supporting modules
  pp     g
Mobile permissions




                     With help of the node acces module:
            ...
Supporting modules
  pp     g
Theming system


 Duplicate your theme
     Copy dir of your theme and rename the dir and *....
Supporting modules
  pp     g
Theming system




                 Define the usage of a mobile theme
                 (by ...
Supporting modules
  pp     g
Theming system




                     28
Supporting modules
  pp     g
Theming system


               Configure th bl k f you mobile
               C fi      the ...
Demo



 Device detection and user notifications
 Extension of the permission system
    Mobile user gets a mobile role

 ...
Step 3: Content adaptation
   p               p


 Takes care of the device complexity
       Device detection
        Dif...
Content adaptation engine
           p         g
Siruna Composer
                 XML based rules
  Previewing
  Pre ie in...
Siruna with drupal integration
               p       g



                  Transcoding
                    (Siruna)
    ...
Siruna with drupal
                 p
integration In development!


  Easily create adaptation filters for
 menu pages / c...
Two resulting modules
            g


 Mobile Tools module
     Notification / redirection / permission system
     / them...
resources



Details and modules will be published
soon on: http://www.mobiledrupal.com
          http://www mobiledrupal ...
Contact



Mail : Tom.Deryckere@siruna.com

Blog: http://www.mobiledrupal.com

Siruna: http://www.siruna.com,
 http://open...
Upcoming SlideShare
Loading in...5
×

Mobile Strategies for Drupal (NY DrupalCamp6)

3,416

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 http://www.mobiledrupal.com

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

No Downloads
Views
Total Views
3,416
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
107
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • 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 http://mobiledrupal.com/content/overview-mobile-modules-drupal 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 http://www.developershome.com/wap/d 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/garland.info -> mobile garland/mobile garland.info mobile-garland/mobile-garland.info 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 http://mobiledrupal.com/content/make-your-drupal-blog-mobile 31
    32. 32. Content adaptation engine p g Siruna Composer XML based rules Previewing Pre ie ing (http://open.siruna.org/documentation/sitemap-api) 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 http://www mobiledrupal com Adaptation service: http://open.siruna.org http://composer.siruna.com http://composer siruna com http://groups.drupal.org/mobile pg p p g Tom.Deryckere@siruna.com 36
    37. 37. Contact Mail : Tom.Deryckere@siruna.com Blog: http://www.mobiledrupal.com Siruna: http://www.siruna.com, http://open.siruna.com htt // i 37
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×