Your SlideShare is downloading. ×
Mobile CMS - CMSExpo 2010
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile CMS - CMSExpo 2010


Published on

Presentation given at CMSExpo 2010 on Mobile CMS systems

Presentation given at CMSExpo 2010 on Mobile CMS systems

Published in: Technology
1 Comment
  • 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
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Going Mobile CMSExpo Chicago 2010 Tom Deryckere Drupal & Mobile Web architect
  • 2. If any questions Use twitter (@twom #cmsx) Save them for the end or come speak to me after the presentation.
  • 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. 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. 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. 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. 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. ... 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. Mobile Readiness Example mobiReady ( evaluation of • Very poor overall score (1.3/5) • Too slow, too expensive, unadapted structure, ....
  • 10. History, usage MOBILE WEB
  • 11. Back in 1999 Voice Messaging Infrared HIGH END DEVICE
  • 12. Today Voice, messaging Web Camera Bluetooth Java ENTRY LEVEL DEVICE
  • 13. Today • Smartphone • Multimedia device • Connected • Large touch screens • Gaming NOTE: Look at your market! Demographic Geographic location Industry
  • 14. Technology Trends From WAP, over IMODE, to XHTML
  • 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. Powerful devices Fast network connections Affordable data plans Mobile Web WHERE IS THE COMPLEXITY?
  • 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. Mobile OS OBJECTIVE C JAVA C / Python / Flash / JAVA .NET / C++ / Java HTML/JS/CSS
  • 19. Mobile OS OBJECTIVE C JAVA C / Python / Flash / JAVA .NET / C++ / Java HTML/JS/CSS
  • 20. Market share Source AdMob
  • 21. Top Devices Source AdMob
  • 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. 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. 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. 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. 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. BONDI: Going even Further TODO
  • 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. Mobile Usage Trends
  • 31. Typical use cases Activities driving mobile usage Shopping Events / conferences Vacation / travelling Quick lookup On the road On the loo
  • 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. M-Commerce
  • 34. Search Location is added for GPS enabled phones.
  • 35. Traffic information
  • 36. Social networking
  • 37. Reservations
  • 38. News portals
  • 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. Web mobilization GENERAL TECHNIQUES
  • 41. Things to do Above all: define scope, audience and features. Device Detection URL Redirection Create Mobile Templates Transcode the content
  • 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. 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. Mobile template Create separate template Only the website’s layout changes Content can be reused Important: Mobile template’s quality
  • 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. Mobile design egory/mobile-templates/
  • 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. Transcoding Services Siruna platform Composer with XML based adaptation rules Quick preview
  • 49. Transcoding services Apache Mobile Filter – Device detection using WURFL – Redirection to mobile url – Transcoding of images
  • 50. Mobile Support in Wordpress, Joomla! And Drupal
  • 51. Wordpress Good build in support Often easier site types (blog) Solutions – Wordpress mobile pack – WPTouch – MobilePress – OSMOBI
  • 52. Examples
  • 53. Joomla! JED
  • 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. 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. jWURFL Integrates WURFL device detection in Joomla! Repository of +-9000 devices Access to detailed device properties Useful tool for mobile-minded extension developers
  • 57. J Admin Mobile Lite Administer your Joomla! Site from your iphone
  • 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. 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. 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. Drupal Several modules available – Mobile themes – Device detection – Theme switching – SMS integration – QR Codes – Mobile payment Mainly need for mobile templates
  • 62. Mobile Tools Device detection Theme switching (per device type) Go back to desktop link (!) Mobile permission system
  • 63. Mobile Plugin Similar to mobile tools!
  • 64. Nokia mobile templates
  • 65. iDrupal (iui) Template + interface to manage your site from the mobile phone
  • 66. Wurfl Flexible device detection
  • 67.
  • 69. Install CMS extension Download and install OSMOBI plugin & template Activate plugin
  • 70. Start Mobilizing Your Site
  • 71. Remove, Rearrange Content Everything is selectable (move it up, down, or hide)
  • 72. Adapt Navigation Create and modify additional dropdown menus
  • 73. Change Colors & Logo Originally selected from desktop template Can be tweaked Color schema inspiration: Adobe Kuler Upload a logo
  • 74. Change Style and CSS All page elements are highly customizable Edit margins, padding Font settings, text alignment Custom CSS inclusion
  • 75. Preview Website Preview on different devices Optimized look & feel adaptations iPhone Android Default mobile look Automatically selected
  • 77. Show Cases
  • 78. QUESTIONS?
  • 79. Contact or training Mail: Blog: OSMOBI: Twitter: @twom