Building Mobile Websites with Joomla


Published on

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

Published in: Technology, Business
  • I like the site.
    Are you sure you want to  Yes  No
    Your message goes here
  • We just completed a number of standards compliant mobile phone templates for Joomla, optimized for iPhone 3GS, iPhone 4 and iPad, here:

    If you own an iPhone, try the samples, we are building a demo site here:

    They are only a few dollars for the download, is open-source GNU licensed of course and they are being used in production mode in a number of mobile websites. Remember to enable the cache feature if desired.

    Hope someone can use them, we have spent more than a few hours trying to get something generic enough but simple to use that we could share. There will be more versions and layouts to come in the coming weeks and months as the first mobile optimized template we made for Joomla! 1.5.x has proven a winner.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Mobile Websites with Joomla

  1. 1. Basics of making mobile websites Joomladay NYC 2009 Tom Deryckere Software Architect / Siruna
  2. 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. 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. 4. Technology Trends 25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s
  5. 5. Technology that works From WAP to iMode to xHTML
  6. 6. Network side TECHNOLOGY From slow connections to fast connections
  7. 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. 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. 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. 10. Reasons to go mobile Activities driving mobile usage Events / conferences Shopping Vacation / travelling Commuting Toilet 10
  11. 11. 11
  12. 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: 12
  13. 13. SOME EXAMPLES 13
  14. 14. Examples (Drupal – sorry ;)) DrupalCon Paris: Slate: 14
  15. 15. Examples (Drupal) Garland mobile: Marina: Zen: XIO: 15
  16. 16. Examples Moneywise − 16
  17. 17. Examples Joomla 17
  19. 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. 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. 21. On fragmentation Convergence is coming Javascript becomes more and more the standard Desktop html works on mobile devices 21
  22. 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. 23. Complexity Simple (double) navigation No video Easy access to stories 23
  24. 24. Some background GOING MOBILE: WEBSITE OR APPLICATION 24
  25. 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. 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. 27. Recommended reading: Complexity / Access to device resource power -Network interface - camera C++ - database objective C - contacts - calender JAVA ME NET CF - Accelero meter - GPS Python scripting - .. Widgets Web Device compatibility
  28. 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 ( stimulates spread of these (and more) standards Main browsers support ‘full web’ − Opera − Fennec − Google Android − Safari WebKit!! − Palm Pré − skyfire 28
  30. 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. 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. 32. Example templates
  33. 33. Examples
  34. 34. Example: new joomla site 34
  35. 35. Examples
  36. 36. Mobile modules for Joomla 36
  37. 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. 38. PDA-Plugin config 38
  39. 39. Mobilebot mobile.html Focusses on switching templates for different devices Change html content based on the device Does not provide a mobile view 39
  40. 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. 41. Osmobi plugin + template New solution taking the best of all worlds - Plugin - Template - And transcoding service 41
  42. 42. OSMOBI
  43. 43. Leave your e-mail or business card to get a invitation for the beta site!!
  44. 44. Download the Osmobi plugin and template
  45. 45. Install plugin on your existing website
  46. 46. Start building your mobile website with Osmobi
  47. 47. Remove or rearrange content
  48. 48. Change CSS and style
  49. 49. Change Colors
  50. 50. Add Advertisment and Analytics
  51. 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. 52. What is transcoding? TRANSCODING YOUR SITE 52
  53. 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. 54. Automatic Content Device Content Adaptation Detection Adaptation Engine Select Content Menu Fetcher Select mobile content Adapt Style 54
  55. 55. We search Joomla beta-testers! Leave your e-mail or businesscard and get an early Osmobi invitation
  56. 56. Contact Mail : Twitter: @twom Siruna:, 56
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.