CMSExpo Chicago 2010
Drupal & Mobile Web architect
If any questions
Use twitter (@twom #cmsx)
Save them for the end or come speak
to me after the presentation.
Objectives of this presentations
Share some thoughts about mobile:
– what makes mobile different
– the mobile revolution has already
– share some interesting developments /
how mobile can be used overall
Motivate the community to start building
mobile Wordpress, Joomla! and Drupal
twom drupal user number 25564
I write and maintain Drupal modules
– Mobile Tools
– Osmobiclient and Osmobi-mobile
Coauthored the Wordpress and Joomla OSMOBI
Born Belgium, living and working in NY
Experienced in pitching mobile web projects
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
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?
Mobile is actually the 7th
1.Print c. 1500’s
2.Recording music c.
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
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
... but it can be a Pain
Mobile Internet is not the “mini-Internet”
• New usage patterns, navigation methods, ...
1:1 mapping of desktop concepts leads to frustration
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, ....
Fast network connections
Affordable data plans
WHERE IS THE COMPLEXITY?
It’s not all about iPhone!
Thousands of different devices
Different Operating Systems
Wide range of properties and capabilities
OBJECTIVE C JAVA C / Python / Flash /
.NET / C++ / Java HTML/JS/CSS
OBJECTIVE C JAVA C / Python / Flash /
.NET / C++ / Java HTML/JS/CSS
Written for specific platform (e.g. iPhone or Android apps)
Written for a specific widget engine (e.g. Nokia WRT)
Powerful and easy to create
Easy to develop
Lacks access to device resources *
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.
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
• 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
Web only for Trivial Apps?
Google engineers ported Quake II to browsers
Showing capabilities of HTML5-compatible browsers
Combining both Worlds
Create applications using Web technology
GPS, camera, contacts, ...
Packaged as native application
Android, Blackberry, iPhone
Support for other platforms is coming
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)
Webkit Engine Android Browser
Typical use cases
Activities driving mobile usage
Events / conferences Vacation / travelling
Quick lookup On the road On the loo
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
– two-way communication opens up wide range of
services and interactions
4. Location aware
– Add context, eg while searching
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
– Large buttons (no hyperlinks)
– 1 column
– Nice graphics (this often has too low priority)
No magic to it!
Things to do
Above all: define scope,
audience and features.
Create Mobile Templates
Transcode the content
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!
2 separate websites Mobile
Desktop & mobile version
Perform device detection
Redirect mobile devices
Make sure the user can ‘go back’
to desktop site.
Create separate template
Only the website’s layout changes
Content can be reused
Important: Mobile template’s quality
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
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, ...
Composer with XML based adaptation rules
Apache Mobile Filter
– Device detection using WURFL
– Redirection to mobile url
– Transcoding of images
Mobile Support in Wordpress,
Joomla! And Drupal
Good build in support
Often easier site types (blog)
– Wordpress mobile pack
Distinguishes 4 types of mobile devices
iPhone, XHTML, iMode & WAP
Template switching per category
Image adaptation options
No mobile caching
Not in JED (yet)
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”
Integrates WURFL device detection in Joomla!
Repository of +-9000 devices
Access to detailed device properties
Useful tool for mobile-minded extension developers
J Admin Mobile Lite
Administer your Joomla! Site from your
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
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.
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
Several modules available
– Mobile themes
– Device detection
– Theme switching
– SMS integration
– QR Codes
– Mobile payment
Mainly need for mobile templates
Theme switching (per device type)
Go back to desktop link (!)
Mobile permission system
Similar to mobile tools!
Nokia mobile templates
Template + interface to manage your
site from the mobile phone