Presentation on mobile web development as presented at the Joomla Day 2009 in NY

1. Basics of making mobile
websites
Joomladay NYC 2009
Tom Deryckere
Software Architect / Siruna
http://twitter.com/twom

2. About Siruna
open source company
We think in small screens (Mobile Web)
We develop solutions to help the development of
mobile websites
With a very strong focus on OS CMS systems (Drupal
and Joomla)
Mobile partner of several web agencies
2

3. Some research
1. Who owns an iPhone, Android or Palm pre
2. Who has access to the internet on his mobile phone
3. Who has already created a mobile website
4. Who has currently got an ongoing project with a mobile
part
5. Who is planning to make a mobile site in the coming
three months
3

4. Technology Trends
25 years ago :The first GSM:11 kg
Today: iPhoney’s, HSDPA, MID’s

5. Technology that works
From WAP to iMode to xHTML

6. Network side TECHNOLOGY
From slow connections to fast connections

7. Current state
35 percent less successful completing
Web site tasks via their mobile phones than
they are on a regular PC
average success rate for users to complete
tasks via mobile was only 59 percent.
“A surprising and annoying thing was that it
was so hard for people to actually access
mobile sites,”
7

8. Current state
Web sites designed for PC compatibility will most
likely render improperly on mobile phones and create
a whole new set of additional obstacles for the mobile
Internet user.
However, there is still hope for mobile Web developers,
publishers and marketers: User performance could be
improved by 20 percent by creating mobile-optimized
sites, according to Neilsen Norman Group
8

9. Reasons to go mobile
Applications already driving mobile usage
....
Drive traffic on mobile phones to websites
Find relevant content
Advertisment
??? Fast download
Intuitive
....
9

10. Reasons to go mobile
Activities driving mobile usage
Events / conferences Shopping
Vacation / travelling
Commuting
Toilet
10

11. 11

12. Mobile Web according google
“We believe the web has won and over the next several
years, the browser, for economic reasons almost, will
become the platform that matters and certainly that’s
where Google is investing.”
Src: http://blogs.ft.com/techblog/2009/07/app-stores-are-not-the-future-says-google/
12

13. SOME EXAMPLES
13

14. Examples (Drupal – sorry ;))
DrupalCon Paris:
http://drupalcon.siruna.com
Slate:
http://twom.slate.mobixx.eu
14

15. Examples (Drupal)
Garland mobile:
http://twom.garland.mobixx.eu
Marina:
http://twom.marina.mobixx.eu
Zen:
http://twom.zen.mobixx.eu
XIO:
http://xio.siruna.com
http://portal.siruna.com
15

16. Examples
Moneywise
− http://twom.mws.mobixx.eu
16

17. Examples Joomla
17

18. WHERE IS THE COMPLEXITY
18

19. Complexity
Device fragmentation:
− Millions of devices
− Different Operating systems
− Different capabilities
• Ex: screen sizes, javascript support, CSS / xHTML support, video support
− ...
Usability: make a fun and easy experience
− Content has to be easy to find
− Reduce scrolling (no horizontal scrolling)
− Make links clickable (not too small)
− Easy navigation structure that is easy to find
− ...
How to bring users to the mobile website
− Two urls? Redirection?
19

