mad about mobile
DESCRIPTION
Ways to mobilize your web site, building mobile apps and Web and Mobile add-on product for PloneTRANSCRIPT
![Page 1: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/1.jpg)
Mad about mobileWhy and how mobilize your web site
Mikko OhtamaaPlone Conference 2010
http://www.flickr.com/photos/mastrobiggo/2322337810
![Page 2: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/2.jpg)
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
![Page 3: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/3.jpg)
To mobile or not to mobile?
http://www.flickr.com/photos/mlorens/3513414830/
![Page 4: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/4.jpg)
Why (business wise)The user wants it....
![Page 5: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/5.jpg)
Why (business wise)
...your customer wants it...
The user wants it....
![Page 6: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/6.jpg)
Why (business wise)
...your customer wants it...
.... or you make your customer want it....
The user wants it....
![Page 7: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/7.jpg)
Why (business wise)
...your customer wants it...
.... or you make your customer want it....
... or “because of Steve Jobs”
The user wants it....
![Page 8: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/8.jpg)
Why (statistical)
![Page 9: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/9.jpg)
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
![Page 10: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/10.jpg)
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
![Page 11: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/11.jpg)
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
![Page 12: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/12.jpg)
How do you mobilize?http://www.flickr.com/photos/7552532@N07/4080188860/
![Page 13: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/13.jpg)
There are little services born mobile
... most integrators face the task to bring the existing web to mobile
![Page 14: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/14.jpg)
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
![Page 15: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/15.jpg)
mobile.cssUse CSS styling to create a mobile version of your
existing HTML site
![Page 16: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/16.jpg)
Plone 4 does good job
...but have you noticed Plone 4 theme “Sunburst” is utterly boring?
Flex
ible
CSS
gri
ds
![Page 17: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/17.jpg)
When we face a real web site...
Try mobilize this with CSS!
![Page 18: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/18.jpg)
Build mobile 1st, web 2nd
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Flex
ible
CSS
gri
ds
![Page 19: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/19.jpg)
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
![Page 20: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/20.jpg)
Theming proxymobile.css + HTML adjustments
![Page 21: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/21.jpg)
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
![Page 22: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/22.jpg)
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
![Page 23: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/23.jpg)
Mobile theming services
![Page 24: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/24.jpg)
Mobilizing using an extensions
![Page 25: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/25.jpg)
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
![Page 26: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/26.jpg)
Mobilization plug-ins• mFabrik Web and Mobile
(Plone)
• Mobile Joomla! (Joomla!)
• WPTouch (Wordress)
• ... and so on
![Page 27: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/27.jpg)
Separate mobile site... the last alternative
![Page 28: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/28.jpg)
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”
![Page 29: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/29.jpg)
Going native?When build a mobile application
![Page 30: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/30.jpg)
It’s the user experience...
.... and no Javascript framework can currently emulate it
http://www.flickr.com/photos/fatboyke/3498213542/
![Page 31: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/31.jpg)
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
![Page 32: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/32.jpg)
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
![Page 33: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/33.jpg)
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
![Page 34: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/34.jpg)
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
![Page 35: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/35.jpg)
iTouchyCombining HTML publishing with native UI
![Page 36: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/36.jpg)
Web and MobileMobilize your Plone site in an instant
![Page 37: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/37.jpg)
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
![Page 38: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/38.jpg)
Travel News
Leisure eCommerce
Corporate
![Page 39: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/39.jpg)
Web and Mobile has documentation
... and I mean it
http://webandmobile.mfabrik.com/docs
![Page 40: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/40.jpg)
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
![Page 41: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/41.jpg)
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
![Page 42: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/42.jpg)
Convergence• Web and Mobile support content discrimination
• web and mobile
• web only
• mobile only
• (Install Go Mobile for Plone Convergence add-on)
![Page 43: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/43.jpg)
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
![Page 44: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/44.jpg)
Do cool things
Click-to-call
Open waypoint in navigator
![Page 45: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/45.jpg)
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
![Page 46: Mad about mobile](https://reader033.vdocuments.site/reader033/viewer/2022061214/5499df69b47959b1628b47bd/html5/thumbnails/46.jpg)
Thank you• http://webandmobile.mfabrik.com
• http://twitter.com/moo9000
• http://linkedin.com/in/ohtis