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

1. Mad about mobile
Why and how mobilize your web site
Mikko Ohtamaa
Plone Conference 2010
http://www.flickr.com/photos/mastrobiggo/2322337810

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?
http://www.flickr.com/photos/mlorens/3513414830/

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)
http://www.flickr.com/photos/worldofjan/3618343607/
Also, you are not bound
to your desktop

12. How do you mobilize?
http://www.flickr.com/photos/7552532@N07/4080188860/

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
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
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 wordpress.com)
• “Organizational reasons”

29. Going native?
When build a mobile application

30. It’s the user experience...
.... and no Javascript framework can
currently emulate it
http://www.flickr.com/photos/fatboyke/3498213542/

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. 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
http://www.flickr.com/photos/stabilo-boss/93136022

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
http://webandmobile.mfabrik.com/docs

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
http://www.flickr.com/photos/daviddmuir/2125697998
Give us your money
and we give you
mobile future

46. Thank you
• http://webandmobile.mfabrik.com
• mikko@mfabrik.com
• http://twitter.com/moo9000
• http://linkedin.com/in/ohtis