20. Complexity
Optimization of download size
− Network connections are not always optimal (between 50kb/s –
1,8Mbit/s
− Don’t let the user wait, don’t let him download content that he will
not use
Bring relevant content to the mobile user
− Understand what he will look for (think and plan well!!)
− Is not easy (especially for the customer)
20

21. On fragmentation
Convergence is coming
Javascript becomes more and more the standard
Desktop html works on mobile devices
21

22. More interesting data
United States Handset Data - April 2009 India Handset Data - April 2009
Requests: 3,538,714,000 Requests: 447,079,855
480x320 px
176x220 px
240x320 px
320x240 px
480x320 px
Palm pre: 480 x 320
22
Source: AdMob

23. Complexity
Simple (double) navigation
No video
Easy access to stories 23

24. Some background
GOING MOBILE: WEBSITE OR
APPLICATION
24

25. Possibilites
Developing a ‘native application’
− Powerfull application
− Written for specific operating system
− E.g; Iphone or a Android apps
Developing widgets
− Xhtml, javascript and css
− Runs in a widget engine (e.g. Nokia webruntime and Palm Pré)
− Javascript api often have access to device resources
− Powerfull and easy to create
Developing mobile websites
− Websites
− html/javascript/css
− Easy to develop
− Often lacks access to gps or camera (but support is quickley getting
better)
25

26. Overview
Platform Language
iPhone Objective C
Android Java (Dalvik JVM)
Windows mobile .NET / C++ / Java
Nokia C++, java, Flash lite,
python
Palm Pre HTML / CSS / With own touch
javascript (services api +
widgets)
What some would call
widgets.
Blackberry Java
Browser HTML / CSS / W3C standards,
javascript reach
26

27. Recommended reading:
Complexity / Access to device resource http://www.scribd.com/doc/17431252/Hitch-Hikers-Guide-Runtime-Booklet
power -Network interface
- camera C++
- database objective C
- contacts
- calender JAVA ME NET CF
- Accelero meter
- GPS Python scripting
- ..
Widgets
Web
Device compatibility

28. Browser technology
Different standards supported
− xHTML – MP (subset of xHTML) is recommended
− But full xHTML works fine on a lot of devices
− CSS + javascript
Standardization by W3C
Industry initiative BONDI (http://www.bondi.com)
stimulates spread of these (and more) standards
Main browsers support ‘full web’
− Opera
− Fennec
− Google Android
− Safari WebKit!!
− Palm Pré
− skyfire
28

29. SOME MORE EXAMPLES
29

30. General Login or Register
Form a multi-column based site going towards a 1
column site
We are talking about generic designs
Second navigation
New forum posts
30 New Comments
Sponsors etc ...

31. Mobile template: Rules of thumb
Rescale images for the mobile screen
No fixed margins (certainly left, right and bigger then
5px)
No fixed widths
No floats
Limit usage of fixed font sizes
Reduce the usage of tables
Navigation in a dropdown list works well
Limit the amount of content!
31

32. Example templates

33. Examples

34. Example: new joomla site
34

35. Examples

36. Mobile modules for Joomla
36

37. PDA-plugin for joomla
Combination of a mobile template and a joomla plugin
− Mobile template provides a very simple view of your site
Very easy to use
No image transcoding
Limited in the number of modules that can be viewed
Last update already dates from more then a year back
37

38. PDA-Plugin config
38

39. Mobilebot
http://www.nearsoft.com/blog/mobilebot-joomla-goes-
mobile.html
Focusses on switching templates for different devices
Change html content based on the device
Does not provide a mobile view
39

40. WAFL
Experimental student project (guided by Siruna)
Dynamically create a mobile template from each existing
theme
Use the Siruna transcoding engine to ‘real-time’
transcode for optimized mobile viewing
Easy to use
Quality is difficult to predict (best effort)
40

41. Osmobi plugin + template
New solution taking the best of all worlds
- Plugin
- Template
- And transcoding service
41

42. OSMOBI

43. Leave your e-mail or business card to get
a invitation for the beta site!!

44. Download the Osmobi plugin and template

45. Install plugin on your existing website

46. Start building your mobile website with Osmobi

47. Remove or rearrange content

48. Change CSS and style

49. Change Colors

50. Add Advertisment and Analytics

51. More features
• Device detection
• Website Fit to screen
• Menus in user friendly dropdown box
• Automatic Image resizing
• linearization of tables
• availability of Iphone Webclip
• Selection out different mobile themes
• ...

52. What is transcoding?
TRANSCODING YOUR SITE
52

53. Creating the mobile look
Create you own themes (see rules of thumb)
− No fixed margins
− No floats
− No fixed widths Currently high risk and
− No big fixed fonts
− Reduce the usage of tables (or reduce the number of columns)
complexity, but allows more
− Navigation in a dropdown list works well creativity!
− ...
Use an adaptation service
− Partly automation
− Build in functionality to help creating different versions for different
devices
− Real multiplatform distribution
− Fast prototyping
− High Quality

54. Automatic
Content
Device Content Adaptation
Detection Adaptation
Engine
Select
Content Menu
Fetcher
Select mobile
content
Adapt Style
54

55. We search Joomla beta-testers!
Leave your e-mail or businesscard and
get an early Osmobi invitation

56. Contact
Mail : Tom.Deryckere@siruna.com
Twitter: @twom
Siruna: http://www.siruna.com, http://www.osmobi.com
56