Basics of making mobilewebsites with Drupalwebsites with Drupal

Tom DeryckereSoftware Architect / Siruna

@twom

25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s

Technology Trends

From WAP to iMode to xHTML

Technology that works

From slow connections to fast connections

Network side TECHNOLOGY

5

Making content mobile

is the basis

Making mobile content

6

useful and usable

is the need

Mobile Web Applications that :

Work on a phone

Fit on a phone

Make SENSE on a phoneMake SENSE on a phone

Call to ACTION

and have REVENUE models

7

DrupalCon Paris:

http://drupalcon.siruna.com

Slate:

http://twom.slate.mobixx.eu

Examples (Drupal)

8

Garland mobile:

http://twom.garland.mobixx.eu

Marina:

http://twom.marina.mobixx.eu

Zen:

http://twom.zen.mobixx.eu

XIO:

http://xio.siruna.com

Examples (Drupal)

http://xio.siruna.com

http://portal.siruna.com

9

WHERE IS THE COMPLEXITY

10

Device fragmentation:− Millions of devices

− Different Operating systems

− Different capabilities

• Ex: screen sizes, javascript support, CSS / xHTML support, video support

− ...

Usability: make a fun and easy experience

Complexity

Usability: make a fun and easy experience− Content has to be easy to find

− Reduce scrolling (no horizontal scrolling)

− Make links clickable (not too small)

− Easy navigation structure that is easy to find

− ...

11

Convergence is coming

Javascript becomes more and more the standard

Desktop html works on mobile devices

On fragmentation

12

More interesting dataUnited States Handset Data - April 2009

Requests: 3,538,714,000

India Handset Data - April 2009

Requests: 447,079,855

480x320 px

176x220 px

240x320 px

320 x 240 px

13

480x320 px

Palm pre: 480 x 320

320 x 240 px

Source: AdMob

Optmization of download size− Network connections are not always optimal (between 50kb/s –

1,8Mbit/s

− Don’t let the user wait, don’t let him download content that he will

not use

Bring relevant content to the mobile user

Complexity

Bring relevant content to the mobile user− Understand what he will look for (think and plan well!!)

− Is not easy (especially for the customer)

14

Complexity

15

Simple (double) navigation

No video

Easy access to stories

SOME MORE EXAMPLES

16

Form a multi-column based site going towards a 1

column site

We are talking about generic designs

GeneralLogin or Register

17

Second navigation

New forum posts

New Comments

Sponsors etc ...

Rules of thumb

− No fixed margins

− No floats

− No big fixed fonts

− Reduce the usage of tables (or reduce the number of columns)

− Make a block with links to views like

Design

− Make a block with links to views like

• Most recent comments

• Most recent forum topics

− Remove node content from frontpage

− Replace the user login block by a link

− Navigation in a dropdown list works well

− No who is online, who is new kind of blogs (not relevant)

− You can make things sexy for iphone, android, ...

18

Examples

19

Examples

20

Examples

21

Examples

22

Examples

23

THE TOOLS

24

Many attempts in the comunity

Focus on − Providing mobile themes (e.g. iUI, mobile theme)

− Theme switching

− Mobile payments

Mobile modules for Drupal

− Mobile payments

Not a lot of demos

General no proven long term strategy

An overview on

25

http://mobiledrupal.com/content/overview-mobile-modules-drupal

Under my maintenance – Co-maintainers welcome!

http://drupal.org/project/mobile_tools(release 6.x-1.7)

http://drupal.org/project/siruna(release 6.x-1.0-beta)

Some Drupal modules

(release 6.x-1.0-beta)

http://drupal.org/project/wurfl(release 6.x-dev)

Planned:− Image resizing module

− Video transcoding solution (based on Media Mover)

− Providing some more mobile themes

26

Switching(Make sure the user gets access to the best site)

Device Detection(Mobile device, desktop, PSP, ...)

First define the flow (4 steps)

Theming

(Layout, image resizing, navigation, table linearization)

Functionality + content(What functionality and content is relevant for the device)

27

Device detection− Notify mobile users for the existence of a mobile site

− Automatically redirect mobile users to the mobile site

− Provide custom configurable message: e.g.: “View mobile |

classic”

− Support for Browscap, Wurfl and other third party device detection

User notification / redirection

− Support for Browscap, Wurfl and other third party device detection

modules

28

Mobile context in the permission system − Roles of the mobile visitor gets replaced by a mobile variant of his

normal roles

− Administrator can use role permissions to toggle functionality

• Node Acces, Menu per role, etc ... Can help

− = Mobile context for permissions

Mobile permissions

− = Mobile context for permissions

− Very powerfull tool to toggle functionality on your mobile site!

29

Theme switching (based on device group if needed)

Based on domain name or device detection

Switching per device group (Android, iPhone, etc ...)

Theme switching

30

Demo 1

31

Two main solutions

Create you own themes (see rules of thumb)− No fixed margins

− No floats

− No big fixed fonts

− Reduce the usage of tables (or reduce the number of columns)

− Make a block with links to views like

• Most recent comments

• Most recent forum topics

Creating the mobile look

Currently high risk and

complexity, but allows more

creativity!

− Remove node content from frontpage

− Replace the user login block by a link

− Navigation in a dropdown list works well

− No who is online, who is new kind of blogs (not relevant)

− You can make things sexy for iphone, android, ...

Use an adaptation service (like Siruna ;))− Does most of the work for you (image transcoding, device

detection, adaptation for difference devices)

