Tom Deryckere shared thoughts on mobile web development and how content management systems (CMS) like Drupal, Joomla, and WordPress can be used to build mobile sites. He discussed how the mobile web is different than the desktop web and outlined techniques like device detection, template switching, and content transcoding to optimize sites for multiple devices. Examples of CMS extensions and services that facilitate mobile development were provided. Attendees were encouraged to start building mobile versions of their sites.

1. Going Mobile
CMSExpo Chicago 2010
Tom Deryckere
Drupal & Mobile Web architect

2. If any questions
Use twitter (@twom #cmsx)
Save them for the end or come speak
to me after the presentation.

3. Objectives of this presentations
Share some thoughts about mobile:
– what makes mobile different
– the mobile revolution has already
happened
– share some interesting developments /
technologies
how mobile can be used overall
Motivate the community to start building
mobile Wordpress, Joomla! and Drupal
sites!

4. Who’s @twom
twom drupal user number 25564
I write and maintain Drupal modules
– Mobile Tools
– WURFL
– Foursquare
– Zendesk
– Osmobiclient and Osmobi-mobile
Coauthored the Wordpress and Joomla OSMOBI
modules
Born Belgium, living and working in NY
Experienced in pitching mobile web projects
http://www.mobiledrupal.com

5. Who’s @audience
Q1: Who is web developer?
Q1a: Who is Drupal developer
Q1b: Who is Joomla! developer
Q1c: Who is Wordpress developer
Q1d: Who is Plone developer
Q2: Marketeer?
Q3: Project manager?
Q4: Entrepreneur looking to build a mobile service?
Q5: Who has already developed a mobile site?
Q6: Who is planning to make one?
Q7: Who calls himself a mobile web user
Q8: Who thinks he/she choose the wrong session?

6. Mobile is actually the 7th
Mass Media
1.Print c. 1500’s
2.Recording music c.
1890’s
3.Cinema c. 1900’s
4.Radio c. 1920’s
5.TV c. 1950’s
6.Internet c. 1990’s
7.Mobile c. 2000’s
Source: Tomi Ahonen

7. Mobile is the Future...
The revolution has already happened!
+1 billion mobile phones sold / year
Mobile web access will surpass PCs by 2013 (Gartner)
Today, we’ll focus on the mobile Internet

8. ... but it can be a Pain
Mobile Internet is not the “mini-Internet”
• New usage patterns, navigation methods, ...
• 90% of devices don’t support JavaScript
1:1 mapping of desktop concepts leads to frustration

9. Mobile Readiness Example
mobiReady (http://ready.mobi) evaluation of www.joomla.org
• Very poor overall score (1.3/5)
• Too slow, too expensive, unadapted structure, ....

10. History, usage
MOBILE WEB

11. Back in 1999
Voice
Messaging
Infrared
HIGH END DEVICE

12. Today
Voice, messaging
Web
Camera
Bluetooth
Java
ENTRY LEVEL DEVICE

13. Today
• Smartphone
• Multimedia device
• Connected
• Large touch screens
• Gaming
NOTE: Look at your market!
Demographic
Geographic location
Industry

14. Technology Trends
From WAP, over IMODE, to XHTML

15. Network Technology
GPRS EDGE UMTS HSDPA
52Kb/s 240Kb/ 384Kb/S 1.8Mb/
s s
E-mail (3KB) < 1s < 1s < 1s < 1s
Website 20s 5s 3s < 1s
(128KB)
MP3 (3MB) 8m 2m 64s 13s
Video (15MB) 40m 9m 6m 66s

16. Powerful devices
Fast network connections
Affordable data plans
Mobile Web
WHERE IS THE COMPLEXITY?

18. Mobile Fragmentation
It’s not all about iPhone!
Thousands of different devices
Different Operating Systems
Wide range of properties and capabilities
Screen size, JavaScript support, HTML/CSS support, ...

19. Mobile OS
OBJECTIVE C JAVA C / Python / Flash /
JAVA
.NET / C++ / Java HTML/JS/CSS

20. Mobile OS
OBJECTIVE C JAVA C / Python / Flash /
JAVA
.NET / C++ / Java HTML/JS/CSS

21. Market share
Source AdMob

22. Top Devices
Source AdMob

24. NATIVE VS. WEB APPLICATIONS

25. Development Options
Native applications
Powerful application
Written for specific platform (e.g. iPhone or Android apps)
Widgets
XHTML, CSS and JavaScript
Written for a specific widget engine (e.g. Nokia WRT)
Often special JavaScript APIs with access to device resources
Powerful and easy to create
Mobile websites
HTML, CSS and JavaScript
Easy to develop
Lacks access to device resources *

26. Trade offs
Native apps Mobile Web
• Access to device resources: Camera, • Runs on (almost) all devices.
Accelerometer, Bluetooth, GPS, • Use standard web development knowledge
Sockets, ... and techniques.
• High performance, powerfull graphics • GPS is available on a lot of browsers
• Access on the device frontscreen • Full control on deployment and maintenance
• Monetization in app stores • Low treshold to access
• Higher development cost due to • No access to device resources
specialized knowlege and multiple
platforms • Lower performance, graphics
• Higher maintainance cost. • Less personalized
• Approval of application can take time
• People need to be willing to give your
applicationa place on their homepage.

27. Trade offs
Native Applications Mobile Web
• Access to device resources: • Runs on (almost) all devices.
Camera, Accelerometer, • Use standard web development
Bluetooth, GPS ,Sockets,
knowledge and techniques.
• High performance, powerfull
graphics • GPS is available Your Blog
on a lot of
• Access on the device frontscreen browsers
• Monetization in app stores • Full control on deployment and
maintenance Company or
organization site
• Higher development cost due to
specialized knowlege and multiple • No access to device resources
platforms • Lower performance
• Higher maintainance cost. Joomla.org
• Approval of application can take /drupal.org
time /wordpress.org

28. Web only for Trivial Apps?
Google engineers ported Quake II to browsers
Showing capabilities of HTML5-compatible browsers
Cross-compiled 3D engine to JavaScript

29. PhoneGap:
Combining both Worlds
Create applications using Web technology
HTML, CSS and JavaScript
Additional JavaScript APIs to access device interfaces
GPS, camera, contacts, ...
Packaged as native application
Android, Blackberry, iPhone
Support for other platforms is coming
Alternatives: titanium

30. BONDI: Going even Further
TODO

31. Mobile Web unifies them all
Standard web technologies we all know:
– HTML / CSS / JS
– Partially support for HTML5 and CSS3 on some browsers
(but with device specific implementations)
– See http://www.quirksmode.org/m/css.html for an
overview of supported CSS.
Skyfire Opera (mini)
Fennec
IE Mobile
Safari Mobile
Webkit Engine Android Browser

32. Mobile Usage Trends

33. Typical use cases
Activities driving mobile usage
Shopping
Events / conferences Vacation / travelling
Quick lookup On the road On the loo

34. Key differentiators from desktop
1. Mobile is personal
– the most personal device
– all other media channels - such as TV, Print, and online -
can be shared, but no one shares a phone
2. Always with you
– 91% of people are within 1 meter of their phone
24 hours/day, 7 days/week (source: Morgan Stanley)
3. Always connected, always on
– most connected media, even used for news flash from
TV
– two-way communication opens up wide range of
services and interactions
4. Location aware
– Add context, eg while searching

35. M-Commerce

36. Search
Location is added for GPS enabled
phones.

37. Traffic information

38. Social networking

39. Reservations

40. News portals

41. Ingredients
Optimized for high-end device
+ other devices
Understand the mobile context
– Location based information
– Quick access to relevant information (not a copy
of the desktop)
– Easily shareable
Good design!
– Large buttons (no hyperlinks)
– 1 column
– Nice graphics (this often has too low priority)
No magic to it!

42. Web mobilization
GENERAL TECHNIQUES

43. Things to do
Above all: define scope,
audience and features.
Device Detection
URL Redirection
Create Mobile Templates
Transcode the content

44. Device Detection
Every device matters
Differentiating devices is required
Detect properties and capabilities
Enables device-optimized server-side actions
Image transcoding & resizing
Showing only core information
WURFL, Device Atlas, lightweight scripts, ...
Each CMS has some modules for that!

45. Domain Redirection
Desktop
2 separate websites Mobile
Desktop & mobile version
Simple approach
Perform device detection
Redirect mobile devices
Make sure the user can ‘go back’
to desktop site.

46. Mobile template
Create separate template
Only the website’s layout changes
Content can be reused
Important: Mobile template’s quality

47. Template Switching
Mobile template: Rules of thumb
Single column design for most device
No floats, fixed widths, or fixed margins
Limit usage of tables, no frames
...
W3C Mobile Web Best Practices
http://www.w3.org/TR/mobile-bp/

48. Mobile design
http://www.templatemonster.com/cat
egory/mobile-templates/

49. Transcoding Services
Proxy approach: intermediate server
Can often perform device detection
Fetch content from original desktop site
Apply specific content adaptation rules
Remove specific content, transform menu structure, resize images, ...
Proxy
Desktop

50. Transcoding Services
Siruna platform
Composer with XML based adaptation rules
Quick preview

51. Transcoding services
Apache Mobile Filter
– Device detection using WURFL
– Redirection to mobile url
– Transcoding of images
http://www.apachemobilefilter.org

52. Mobile Support in Wordpress,
Joomla! And Drupal

53. Wordpress
Good build in support
Often easier site types (blog)
Solutions
– Wordpress mobile pack
– WPTouch
– MobilePress
– OSMOBI

54. Examples

55. Joomla!
JED

56. Mobile Joomla!
Distinguishes 4 types of mobile devices
iPhone, XHTML, iMode & WAP
Template switching per category
Image adaptation options
No mobile caching
Not in JED (yet)
http://www.mobilejoomla.com

57. Mobilebot
Focuses on switching templates for different devices
Detects iPhone, Blackberry, Android and Opera Mini
Change HTML content based on device
Settings through plugin parameters, no “mobile view”

58. jWURFL
Integrates WURFL device detection in Joomla!
Repository of +-9000 devices
Access to detailed device properties
Useful tool for mobile-minded extension developers
http://www.choiceit.nl

59. J Admin Mobile Lite
Administer your Joomla! Site from your
iphone

60. Joooid
Joooid is an Android client for the
Joomla CMS: it has been created to
publish articles with images, galleries
and a map indicating the GPS position
where the article has been published
from.

61. iNumbus
iNimbus is a Theme and Plugin
package that is meant for you to use
your existing system and allow it to be
converted for iPhones.

62. OSMOBI
Service to instantly mobilize your CMS-driven website
Based on the Siruna transcoding engine
Optimized for interfacing with Joomla!
But also Drupal and Wordpress
Provides a GUI to easily change mobile look & feel
http://www.osmobi.com

63. Drupal
Several modules available
– Mobile themes
– Device detection
– Theme switching
– SMS integration
– QR Codes
– Mobile payment
Mainly need for mobile templates

64. Mobile Tools
Device detection
Theme switching (per device type)
Go back to desktop link (!)
Mobile permission system

65. Mobile Plugin
Similar to mobile tools!
http://drupal.org/project/mobileplugin

66. Nokia mobile templates
http://drupal.org/project/nokia_mobile

67. iDrupal (iui)
Template + interface to manage your
site from the mobile phone
http://drupal.org/project/idrupal

68. Wurfl
Flexible device detection
http://drupal.org/project/wurfl

69. http://drupal.org/project/foursquare

70. USING OSMOBI

71. Install CMS extension
Download and install OSMOBI plugin & template
Activate plugin

72. Start Mobilizing Your Site

73. Remove, Rearrange Content
Everything is selectable (move it up, down, or hide)

74. Adapt Navigation
Create and modify additional dropdown menus

75. Change Colors & Logo
Originally selected from desktop template
Can be tweaked
Color schema inspiration: Adobe Kuler
Upload a logo

76. Change Style and CSS
All page elements are highly customizable
Edit margins, padding
Font settings, text alignment
Custom CSS inclusion

77. Preview Website
Preview on different devices
Optimized look & feel adaptations
iPhone
Android
Default mobile look
Automatically selected

78. OSMOBI EXAMPLES

79. Show Cases
http://www.osmobi.com/gallery

80. QUESTIONS?

81. Contact or training
Mail: Tom.Deryckere@gmail.com
Blog: http://www.mobiledrupal.com
OSMOBI: http://www.osmobi.com
Twitter: @twom