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, ....
16. Powerful devices
Fast network connections
Affordable data plans
Mobile Web
WHERE IS THE COMPLEXITY?
17.
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, ...
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
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
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
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!
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/
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
51. Transcoding services
Apache Mobile Filter
– Device detection using WURFL
– Redirection to mobile url
– Transcoding of images
http://www.apachemobilefilter.org
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