Mad about mobile
Why and how mobilize your web site
Mikko Ohtamaa
Plone Conference 2010
http://www.flickr.com/photos/mastro...
Agenda
• Why... you needa mobile site
• How.... mobile site can be build
• What... mobile special features you can
utilize...
To mobile or not to
mobile?
http://www.flickr.com/photos/mlorens/3513414830/
Why (business wise)
The user wants it....
Why (business wise)
...your customer wants it...
The user wants it....
Why (business wise)
...your customer wants it...
.... or you make your customer want it....
The user wants it....
Why (business wise)
...your customer wants it...
.... or you make your customer want it....
... or “because of Steve Jobs”...
Why (statistical)
Why (technical)
from mobile.sniffer.detect import detect_mobile_browser
from mobile.sniffer.utilities import get_user_agen...
Some things are mobilizing before others
Communications
Facebook
Twitter
eCommerce
Travel
Government
News
RSS /
Google Rea...
Mobile only “special features”
• Geolocation (HTML5) and
navigation
• Click-to-call, SMS and contact
card download
• “Touc...
How do you mobilize?
http://www.flickr.com/photos/7552532@N07/4080188860/
There are little services
born mobile
... most integrators face the task to bring the existing
web to mobile
Techniques to
mobilize your site
mobile.css
Theming proxy
Mobile theming
proxy as a service
Mobilization add-on
Separate s...
mobile.css
Use CSS styling to create a mobile version of your
existing HTML site
Plone 4 does good job
...but have you noticed Plone 4 theme “Sunburst” is utterly boring?
FlexibleCSSgrids
When we face a real web site...
Try mobilize this with CSS!
Build mobile 1st, web 2nd
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
FlexibleCSSgrids
face the limitations
• CSS can’t change
element order in
HTML
• Images are
resized at the
client (big
downloads)
• If mobi...
Theming proxy
mobile.css + HTML adjustments
XDV / Delivarance
• XDV and Deliverance theming proxies are already used
with Plone
• I don’t know if there have been succ...
Still problems left
• Mobile browser detection = which HTML to serve
• Image resize
• Different content for web and mobile...
Mobile theming
services
Mobilizing using an
extensions
Basic extension
features
• Detect and redirect
mobile browsers
• Discriminate content
going to mobile; add
mobile specific ...
Mobilization plug-ins
• mFabrik Web and Mobile
(Plone)
• Mobile Joomla! (Joomla!)
• WPTouch (Wordress)
• ... and so on
Separate mobile site
... the last alternative
Building a separate
mobile site is justified...
• The web site CMS is proprietary and
mobilization is not supported
• The m...
Going native?
When build a mobile application
It’s the user experience...
.... and no Javascript framework can
currently emulate it
http://www.flickr.com/photos/fatboyke...
Tecnical reasons
• Push notifications -
interact with your
user
• Integrate with
system software, like
contacts
• Payment i...
Tradeoff
• It costs 5x - 10x more
• Platform choices are not
future proof
• Your service is
accessible to less
people....
...
App
builders
• Medium, large
enterprise
• High valued brand
• Media and
entertainment
• Retail
• Targeting people with
mon...
With an app you still need to
manage content...
... and Plone is very, very, good managing content
http://www.flickr.com/ph...
iTouchy
Combining HTML publishing with native UI
Web and Mobile
Mobilize your Plone site in an instant
Web and Mobile
• Turn key solution to mobilize Plone site
• Build by mFabrik (previously Go Mobile under name of
Twinapex)...
Travel News
Leisure eCommerce
Corporate
Web and Mobile has
documentation
... and I mean it
http://webandmobile.mfabrik.com/docs
Not just for Plone
people
Django and other Python folks can enjoy generic
mobile.* Python packages
We will merge our overl...
Mobile browser
detection
• Solving “5000 incomplete database entries”
• Two pass detection recommended:
1) detect if it’s ...
Convergence
• Web and Mobile support content discrimination
• web and mobile
• web only
• mobile only
• (Install Go Mobile...
Mobile themes
• Paster template: gomobile_theme provided by
gomobile.template package
buildout.cfg::
parts =
...
paster
[p...
Do cool things
Click-to-call
Open waypoint in
navigator
Commercial support
• First Plone add-on product to receive
commercial support packages?
• We plan to charge for
• maintena...
Thank you
• http://webandmobile.mfabrik.com
• mikko@mfabrik.com
• http://twitter.com/moo9000
• http://linkedin.com/in/ohtis
Upcoming SlideShare
Loading in...5
×

Mad about mobile

2,632

Published on

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

3 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,632
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
3
Likes
3
Embeds 0
No embeds

No notes for slide

Mad about mobile

  1. 1. Mad about mobile Why and how mobilize your web site Mikko Ohtamaa Plone Conference 2010 http://www.flickr.com/photos/mastrobiggo/2322337810
  2. 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. 3. To mobile or not to mobile? http://www.flickr.com/photos/mlorens/3513414830/
  4. 4. Why (business wise) The user wants it....
  5. 5. Why (business wise) ...your customer wants it... The user wants it....
  6. 6. Why (business wise) ...your customer wants it... .... or you make your customer want it.... The user wants it....
  7. 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. 8. Why (statistical)
  9. 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. 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. 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) http://www.flickr.com/photos/worldofjan/3618343607/ Also, you are not bound to your desktop
  12. 12. How do you mobilize? http://www.flickr.com/photos/7552532@N07/4080188860/
  13. 13. There are little services born mobile ... most integrators face the task to bring the existing web to mobile
  14. 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. 15. mobile.css Use CSS styling to create a mobile version of your existing HTML site
  16. 16. Plone 4 does good job ...but have you noticed Plone 4 theme “Sunburst” is utterly boring? FlexibleCSSgrids
  17. 17. When we face a real web site... Try mobilize this with CSS!
  18. 18. Build mobile 1st, web 2nd http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu FlexibleCSSgrids
  19. 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. 20. Theming proxy mobile.css + HTML adjustments
  21. 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. 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. 23. Mobile theming services
  24. 24. Mobilizing using an extensions
  25. 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. 26. Mobilization plug-ins • mFabrik Web and Mobile (Plone) • Mobile Joomla! (Joomla!) • WPTouch (Wordress) • ... and so on
  27. 27. Separate mobile site ... the last alternative
  28. 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 wordpress.com) • “Organizational reasons”
  29. 29. Going native? When build a mobile application
  30. 30. It’s the user experience... .... and no Javascript framework can currently emulate it http://www.flickr.com/photos/fatboyke/3498213542/
  31. 31. Tecnical reasons • Push notifications - interact with your user • Integrate with system software, like contacts • Payment integration • Image upload http://www.flickr.com/photos/nimbuzz/3750368010
  32. 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. 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. 34. With an app you still need to manage content... ... and Plone is very, very, good managing content http://www.flickr.com/photos/stabilo-boss/93136022
  35. 35. iTouchy Combining HTML publishing with native UI
  36. 36. Web and Mobile Mobilize your Plone site in an instant
  37. 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. 38. Travel News Leisure eCommerce Corporate
  39. 39. Web and Mobile has documentation ... and I mean it http://webandmobile.mfabrik.com/docs
  40. 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. 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. 42. Convergence • Web and Mobile support content discrimination • web and mobile • web only • mobile only • (Install Go Mobile for Plone Convergence add-on)
  43. 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. 44. Do cool things Click-to-call Open waypoint in navigator
  45. 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 http://www.flickr.com/photos/daviddmuir/2125697998 Give us your money and we give you mobile future
  46. 46. Thank you • http://webandmobile.mfabrik.com • mikko@mfabrik.com • http://twitter.com/moo9000 • http://linkedin.com/in/ohtis
  1. A particular slide catching your eye?

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

×