Mad about mobile
46
Mad about mobile Why and how mobilize your web site Mikko Ohtamaa Plone Conference 2010 http://www.flickr.com/photos/mastrobiggo/2322337810
-
Upload
mikko-ohtamaa -
Category
Documents
-
view
2.574 -
download
0
description
Ways to mobilize your web site, building mobile apps and Web and Mobile add-on product for Plone
Transcript of Mad about mobile
Mad about mobileWhy and how mobilize your web site
Mikko OhtamaaPlone Conference 2010
http://www.flickr.com/photos/mastrobiggo/2322337810
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
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”
The user wants it....
Why (statistical)
Why (technical)
from mobile.sniffer.detect import detect_mobile_browserfrom mobile.sniffer.utilities import get_user_agent
# Get HTTP_USER_AGENT from HTTP request objectua = 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
Some things are mobilizing before others
Communications
eCommerce
Travel
Government
NewsRSS /
Google Reader
eBay
Amazon
Entertainment
Does the boring stuff actually
wants to go mobile?
TV series
Games
Mikko’s p
erceive
d degree
of mobiliza
tion
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
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 site
Development co
mplexity
User Experie
nceMobile app
mobile.cssUse 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?
Flex
ible
CSS
gri
ds
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
Flex
ible
CSS
gri
ds
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
Theming proxymobile.css + HTML adjustments
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
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
Mobile theming services
Mobilizing using an extensions
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
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 mobile site mostly contains only few pages static content - just build a site on an existing free service (like wordpress.com)
• “Organizational reasons”
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/3498213542/
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
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
App builders
• Medium, large enterprise
• High valued brand
• Media and entertainment
• Retail
• Targeting people with money
Mobile site builders
App business
App business
App business
• Governmen, non-profit
• Small entreprise
• eCommerce
• Targeting developing world, youth and students
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
iTouchyCombining HTML publishing with native UI
Web and MobileMobilize 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)
• Used in production at least on five sites
Quality and technology superior to any multichannel CMS solution on the markets
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 overlapping work with mobi.* packages from Infrae
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
Convergence• Web and Mobile support content discrimination
• web and mobile
• web only
• mobile only
• (Install Go Mobile for Plone Convergence add-on)
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
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
• 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 moneyand we give you mobile future
Thank you• http://webandmobile.mfabrik.com
• http://twitter.com/moo9000
• http://linkedin.com/in/ohtis
