Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Mobile-izing Your Organization with Drupal: Acquia webinar
Download to read offline and view in fullscreen.


Mobile CMS - CMSExpo 2010

Download to read offline

Presentation given at CMSExpo 2010 on Mobile CMS systems

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  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 ( evaluation of • 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
  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. • Approval of application can take / time /
  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 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
  46. 46. Mobile design 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
  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)
  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
  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
  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!
  64. 64. Nokia mobile templates
  65. 65. iDrupal (iui) Template + interface to manage your site from the mobile phone
  66. 66. Wurfl Flexible device detection
  67. 67.
  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
  77. 77. Show Cases
  78. 78. QUESTIONS?
  79. 79. Contact or training Mail: Blog: OSMOBI: Twitter: @twom
  • sbepstein

    Nov. 10, 2012
  • jenskuesters

    Dec. 22, 2011
  • rodolfodue

    Jul. 28, 2011
  • cybarmedia

    Jul. 24, 2011
  • yongboy

    May. 21, 2011
  • charlesriccardi

    Apr. 19, 2011
  • karthikkumark

    Apr. 6, 2011
  • slywebita

    Aug. 18, 2010
  • alloretr

    May. 14, 2010

Presentation given at CMSExpo 2010 on Mobile CMS systems


Total views


On Slideshare


From embeds


Number of embeds