− Build in functionality to help creating different versions

− Fast prototyping

− High Quality

Adaptation engine = proxy to the mobile user

Mobile URL Desktop URL

DNS

Website / XML stream

Adaptation

engine

The Siruna platform

Website

34

Website XML Feed

How does it work?

Device

Detection

Content

Fetcher

Content

Adaptation

EngineSelect

Menu

Automatic

Content

Adaptation

35

Fetcher

35

Adapt Style

Select mobile

content

Content adaptation engineSiruna Composer

Previewing XML based rules(http://open.siruna.org/documentation/sitemap-api)

36

<map:transform />

means you want to define a transformation on the content.

<map:transform type=“sirunaElementTransformer” />

XML scripting language: syntax

<map:transform type=“sirunaElementTransformer” />

means you want to use an “Element Transformer”

(http://open.siruna.org/documentation/sitemap-api for more

transformers.

<map:transform type=“sirunaElementTransformer>

<map:parameter name="task0"

value="remove(//p:form[@id='comment-form']//p:fieldset)" />

</map:transform>=> Means you want to remove the fieldset of the form

Remove content (example remove content of nodes on

frontpage)

Make drupal forms mobile friendly:

Adaptations (some examples)

< <map:transform type="sirunaElementTransformer">

<map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" />

</map:transform>

Make drupal forms mobile friendly:

38

<map:transform type="sirunaElementTransformer"><map:parameter name="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /><map:parameter name="task1" value="removeAttribute(//p:textarea, cols)" /><map:parameter name="task2" value="removeAttribute(//p:input, size)" /><map:parameter name="task3" value="setAttribute(//p:textarea, rows, 3)" /><map:parameter name="task4" value="setAttribute(//p:textarea, style, width:90%)" /><map:parameter name="task5" value="setAttribute(//p:form[@id='comment-form']//p:input, style, width:90%)"

/></map:transform>

Extract several menu structures and collect as dropdown

Adaptations (examples)

<map:transform type="sirunaMenuExtractor"><map:parameter name="task0" value="extract(//p:ul[@class='links primary-links'], false, false, true)" /><map:parameter name="task1" value="extract(//p:ul[@class='links secondary-links'], false, false, true)" />

</map:transform><map:transform type="sirunaMenuInserter"><map:parameter name="select_current_url" value="true" />

</map:transform>

Change / remove CSS attributes

39

<map:transform type="sirunaCSSTransformer">

<map:parameter name="task0" value="addCSSItemAttribute(.front #block-block-13, background-position, center)" />

<map:parameter name="task1" value="removeCSSItemAttribute(#block-block-13, height)" />

<map:parameter name="task2" value="removeCSSItemAttribute(#block-block-13, margin-bottom)" />

<map:parameter name="task3" value="removeCSSItemAttribute(#block-block-13, margin-top)" />

<map:parameter name="task4" value="removeCSSItemAttribute(#block-block-13, padding-top)" />

<map:parameter name="task5" value="addCSSItemAttribute(#block-block-13, background-position, center)" />

</map:transform>

Different adaptations for different devices:

Adaptations (examples)

<map:select type="sirunaExpressionSelector"><map:when test="width &lt; 160 || !imageSupported">

<map:transform type="sirunaElementTransformer"><map:parameter name="task0" value="remove(//p:div[@id='contentsurround']//p:img)" />

</map:transform>

Analtyics inserter<map:transform type="sirunaGoogleAnalyticsInserter">

<map:parameter name="identifier" value="UA-2883003-5"/></map:transform>

40

</map:transform></map:when></map:select>

Tight integration between Siruna and Drupal

Flexible definition of filters for content types, menu

pages, views and individual pages

Duplication of theme enabling a “mobile configuration”

for the mobile users

Possibility to apply predefined adaptations

Siruna module

Possibility to apply predefined adaptations

Previewing of the mobile site from within Drupal

41

Module allows creating adaptation for your own

themes

Creation of a repository of mobile adaptations

Predefined adaptations

42

Filter is a adaptation pipeline for group of pages− E.g. Specific pages or nodetypes can have a different filter!

Powerfull concept to make complex sites mobile!

Define your filters

43

Demo 2

44

Mail : Tom.Deryckere@siruna.com

Blog: http://www.mobiledrupal.com

Twitter: @twom, @siruna

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

Contact

45

Looking for partnerships with Drupal agencies

and developers!