Mad about mobile


Published on

Ways to mobilize your web site, building mobile apps and Web and Mobile add-on product for Plone

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mad about mobile

  1. Mad about mobile Why and how mobilize your web site Mikko Ohtamaa Plone Conference 2010
  2. Agenda • Why... you needa mobile site • How.... mobile site can be build • What... mobile special features you can utilize • App vs. mobile site • Mobilizing Plone and demo
  3. To mobile or not to mobile?
  4. Why (business wise) The user wants it....
  5. Why (business wise) ...your customer wants it... The user wants it....
  6. Why (business wise) ...your customer wants it... .... or you make your customer want it.... The user wants it....
  7. Why (business wise) ...your customer wants it... .... or you make your customer want it.... ... or “because of Steve Jobs” The user wants it....
  8. Why (statistical)
  9. Why (technical) from mobile.sniffer.detect import detect_mobile_browser from mobile.sniffer.utilities import get_user_agent # Get HTTP_USER_AGENT from HTTP request object ua = get_user_agent(self.request) if ua: # Apply reg if detect_mobile_browser(ua): # Redirect the visitor from a web site to a mobile site pass else: # A regular web site visitor pass
  10. Some things are mobilizing before others Communications Facebook Twitter eCommerce Travel Government News RSS / Google Reader eBay Amazon Entertainment Does the boring stuff actually wants to go mobile? TV series Games Mikko’s perceived degree of mobilization
  11. Mobile only “special features” • Geolocation (HTML5) and navigation • Click-to-call, SMS and contact card download • “Touch icon” - special bookmark icon appearing in Apple menu • Offline and HTML5 applification • Touch events (JS) Also, you are not bound to your desktop
  12. How do you mobilize?
  13. There are little services born mobile ... most integrators face the task to bring the existing web to mobile
  14. Techniques to mobilize your site mobile.css Theming proxy Mobile theming proxy as a service Mobilization add-on Separate site Development complexity User Experience Mobile app
  15. mobile.css Use CSS styling to create a mobile version of your existing HTML site
  16. Plone 4 does good job ...but have you noticed Plone 4 theme “Sunburst” is utterly boring? FlexibleCSSgrids
  17. When we face a real web site... Try mobilize this with CSS!
  18. Build mobile 1st, web 2nd FlexibleCSSgrids
  19. face the limitations • CSS can’t change element order in HTML • Images are resized at the client (big downloads) • If mobile.css is applied as overlay all web CSS are loaded • You cannot discriminate Javascript easily
  20. Theming proxy mobile.css + HTML adjustments
  21. XDV / Delivarance • XDV and Deliverance theming proxies are already used with Plone • I don’t know if there have been succesfull mobilizations with these, but I am willing to help when someone wants to create one
  22. Still problems left • Mobile browser detection = which HTML to serve • Image resize • Different content for web and mobile ...face the compromises with the user experience
  23. Mobile theming services
  24. Mobilizing using an extensions
  25. Basic extension features • Detect and redirect mobile browsers • Discriminate content going to mobile; add mobile specific texts and titles • Mobile theme layer and theme skeleton • Automatic image resize and defloat • Mobile analytics (non- Javascripted) • Feature database and heurestics for handling special content: video, phone calls, SMS, location
  26. Mobilization plug-ins • mFabrik Web and Mobile (Plone) • Mobile Joomla! (Joomla!) • WPTouch (Wordress) • ... and so on
  27. Separate mobile site ... the last alternative
  28. Building a separate mobile site is justified... • The web site CMS is proprietary and mobilization is not supported • The mobile site mostly contains only few pages static content - just build a site on an existing free service (like • “Organizational reasons”
  29. Going native? When build a mobile application
  30. It’s the user experience... .... and no Javascript framework can currently emulate it
  31. Tecnical reasons • Push notifications - interact with your user • Integrate with system software, like contacts • Payment integration • Image upload
  32. Tradeoff • It costs 5x - 10x more • Platform choices are not future proof • Your service is accessible to less people.... • ...however you may reach more people and you probably reach people who have money and willing to pay Application stores are about distribution
  33. App builders • Medium, large enterprise • High valued brand • Media and entertainment • Retail • Targeting people with money Mobile site builders • Governmen, non-profit • Small entreprise • eCommerce • Targeting developing world, youth and students
  34. With an app you still need to manage content... ... and Plone is very, very, good managing content
  35. iTouchy Combining HTML publishing with native UI
  36. Web and Mobile Mobilize your Plone site in an instant
  37. Web and Mobile • Turn key solution to mobilize Plone site • Build by mFabrik (previously Go Mobile under name of Twinapex) • Used in production at least on five sites Quality and technology superior to any multichannel CMS solution on the markets
  38. Travel News Leisure eCommerce Corporate
  39. Web and Mobile has documentation ... and I mean it
  40. Not just for Plone people Django and other Python folks can enjoy generic mobile.* Python packages We will merge our overlapping work with mobi.* packages from Infrae
  41. Mobile browser detection • Solving “5000 incomplete database entries” • Two pass detection recommended: 1) detect if it’s mobile 2) what features it has • Used for HTML customizations (vendor adaption) and resizing images
  42. Convergence • Web and Mobile support content discrimination • web and mobile • web only • mobile only • (Install Go Mobile for Plone Convergence add-on)
  43. Mobile themes • Paster template: gomobile_theme provided by gomobile.template package buildout.cfg:: parts = ... paster [paster] recipe = zc.recipe.egg eggs = PasteScript gomobile.templates ${instance:eggs} Then you can create your own theme skeleton with:: bin/buildout # reruns to build paster command cd src ../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname
  44. Do cool things Click-to-call Open waypoint in navigator
  45. Commercial support • First Plone add-on product to receive commercial support packages? • We plan to charge for • maintenance and fixing bugs and • rolling out mobile handset feature database update • Individual (~9 € / mo) and Integrator (~349 € / mo) licenses Give us your money and we give you mobile future
  46. Thank you • • • •
  1. A particular slide catching your eye?

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