Presented at Drupalcon paris 2009. The presentation talks about mobilization in Drupal, Siruna;, Mobile Tools and best practices

1. Basics of making mobile
websites with Drupal
Drupalcon Paris 2009
Tom Deryckere
Software Architect / Siruna
@twom

2. Before we start
Questions?
During the presentation: raise your hand and shout
After the presentation:
− Raise your hand and shout again
− Post questions on twitter: #siruna
− Or come aftwards and talk to me
2

3. About Siruna
open source company
We think in small screens (Mobile Web)
We develop solutions to help the development of
mobile websites
With a very strong focus on Drupal
Mobile partner of several web agencies
3

4. Some research
1. Who owns an iPhone, Android or Palm pre
2. Who has access to the internet on his mobile phone
3. Who has already created a mobile website
4. Who has currently got an ongoing project with a mobile
part
5. Who is planning to make a mobile site in the coming
three months
4

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

6. Technology that works
From WAP to iMode to xHTML

7. Network side TECHNOLOGY
From slow connections to fast connections

8. Current state
35 percent less successful completing
Web site tasks via their mobile phones than
they are on a regular PC
average success rate for users to complete
tasks via mobile was only 59 percent.
“A surprising and annoying thing was that it
was so hard for people to actually access
mobile sites,”
8

9. Current state
Web sites designed for PC compatibility will most
likely render improperly on mobile phones and create
a whole new set of additional obstacles for the mobile
Internet user.
However, there is still hope for mobile Web developers,
publishers and marketers: User performance could be
improved by 20 percent by creating mobile-optimized
sites, according to Neilsen Norman Group
9

10. Reasons to go mobile
Applications already driving mobile usage
....
Drive traffic on mobile phones to websites
Find relevant content
Advertisment
??? Fast download
Intuitive
....
10

11. Reasons to go mobile
Activities driving mobile usage
Events / conferences Shopping
Vacation / travelling
Commuting
Toilet
11

12. 12

13. Mobile Web according google
“We believe the web has won and over the next several
years, the browser, for economic reasons almost, will
become the platform that matters and certainly that’s
where Google is investing.”
Src: http://blogs.ft.com/techblog/2009/07/app-stores-are-not-the-future-says-google/
13

14. SOME EXAMPLES
14

15. Examples (Drupal)
DrupalCon Paris:
http://drupalcon.siruna.com
Slate:
http://twom.slate.mobixx.eu
15

16. Examples (Drupal)
Garland mobile:
http://twom.garland.mobixx.eu
Marina:
http://twom.marina.mobixx.eu
Zen:
http://twom.zen.mobixx.eu
XIO:
http://xio.siruna.com
http://portal.siruna.com
16

17. Examples (Drupal)
Moneywise
− http://twom.mws.mobixx.eu
17

18. Drupalcon on mobile?
Go to http://drupalcon.siruna.com
Made mobile using the Siruna Composer
Check out the schedule on your mobile
18

19. WHERE IS THE COMPLEXITY
19

20. Complexity
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
− 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
− ...
How to bring users to the mobile website
− Two urls? Redirection?
20

21. Complexity
Optimization 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
− Understand what he will look for (think and plan well!!)
− Is not easy (especially for the customer)
21

22. On fragmentation
Convergence is coming
Javascript becomes more and more the standard
Desktop html works on mobile devices
22

23. More interesting data
United States Handset Data - April 2009 India Handset Data - April 2009
Requests: 3,538,714,000 Requests: 447,079,855
480x320 px
176x220 px
240x320 px
320x240 px
480x320 px
Palm pre: 480 x 320
23
Source: AdMob

24. Complexity
Simple (double) navigation
No video
Easy access to stories 24

25. WEBSITE VS APPLICATION
25

26. Overview
Platform Language
iPhone Objective C
Android Java (Dalvik JVM)
Windows mobile .NET / C++ / Java
Nokia C++, java, Flash lite,
python
Palm Pre HTML / CSS / With own touch
javascript (services api +
widgets)
What some would call
widgets.
Blackberry Java
Browser HTML / CSS / W3C standards,
javascript reach
26

27. http://www.scribd.com/doc/1743125
Complexity / Access to device resource 2/Hitch-Hikers-Guide-Runtime-
power -Network interface Booklet
- camera C++
- database objective C
- contacts
- calender JAVA ME NET CF
- Accelero meter
- GPS Python scripting
- ..
Widgets
Web
27 Range

