Going Mobile

CMSExpo Chicago 2010

Tom Deryckere

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 happened

– share some interesting developments / – share some interesting developments / technologies

� how mobile can be used overall

� Motivate the community to start building mobile Wordpress, Joomla! and Drupal sites!

Who’s @twom

� twom drupal user number 25564

� I write and maintain Drupal modules– Mobile Tools

– WURFL

– Foursquare

– Zendesk– 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

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

Mobile is actually the 7th

Mass Media1.Print c. 1500’s

2.Recording music c. 1890’s

3.Cinema c. 1900’s3.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...

� +1 billion mobile phones sold / year

� Mobile web access will surpass PCs by 2013 (Gartner)

The revolution has already happened!The revolution has already happened!The revolution has already happened!The revolution has already happened!

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

• 90% of devices don’t support JavaScript

� 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, ....

MOBILE WEB

History, usage

Back in 1999

� Voice

� Messaging

� Infrared

HIGH END DEVICE

Today

� Voice, messaging

� Web

� Camera

� Bluetooth

� Java� Java

ENTRY LEVEL DEVICE

Today

• Smartphone

• Multimedia device

• Connected

• Large touch screens• Large touch screens

• Gaming

NOTE: Look at your market!

Demographic

Geographic location

Industry

Technology Trends

From WAP, over IMODE, to XHTML

Network Technology

GPRS

52Kb/s

EDGE

240Kb/

s

UMTS

384Kb/S

HSDPA

1.8Mb/

s

E-mail (3KB) < 1s < 1s < 1s < 1s

Website

(128KB)

20s 5s 3s < 1s

MP3 (3MB) 8m 2m 64s 13s

Video (15MB) 40m 9m 6m 66s

Powerful devices

Fast network connections

Affordable data plans

WHERE IS THE COMPLEXITY?

Mobile Web

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

Mobile OS

OBJECTIVE C JAVA C / Python / Flash /

.NET / C++ / Java HTML/JS/CSS

JAVA

Mobile OS

OBJECTIVE C JAVA C / Python / Flash /

.NET / C++ / Java HTML/JS/CSS

JAVA

Market share

Source AdMob

Top Devices

Source AdMob

NATIVE VS. WEB APPLICATIONS

Development Options

� Native applications

� Powerful application

� Written for specific platform (e.g. iPhone or Android apps)

� Widgets

� XHTML, CSS and JavaScript� 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 *

Trade offs

• Access to device resources: Camera, Accelerometer, Bluetooth, GPS, Sockets, ...

• High performance, powerfull graphics

• Access on the device frontscreen

• Monetization in app stores

Mobile Web• Runs on (almost) all devices.

• Use standard web development knowledge and techniques.

• GPS is available on a lot of browsers

• Full control on deployment and maintenance

Native apps

• Monetization in app stores

• Higher development cost due to specialized knowlege and multiple platforms

• Higher maintainance cost.

• Approval of application can take time

• People need to be willing to give your applicationa place on their homepage.

• Low treshold to access

• No access to device resources

• Lower performance, graphics

• Less personalized

Trade offs

Native Applications• Access to device resources:

Camera, Accelerometer, Bluetooth, GPS ,Sockets,

• High performance, powerfull graphics

Mobile Web

• Runs on (almost) all devices.

• Use standard web development

knowledge and techniques.

• GPS is available on a lot of Your Bloggraphics

• Access on the device frontscreen

• Monetization in app stores

• Higher development cost due to specialized knowlege and multiple platforms

• Higher maintainance cost.

• Approval of application can take time

browsers

• Full control on deployment and

maintenance

• No access to device resources

• Lower performance

Company or

organization site

Joomla.org

/wordpress.org

Joomla.org

/drupal.org

/wordpress.org

Web only for Trivial Apps?

� Google engineers ported Quake II to browsers

� Showing capabilities of HTML5-compatible browsers

� Cross-compiled 3D engine to JavaScript

PhoneGap:

Combining both Worlds

� Create applications using Web technology

� HTML, CSS and JavaScript

� Additional JavaScript APIs to access device interfaces� 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

BONDI: Going even Further

� TODO

Mobile Web unifies them allStandard 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.

Opera (mini)

IE Mobile

Skyfire

Fennec

Android BrowserSafari Mobile

Webkit Engine

Mobile Usage Trends

Typical use cases

