mobile strategies for drupal (ny drupalcamp6)
DESCRIPTION
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.comTRANSCRIPT
Mobile Strategies for DrupalDrupalcamp6 NYC 2009p p
Tom DeryckereSoftware Architect
Goal of the session:Goal of the session: Strategy for making Drupal a mobile CMS
CORE Contrib
2
Goals
1 D l i t ll ti t i i M bil d D kt1 Drupal installation containing Mobile and Desktop content ( = real content management)
Easy transformation of Desktop theme to mobileEasy transformation of Desktop theme to mobile theme ( = appropriate content adaptation)
Optimize mobile themesp
Decide on functionality from within Drupal ( = cut chaos on mobile devices)
Tweak layouting within drupal (reorganise your site)
Lead traffic from Destkop to Mobile siteLead traffic from Destkop to Mobile site
Make the mobile development process
3
p pless painfull!!
« Drupal is mobile friendly but doesnot leverage the mobile web yet. This
is because the content is wellstructure, but no detection or adaptation is available or hasadaptation is available or has
been tested. »
4
SirunaMobile Architects
Unique Content adaptation engine and mobile authoring toolg
Software as a service
Repurposing of content
Open Source with commercial licensep
Integration with Drupal possible
Siruna is no drupal shop: we provide technology and services for web agencies and developers
5
services for web agencies and developers
The Siruna platformp
6
Adaptation engine: p gproxy to the mobile user
Mobile URL D kt URLMobile URL Desktop URL
DNS
AdaptationAdaptation engine
7
Website / XML stream
Adaptation engine:p gAtomic adaptations
Mobile URL Desktop URL
Atomic adaptations
Website / XML streamAdaptation
engine
adaptations
8
Siruna hast the ambition to become the leading open source platform and
service provider in mobile web papplications based upon its mobile
internet gatewayinternet gateway
(So no Drupal shop)9
Going mobile, where is the gcomplexity?
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
Drupal mobile statep
Many attempts
Focus on Providing mobile themes (e.g. iUI)Th it hiTheme switchingMobile payments
Not a lot of demos
General no proven long term strategyGeneral no proven long term strategy
An overview on
11http://mobiledrupal.com/content/overview-mobile-modules-drupal
Proposition:p4 step strategy
Device Detection(Mobile device, desktop, PSP, ...)
Switching(Make sure the user gets access to the best site)
Functionality + content(Wh f i li d i l f h d i )(What functionality and content is relevant for the device)
Theming(Layout, image resizing, navigation, table linearization)
12
Step 1: device detectionp
J t d t t if b bil d iJust detect if access by mobile device is enough (no device properties)
Some PHP code available$ SERVER['HTTP USER AGENT'], $_ [ _ _ ],$_SERVER['HTTP_ACCEPT'], ...
UAprof Wurfl give also information onUAprof, Wurfl give also information on device characteristics
http://www.developershome.com/wap/detection/detection.asp?page=intro
13
Step 2, 3 and 4: psome architectures
Legend
Mobile module (new proposed)
Drupal core & contribDrupal core & contrib
External system (e.g. Siruna transcoder)
14
Scenario A: theme switchingg
Common urlCommon url
Step 1 & 2
Device detection + Theme switching (e.g. Mobit, Accessibility, Mobile Theme)
Step 1 & 2
Step 3 & 4Mobile theme Desktop theme
1515
Scenario A: theme switchingg
Pro:Simple setup (no DNS settings needed)Simple setup (no DNS settings needed)Seamless transistion to mobile site for the visitor
Contra:User cannot choose to see mobile or desktop Use ca ot c oose to see ob e o des topsite (e.g. Iphone user is not able to see advanced content on desktop site)No content adaptation service can be insertedNo content adaptation service can be insertedThe mobile Theme has to be very powerfull and needs lot of effort
16
Scenario b: use of seperate pmobile and desktop url
Mobile Device Detection(user notification of existence mobile (
version or automatic redirection) Step 1 & 2
Mobile URL Desktop URL
Th it hi b d lTheme switching based on url
Step 3 & 4D k h17
Step 3 & 4Mobile theme Desktop theme
Scenario B: use of seperate pmobile and desktop url
ProUser is free to choose what to seecompliance with practise of providing acompliance with practise of providing a m.* or *.mobi domain
ContraNeeds setup of DNS entriesNeeds setup of DNS entries
18
Mobile device dection module Mobile device dection module
Screenshot configuration panel: See demo
19
Scenario C
Mobile Device Detection
Step 1 & 2
Mobile URL Desktop URL
DNS
Transcoding
DNS
Drupal preprocessing Step 3 & 4
1 Drupal installation
20
Scenario C
Pro Flexible and modular1 th 1 CMS th l lti l tf bli hi1 theme, 1 CMS: the real multi-platform publishing experienceFunctionality and content selection possible in D l (P i )Drupal (Preprocessing) Correct adaptation possible targetting all devices
CConMultiple components can seem complex
This is our target scenario to allow optimal mobile 21
g pexperiences! Supporting modules are being developed.
Supporting modulespp g
Mobile context in the permission systemMobile context in the permission system Roles of the mobile user gets replaced by a mobile roleAdministrator can use role permissions to toggle functionality
• Node Acces, Menu per role, etc ... Can help
M bil t t f i i= Mobile context for permissions
Adding mobile context in the theming systemfArrange blocks for the mobile user
Configure your theme for the mobile userThis is not building a complete new mobile theme,This is not building a complete new mobile theme, but adapting your desktop theme and content
22
Supporting modulespp gMobile permissions
Mobile permission configuration panel
23
Supporting modulespp gMobile permissions
Automatic creation of a mobile user allows fine grained permission toggling
24
Supporting modulespp gMobile permissions
With help of the node acces module:Page only available for mobile users
25
Supporting modulespp gTheming system
Duplicate your themeCopy dir of your theme and rename the dir and *.info filee.g. Garland -> mobile-garland, Garland/garland.info -> mobile-garland/mobile-garland.infomobile garland/mobile garland.infoYou have now two identical themes with a different name ☺
This manual “hack” is needed because there is no possibility to hook in the theme detection processp y p
Configure your blocks and general theme settings
26
Supporting modulespp gTheming system
Define the usage of a mobile theme (by using your existing deskop theme)
27
Supporting modulespp gTheming system
28
Supporting modulespp gTheming system
C fi th bl k f bilConfigure the blocks for you mobile context
29
Demo
Device detection and user notifications
Extension of the permission systemMobile user gets a mobile roleMobile user gets a mobile role
Extension of the theming systemg yCopy you theme as a mobile theme
I t ti ith t t d t tiIntegration with a content adaptation engine
30
Step 3: Content adaptationp p
Takes care of the device complexityDevice detectionDifferent screen sizesImage resizingVideo transcoding Mobile NavigationTable linearization / splittingp gPagination (reduction of vertical scrolling) HTML / CSS compliancyReducing download sizeJavascript (e g Running google analytics javascript serverside!)Javascript (e.g. Running google analytics javascript serverside!)xHTML and CSS cleanup ( =reducing download size)
Siruna can add location based services and the Insertion of mobile advertismentsadvertisments
http://mobiledrupal.com/content/make-your-drupal-blog-mobile
31
Content adaptation enginep gSiruna Composer
Pre ie ing XML based rulesPreviewing XML based rules(http://open.siruna.org/documentation/sitemap-api)
32
Siruna with drupal integrationp g
Transcoding(Sir na)(Siruna)
Siruna – Drupal integration
Drupal
Siruna with drupal pintegration In development!
Easily create adaptation filters for menu pages / content types / individual nodes
Reuse adaptations for the most ppopular themes
Previewing and testing
34
Two resulting modulesg
Mobile Tools moduleNotification / redirection / permission systemNotification / redirection / permission system / theming / ....Public soon!
Siruna integration moduleC fi ti f d lConfiguration from drupalGeneration snippets / adaptation repositoryConfigurations adaptation filters (e g FiltersConfigurations adaptation filters (e.g. Filters for specific content types, pages, menu items)
35
resources
Details and modules will be published soon on: http://www mobiledrupal comsoon on: http://www.mobiledrupal.com
Adaptation service:Adaptation service:http://open.siruna.orghttp://composer siruna comhttp://composer.siruna.com
http://groups.drupal.org/mobilep g p p g
Contact
Mail : [email protected]
Blog: http://www.mobiledrupal.com
Siruna: http://www.siruna.com, htt // ihttp://open.siruna.com
37