Mobile CMS - CMSExpo 2010

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

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

History, usage MOBILE WEB

Back in 1999 Voice Messaging Infrared HIGH END DEVICE

Today Voice, messaging Web Camera Bluetooth Java ENTRY LEVEL DEVICE

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

Technology Trends From WAP, over IMODE, to XHTML

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

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

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 / JAVA .NET / C++ / Java HTML/JS/CSS

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

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

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

Mobile Usage Trends

Typical use cases Activities driving mobile usage Shopping 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 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) – Easily shareable Good design! – Large buttons (no hyperlinks) – 1 column – Nice graphics (this often has too low priority) No magic to it!

Web mobilization GENERAL TECHNIQUES

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 Image transcoding & resizing Showing only core information WURFL, Device Atlas, lightweight scripts, ... Each CMS has some modules for that!

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.

Mobile template Create separate template Only the website’s layout changes 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 ... W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/

Mobile design http://www.templatemonster.com/cat egory/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, ... Proxy Desktop

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

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

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

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

Drupal Several modules available – Mobile themes – Device detection – 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 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 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 Twitter: @twom

http://www.slideshare.net	46
http://www.blogcodi.net	2
http://www.lmodules.com	2

Mobile CMS - CMSExpo 2010

by Tom Deryckere on May 12, 2010

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 50

Statistics

Mobile CMS - CMSExpo 2010 Presentation Transcript