� Activities driving mobile usage

On the roadQuick lookup On the loo

Events / conferencesShopping

Vacation / travelling

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 – 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

M-Commerce

Search

Location is added for GPS enabled

phones.

Traffic information

Social networking

Reservations

News portals

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)

– 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!

GENERAL TECHNIQUES

Web mobilization

Things to do

� Above all: define scope, audience and features.

� Device Detection

� URL Redirection

� Create Mobile Templates

� Transcode the content

Device Detection

� Every device matters

� Differentiating devices is required

� Detect properties and capabilities

� Enables device-optimized server-side actions� 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!

Domain Redirection

� 2 separate websites

� Desktop & mobile version

� Simple approach

Mobile

Desktop

� Perform device detection

� Redirect mobile devices

� Make sure the user can ‘go back’

to desktop site.

Mobile template

� Create separate template

� Only the website’s layout changes

� Content can be reused� Content can be reused

� Important: Mobile template’s quality

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� Limit usage of tables, no frames

� ...

� W3C Mobile Web Best Practices

� http://www.w3.org/TR/mobile-bp/

Mobile design

� http://www.templatemonster.com/category/mobile-templates/

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, ...� Remove specific content, transform menu structure, resize images, ...

Desktop

Proxy

Transcoding Services� Siruna platform

� Composer with XML based adaptation rules

� Quick preview

Transcoding services

� Apache Mobile Filter

– Device detection using WURFL

– Redirection to mobile url

– Transcoding of images– Transcoding of images

� http://www.apachemobilefilter.org

Mobile Support in Wordpress,

Joomla! And Drupal

Wordpress

� Good build in support

� Often easier site types (blog)

� Solutions

– Wordpress mobile pack– Wordpress mobile pack

– WPTouch

– MobilePress

– OSMOBI

Examples

Joomla!

� JED

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

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”� Settings through plugin parameters, no “mobile view”

jWURFL

� Integrates WURFL device detection in Joomla!

� Repository of +-9000 devices

� Access to detailed device properties

� Useful tool for mobile-minded extension developers� Useful tool for mobile-minded extension developers

� http://www.choiceit.nl

J Admin Mobile Lite

� Administer your Joomla! Site from your iphone

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 and a map indicating the GPS position where the article has been published from.

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.converted for iPhones.

OSMOBI

� Service to instantly mobilize your CMS-driven website

� Based on the Siruna transcoding engine

� Optimized for interfacing with Joomla!� Optimized for interfacing with Joomla!

� But also Drupal and Wordpress

� Provides a GUI to easily change mobile look & feel

� http://www.osmobi.com

Drupal

� Several modules available

– Mobile themes

– Device detection

– Theme switching– Theme switching

– SMS integration

– QR Codes

– Mobile payment

� Mainly need for mobile templates

Mobile Tools

� Device detection

� Theme switching (per device type)

� Go back to desktop link (!)

Mobile permission system� Mobile permission system

Mobile Plugin

� Similar to mobile tools!

� http://drupal.org/project/mobileplugin

Nokia mobile templates

http://drupal.org/project/nokia_mobile

iDrupal (iui)

� Template + interface to manage your site from the mobile phone

� http://drupal.org/project/idrupal

Wurfl

� Flexible device detection

� http://drupal.org/project/wurfl

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

USING OSMOBI

Install CMS extension

� Download and install OSMOBI plugin & template

� Activate plugin

Start Mobilizing Your Site

Remove, Rearrange Content

� Everything is selectable (move it up, down, or hide)

Adapt Navigation

� Create and modify additional dropdown menus

Change Colors & Logo

� Originally selected from desktop template

� Can be tweaked

� Color schema inspiration: Adobe Kuler

� Upload a logo

Change Style and CSS

� All page elements are highly customizable

� Edit margins, padding

� Font settings, text alignment

� Custom CSS inclusion

Preview Website

� Preview on different devices

� Optimized look & feel adaptations

� iPhone� iPhone

� Android

� Default mobile look

� Automatically selected

OSMOBI EXAMPLES

Show Cases

http://www.osmobi.com/gallery

QUESTIONS?

Contact or training

� Mail: Tom.Deryckere@gmail.com

� Blog: http://www.mobiledrupal.com

� OSMOBI: http://www.osmobi.com� OSMOBI: http://www.osmobi.com

� Twitter: @twom