These are the slides that I eventually did not use during the Drupalcamp NY talk. However this is a great reference

1. Basics of making mobile
websites (with Drupal)
Drupalcamp New York 5 dec 2009
Tom Deryckere
Software Architect / Siruna
@twom

2. 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 and Joomla!
Mobile partner of several web agencies
2

3. 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
Osmobi has a GUI to change the look ‘n feel of your site
3

4. Demo
4

5. Showcases
http://www.osmobi.com/gallery
5

6. Focus on Drupal and Joomla!
http://drupal.org/project/mobile_tools
http://drupal.org/project/wurfl
http://www.osmobi.com
Why Drupal?
− Open Source
− Big, well organized community
− Emerging
− No mobile
6

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

8. Technology that works
From WAP to iMode to xHTML

9. Network side TECHNOLOGY
From slow connections to fast connections

10. 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,”
10

11. 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
11

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

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

14. 14

15. 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/
15

16. Some random quotes from the web
China Internet Users Reach 360 mil, Mobile Internet
192 mil (8 nov 2009)
South Africa has close to 9.5 million mobile internet
users compared to the estimated 5 million desktop
users. (25 nov 2009)
1 Billion Mobile Internet Users By 2010 (nov 2009)
More mobile Internet than fixed by 2011 (2 nov 2009)
….
16

17. SOME EXAMPLES
17

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

19. 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
19

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

21. For more examples
http://www.siruna.com/showcases
21

22. WHERE IS THE COMPLEXITY
22

23. 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?
23

24. 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)
24

25. On fragmentation
Convergence is coming
Javascript becomes more and more available
Desktop html works on mobile devices
25

26. 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
26
Source: AdMob

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

28. Understanding mobile dev
Different viewpoints to explain / understand
− Functional point of view:
• What functionality will I present on the mobile device?
• How can I make optimal usage of the mobile context?
• What will the user do or need?
− From a developer point of view:
• What are the possibilities ?
• How can my backend adapt?
• What device resources are available?
• How to handle device detection, redirection, theme switching
• How can I manage image resizing
− (interaction) Designer
• what are good interaction paradigms?
• How to maintain a consistent feeling over different devices?
Answers to these questions are more natural for desktop sites
28

29. WEBSITE VS APPLICATION
29

30. 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
30

31. 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
31 Range

32. 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
32

33. 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)
33

34. SOME MORE EXAMPLES
34

35. 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
35 New Comments
Sponsors etc ...

36. 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
36

37. Resources
Icons:
− http://glyphish.com/
− http://iphonetoolbox.com/category/icons/
− Many more online
Example designs:
− http://patterns.design4mobile.com/
− http://www.cssiphone.com/
37

38. Design patterns
Study examples and design patterns can help
http://wiki.forum.nokia.com/index.php/Category:Mobile_
Web_Design_Patterns
− Vertical list, Horizontal list, Tabbed List, Grid
http://developer.apple.com/safari/library/documentation/I
nternetWeb/Conceptual/iPhoneWebAppHIG/iPhoneUser
Environment/iPhoneUserEnvironment.html#//apple_ref/d
oc/uid/TP40007900-CH3-SW1
− iPhone design patterns
38

39. Design like you make an app
Create app like user interfaces (think iPhone)
Use progressive enhancement
Javascript mobile libs:
− IUI
− jQTouch
− XUI
New, largely unexplored domain
39

40. Some code examples
<ul id="call-numbers">
<li><a href="wtai://wp/mc;12345678910">Call number 1</a></li>
<li><a href="wtai://wp/mc;12345678910">Call number 2</a></li>
<li><a href="wtai://wp/mc;12345678910">Call number 2</a></li>
<li><a href="wtai://wp/mc;12345678910">Call number 2</a></li>
<li><a href="wtai://wp/mc;12345678910">Call number 2</a></li>
</ul>
40

41. Some code examples
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 2</a></li>
</ul>
41

42. Tab menus
<ul id="navigation">
<li class="active"><a href="" >Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
</ul>
42

43. Use Geolocation if you can
Again, make sure you have a back up if no gps is
available
Including geolocation is simple:
− http://code.google.com/p/geo-location-javascript/
//determine if the handset has client side geo location capabilities
if(geo_position_js.init()){
geo_position_js.getCurrentPosition(success_callback,error_callback);
}
else{
alert("Functionality not available");
}
43

44. Examples
44

45. Examples
45

46. Examples
46

47. Examples
47

48. Examples
48

49. Mobile & Drupal
Still largely unexplored
− Demand for mobile is still low
− No real generic solutions
Recently a Mobile category was introduced
− http://drupal.org/taxonomy/term/7404 (14 modules)
49

50. The process
Collect requirements for a mobile context (workshop)
Location based Task and Goal oriented Targetted devices Create mobile strategy
Choose appropriate technologies
Transcoding Browser based Native application Rest services
Prepare sitemaps and wireframes
Get early feedback Information architecture
Base technology implementations
Setup transcoding Backend services Content management
Interaction + Look and Feel
Progerssive enhancement Device based Mobile interaction paradigms
Testing + collecting user feedback
Iterate
50

51. Talk some Drupal
MOBILE TOOLS
51

52. 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)
52

53. 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
....
53

54. 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
54

55. 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
55

56. 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!
56

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

58. TRANSCODING YOUR SITE
58

59. Creating the mobile site
Create static content specific for mobile
Create a seperate install for mobile
Create you own themes and keep drupal install
Use an adaptation service
− Partly automation
− Build in functionality to help creating different versions for different
devices
− Real multiplatform distribution
− Fast prototyping
− High Quality

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

61. examples
61

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

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

64. 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

65. 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>
65

66. 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>
66

67. 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>
67

68. Testing
Firefox with user agent switcher
Resize firefox to mobile screen sizes
http://www.testiphone.com/
SDK’s for different platforms (Android, Blackberry, Palm,
etc ...)
Real devices!!!
68

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

70. Questions?
70

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