mobile strategies for drupal (ny drupalcamp6)

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

Tom.Deryckere@siruna.com36

Contact

Mail : Tom.Deryckere@siruna.com

Blog: http://www.mobiledrupal.com

Siruna: http://www.siruna.com, htt // ihttp://open.siruna.com

37