28. Browser technology
Different standards supported
− xHTML – MP (subset of xHTML) is recommended
− But full xHTML works fine on a lot of devices
− CSS + javascript
Standardization by W3C
Industry initiative BONDI (http://www.bondi.com)
stimulates spread of these (and more) standards
Main browsers support ‘full web’
− Opera
− Fennec
− Google Android
− Safari WebKit!!
− Palm Pré
− skyfire
28

29. Good news
In practise, use your general web skills...
Just keep visuals under control
You will have some new api’s available in the future
(same counts for desktop)
29

30. SOME MORE EXAMPLES
30

31. General Login or Register
Form a multi-column based site going towards a 1
column site
We are talking about generic designs
Second navigation
New forum posts
31 New Comments
Sponsors etc ...

32. Design
Rules of thumb
− No fixed margins
− No floats
− Limit usage of fixed fonts
− Reduce the usage of tables (or reduce the number of columns)
− 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, ...
Optional
− Remove node content from frontpage
− Overview blocks can be reduced to link pointing to a page view
32

33. Examples
33

34. Examples
34

35. Examples
35

36. Examples
36

37. Examples
37

38. Talk some Drupal
MOBILE TOOLS
38

39. Mobile design flow
Device Detection
(Mobile device, desktop, PSP, ...)
Switching
(Make sure the user gets access to the best site)
Functionality + content
(What functionality and content is relevant for the device)
Theming
(Layout, image resizing, navigation, table linearization)
39

40. Goal of mobile tools
Bundle some essential funcitonality to go mobile into one module
Device detection
User Notification: “I see you surf mobile... Check out our mobile site”
Redirection
Mobile permission
Theme switching
....
40

41. User notification / redirection
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
modules
41

42. Redirection
What we recomend:
− 2 urls: mobile (m.domain.com) and desktop (www.domain.com)
− Direct mobile user immediately to the mobile site
− Have a link on the mobile site to return to the desktop site
− Remember the last choice and for next visit of the domain.com site,
redirect to mobile or stay on desktop
− Provide link on desktop to mobile and remember this choice
⇒ No real need for mobile user to learn two urls!
⇒ Seamless transistions
Eg. Facebook
42

43. Mobile permissions
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
− Very powerfull tool to toggle functionality on your mobile site!
43

44. Theme switching
Theme switching (based on device group if needed)
Based on domain name or device detection
Switching per device group (Android, iPhone, etc ...)
44

45. CREATE THE MOBILE LOOK
45

46. Creating the mobile look
Create you own themes (see rules of thumb)
− No fixed margins
− No floats
− No big fixed fonts Currently high risk and
− Reduce the usage of tables (or reduce the number of columns)
− Make a block with links to views like
complexity, but allows more
• Most recent comments creativity!
• 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, ...
Use an adaptation service
− Partly automation
− Build in functionality to help creating different versions for different
devices
− Real multiplatform distribution
− Fast prototyping
− High Quality

47. Automatic
Content
Device Content Adaptation
Detection Adaptation
Engine
Select
Content Menu
Fetcher
Select mobile
content
Adapt Style
47

48. We are launching OSMOBI
A Free service to instantly mobilize your Drupal site
based on our transcoding engine
Focus on
− Very simple and fast
− Simple adaptations
− High quality
We start with support for Garland and the color picker
module
− Create your own mobile style
48

49. Demo
49

50. Content adaptation engine
Siruna Composer
Previewing XML based rules
(http://open.siruna.org/documentation/sitemap-api)
50

51. Demo
Mobilization of Garland
− Create a dropdown menu
− Remove blocks
51

52. XML scripting language:
syntax
<map:transform />
means you want to define a transformation on the content.
<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

53. Adaptations (some examples)
Remove content (example remove content of nodes on
frontpage)
< <map:transform type="sirunaElementTransformer">
<map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" />
</map:transform>
Make drupal forms mobile friendly:
<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>
53

54. Adaptations (examples)
Extract several menu structures and collect as dropdown
<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
<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>
54

55. Adaptations (examples)
Different adaptations for different devices:
<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>
</map:when>
</map:select>
Analtyics inserter
<map:transform type="sirunaGoogleAnalyticsInserter">
<map:parameter name="identifier" value="UA-2883003-5"/>
</map:transform>
55

56. Thank you!
Talk to us if you want to beta-test our new OSMOBI
service!
56

57. Questions?
57

58. Contact
Meet us for a free beer!
Mail : Tom.Deryckere@siruna.com
Blog: http://www.mobiledrupal.com
Twitter: @siruna
Siruna: http://www.siruna.com, http://open.siruna.com
58