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

Facebook

Twitter

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

• mikko@mfabrik.com

• http://twitter.com/moo9000

• http://linkedin.com/in/ohtis