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
2. Goal of the session:
Strategy for making Drupal a mobile CMS
Contrib
CORE
2
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. « 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. 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
7. Adaptation engine:
p g
proxy to the mobile user
Mobile URL Desktop
D kt URL
DNS
Adaptation
engine
Website / XML stream
7
8. Adaptation engine:
p g
Atomic adaptations
Desktop URL
Mobile URL
Atomic
adaptations
Adaptation
Website / XML stream
engine
8
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. 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. 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. 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. 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. Step 2, 3 and 4:
p
some architectures
Legend
Mobile module (new proposed)
Drupal core & contrib
External system (e.g. Siruna transcoder)
14
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. 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. 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. 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
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. 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. 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. Supporting modules
pp g
Mobile permissions
Mobile permission configuration panel
23
24. Supporting modules
pp g
Mobile permissions
Automatic creation of a mobile user allows
fine grained permission toggling
24
25. Supporting modules
pp g
Mobile permissions
With help of the node acces module:
Page only available for mobile users
25
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. Supporting modules
pp g
Theming system
Define the usage of a mobile theme
(by using your existing deskop theme)
27
29. Supporting modules
pp g
Theming system
Configure th bl k f you mobile
C fi the blocks for bil
context
29
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. 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. Content adaptation engine
p g
Siruna Composer
XML based rules
Previewing
Pre ie ing
(http://open.siruna.org/documentation/sitemap-api)
32
33. Siruna with drupal integration
p g
Transcoding
(Siruna)
(Sir na)
Siruna – Drupal integration
Drupal
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. 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. 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