0
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...
Who’s @twom
twom drupal user number 25564
I write and maintain Drupal modules
–   Mobile Tools
–   WURFL
–   Foursquare
– ...
Who’s @audience
Q1: Who is web developer?
   Q1a: Who is Drupal developer
   Q1b: Who is Joomla! developer
   Q1c: Who is ...
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...
Mobile is the Future...
                   The revolution has already happened!
  +1 billion mobile phones sold / year

  ...
... but it can be a Pain
Mobile Internet is not the “mini-Internet”
• New usage patterns, navigation methods, ...
• 90% of...
Mobile Readiness Example
mobiReady (http://ready.mobi) evaluation of www.joomla.org
• Very poor overall score (1.3/5)
• To...
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...
Technology Trends
From WAP, over IMODE, to XHTML
Network Technology




               GPRS     EDGE     UMTS    HSDPA
               52Kb/s   240Kb/   384Kb/S 1.8Mb/
    ...
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...
Mobile OS


OBJECTIVE C            JAVA        C / Python / Flash /




                                         JAVA
.NET...
Mobile OS


OBJECTIVE C            JAVA        C / Python / Flash /




                                         JAVA
.NET...
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 app...
Trade offs

Native apps                                  Mobile Web
•   Access to device resources: Camera,      •   Runs ...
Trade offs

Native Applications                     Mobile Web
•   Access to device resources:         •   Runs on (almost...
Web only for Trivial Apps?
Google engineers ported Quake II to browsers

Showing capabilities of HTML5-compatible browsers...
PhoneGap:
   Combining both Worlds
Create applications using Web technology
  HTML, CSS and JavaScript

Additional JavaScr...
BONDI: Going even Further
TODO
Mobile Web unifies them all
     Standard web technologies we all know:
     –    HTML / CSS / JS
     –    Partially supp...
Mobile Usage Trends
Typical use cases
  Activities driving mobile usage




                              Shopping
Events / conferences       ...
Key differentiators from desktop
1. Mobile is personal
  –   the most personal device
  –   all other media channels - suc...
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
– Qui...
Web mobilization

GENERAL TECHNIQUES
Things to do
Above all: define scope,
audience and features.

Device Detection

URL Redirection

Create Mobile Templates

...
Device Detection
Every device matters
  Differentiating devices is required
  Detect properties and capabilities

Enables ...
Domain Redirection
                                      Desktop


2 separate websites          Mobile

  Desktop & mobile...
Mobile template

Create separate template

Only the website’s layout changes
  Content can be reused

Important: Mobile te...
Template Switching
  Mobile template: Rules of thumb
    Single column design for most device

    No floats, fixed widths...
Mobile design

http://www.templatemonster.com/cat
egory/mobile-templates/
Transcoding Services
Proxy approach: intermediate server
  Can often perform device detection
  Fetch content from origina...
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 ima...
Mobile Support in Wordpress,
Joomla! And Drupal
Wordpress

Good build in support
Often easier site types (blog)
Solutions
–   Wordpress mobile pack
–   WPTouch
–   Mobile...
Examples
Joomla!

          JED
Mobile Joomla!
Distinguishes 4 types of mobile devices
  iPhone, XHTML, iMode & WAP

Template switching per category

Imag...
Mobilebot
Focuses on switching templates for different devices
  Detects iPhone, Blackberry, Android and Opera Mini

Chang...
jWURFL
Integrates WURFL device detection in Joomla!
  Repository of +-9000 devices

  Access to detailed device properties...
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...
iNumbus

iNimbus is a Theme and Plugin
package that is meant for you to use
your existing system and allow it to be
conver...
OSMOBI

Service to instantly mobilize your CMS-driven website
Based on the Siruna transcoding engine

Optimized for interf...
Drupal

Several modules available
–   Mobile themes
–   Device detection
–   Theme switching
–   SMS integration
–   QR Co...
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
  Up...
Change Style and CSS
All page elements are highly customizable
  Edit margins, padding
  Font settings, text alignment
  C...
Preview Website

Preview on different devices

Optimized look & feel adaptations
  iPhone
  Android
  Default mobile look
...
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.osmo...
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
Upcoming SlideShare
Loading in...5
×

Mobile CMS - CMSExpo 2010

8,252

Published on

Presentation given at CMSExpo 2010 on Mobile CMS systems

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
  • You might also want to look at JAENOVATION Mobile CMS includes a wide variety of features and functionality available both in Apple, Android, and HTML 5 applications built by the Platform as well as Mobile APIs that can be integrated into existing apps and mobile web pages. To see DEMO http://www.jaenovation.com/mobile-cms
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,252
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
202
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile CMS - CMSExpo 2010"

  1. 1. Going Mobile CMSExpo Chicago 2010 Tom Deryckere Drupal & Mobile Web architect
  2. 2. If any questions Use twitter (@twom #cmsx) Save them for the end or come speak to me after the presentation.
  3. 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. 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. 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. 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. 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. 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. 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. 10. History, usage MOBILE WEB
  11. 11. Back in 1999 Voice Messaging Infrared HIGH END DEVICE
  12. 12. Today Voice, messaging Web Camera Bluetooth Java ENTRY LEVEL DEVICE
  13. 13. Today • Smartphone • Multimedia device • Connected • Large touch screens • Gaming NOTE: Look at your market! Demographic Geographic location Industry
  14. 14. Technology Trends From WAP, over IMODE, to XHTML
  15. 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. 16. Powerful devices Fast network connections Affordable data plans Mobile Web WHERE IS THE COMPLEXITY?
  17. 17. 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, ...
  18. 18. Mobile OS OBJECTIVE C JAVA C / Python / Flash / JAVA .NET / C++ / Java HTML/JS/CSS
  19. 19. Mobile OS OBJECTIVE C JAVA C / Python / Flash / JAVA .NET / C++ / Java HTML/JS/CSS
  20. 20. Market share Source AdMob
  21. 21. Top Devices Source AdMob
  22. 22. NATIVE VS. WEB APPLICATIONS
  23. 23. 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 *
  24. 24. 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.
  25. 25. 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
  26. 26. Web only for Trivial Apps? Google engineers ported Quake II to browsers Showing capabilities of HTML5-compatible browsers Cross-compiled 3D engine to JavaScript
  27. 27. 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
  28. 28. BONDI: Going even Further TODO
  29. 29. 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
  30. 30. Mobile Usage Trends
  31. 31. Typical use cases Activities driving mobile usage Shopping Events / conferences Vacation / travelling Quick lookup On the road On the loo
  32. 32. 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
  33. 33. M-Commerce
  34. 34. Search Location is added for GPS enabled phones.
  35. 35. Traffic information
  36. 36. Social networking
  37. 37. Reservations
  38. 38. News portals
  39. 39. 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!
  40. 40. Web mobilization GENERAL TECHNIQUES
  41. 41. Things to do Above all: define scope, audience and features. Device Detection URL Redirection Create Mobile Templates Transcode the content
  42. 42. 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!
  43. 43. 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.
  44. 44. Mobile template Create separate template Only the website’s layout changes Content can be reused Important: Mobile template’s quality
  45. 45. 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/
  46. 46. Mobile design http://www.templatemonster.com/cat egory/mobile-templates/
  47. 47. 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
  48. 48. Transcoding Services Siruna platform Composer with XML based adaptation rules Quick preview
  49. 49. Transcoding services Apache Mobile Filter – Device detection using WURFL – Redirection to mobile url – Transcoding of images http://www.apachemobilefilter.org
  50. 50. Mobile Support in Wordpress, Joomla! And Drupal
  51. 51. Wordpress Good build in support Often easier site types (blog) Solutions – Wordpress mobile pack – WPTouch – MobilePress – OSMOBI
  52. 52. Examples
  53. 53. Joomla! JED
  54. 54. 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
  55. 55. 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”
  56. 56. 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
  57. 57. J Admin Mobile Lite Administer your Joomla! Site from your iphone
  58. 58. 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.
  59. 59. 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.
  60. 60. 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
  61. 61. Drupal Several modules available – Mobile themes – Device detection – Theme switching – SMS integration – QR Codes – Mobile payment Mainly need for mobile templates
  62. 62. Mobile Tools Device detection Theme switching (per device type) Go back to desktop link (!) Mobile permission system
  63. 63. Mobile Plugin Similar to mobile tools! http://drupal.org/project/mobileplugin
  64. 64. Nokia mobile templates http://drupal.org/project/nokia_mobile
  65. 65. iDrupal (iui) Template + interface to manage your site from the mobile phone http://drupal.org/project/idrupal
  66. 66. Wurfl Flexible device detection http://drupal.org/project/wurfl
  67. 67. http://drupal.org/project/foursquare
  68. 68. USING OSMOBI
  69. 69. Install CMS extension Download and install OSMOBI plugin & template Activate plugin
  70. 70. Start Mobilizing Your Site
  71. 71. Remove, Rearrange Content Everything is selectable (move it up, down, or hide)
  72. 72. Adapt Navigation Create and modify additional dropdown menus
  73. 73. Change Colors & Logo Originally selected from desktop template Can be tweaked Color schema inspiration: Adobe Kuler Upload a logo
  74. 74. Change Style and CSS All page elements are highly customizable Edit margins, padding Font settings, text alignment Custom CSS inclusion
  75. 75. Preview Website Preview on different devices Optimized look & feel adaptations iPhone Android Default mobile look Automatically selected
  76. 76. OSMOBI EXAMPLES
  77. 77. Show Cases http://www.osmobi.com/gallery
  78. 78. QUESTIONS?
  79. 79. Contact or training Mail: Tom.Deryckere@gmail.com Blog: http://www.mobiledrupal.com OSMOBI: http://www.osmobi.com Twitter: @twom
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×