Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl


Published on

Published in: Technology
1 Comment
  • 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
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl

  1. 1. Building mobile websites with Joomla! Joomla!Days NL 2010 Heiko Desruelle Tom Deryckere
  2. 2. Mobile is the Future... <ul><li>+1 billion mobile phones sold / year </li></ul><ul><li>Mobile web access will surpass PCs by 2013 (Gartner) </li></ul><ul><li>Today, we’ll focus on the mobile Internet </li></ul>
  3. 3. ... but it can be a Pain <ul><li>Mobile Internet is not the “mini-Internet” </li></ul><ul><ul><li>New usage patterns, navigation methods, ... </li></ul></ul><ul><ul><li>90% of devices don’t support JavaScript </li></ul></ul><ul><li>1:1 mapping of desktop concepts leads to frustration </li></ul>
  4. 4. Mobile Readiness Example <ul><li>mobiReady evaluation of </li></ul><ul><ul><li>Very poor overall score (1.3/5) </li></ul></ul><ul><ul><li>Too slow, too expensive, unadapted structure, .... </li></ul></ul>
  5. 5. About Siruna <ul><li>Open source company </li></ul><ul><li>We think in small screens (Mobile Web) </li></ul><ul><li>We develop solutions to help the development of mobile websites </li></ul><ul><li>With a very strong focus on Drupal, Joomla!, Wordpress </li></ul><ul><li>Mobile partner of several web agencies </li></ul>
  6. 6. MOBILE WEB <ul><li>History, usage </li></ul>
  7. 7. Back in 1999 <ul><li>Voice </li></ul><ul><li>Messaging </li></ul><ul><li>Infrared </li></ul><ul><li>HIGH END DEVICE </li></ul>
  8. 8. Today <ul><li>Voice, messaging </li></ul><ul><li>Web </li></ul><ul><li>Camera </li></ul><ul><li>Bluetooth </li></ul><ul><li>Java </li></ul><ul><li>ENTRY LEVEL DEVICE </li></ul>
  9. 9. Technology Trends <ul><li>From WAP , over IMODE , to XHTML </li></ul>
  10. 10. Network Technology GPRS 52Kb/s EDGE 240Kb/s UMTS 384Kb/S HSDPA 1.8Mb/s E-mail (3KB) < 1s < 1s < 1s < 1s Website (128KB) 20s 5s 3s < 1s MP3 (3MB) 8m 2m 64s 13s Video (15MB) 40m 9m 6m 66s
  11. 11. WHERE IS THE COMPLEXITY? <ul><li>Mobile Web </li></ul>Powerful devices Fast network connections Affordable data plans
  12. 13. Mobile Fragmentation <ul><li>It’s not all about iPhone! </li></ul><ul><li>Thousands of different devices </li></ul><ul><li>Different Operating Systems </li></ul><ul><li>Wide range of properties and capabilities </li></ul><ul><ul><li>Screen size, JavaScript support, HTML/CSS support, ... </li></ul></ul>
  13. 14. Usability <ul><li>Mobile web usage differs from surfing on a desktop </li></ul><ul><ul><li>Quick and easy bits of content </li></ul></ul><ul><ul><li>Desktop pages often contain too much information </li></ul></ul><ul><li>Typical mobile usage: </li></ul>On the road Quick lookup On the loo
  15. 16. Development Options <ul><li>Native applications </li></ul><ul><ul><li>Powerful application </li></ul></ul><ul><ul><li>Written for specific platform (e.g. iPhone or Android apps) </li></ul></ul><ul><li>Widgets </li></ul><ul><ul><li>XHTML, CSS and JavaScript </li></ul></ul><ul><ul><li>Written for a specific widget engine (e.g. Nokia WRT) </li></ul></ul><ul><ul><li>Often special JavaScript APIs with access to device resources </li></ul></ul><ul><ul><li>Powerful and easy to create </li></ul></ul><ul><li>Mobile websites </li></ul><ul><ul><li>HTML, CSS and JavaScript </li></ul></ul><ul><ul><li>Easy to develop </li></ul></ul><ul><ul><li>Lacks access to device resources * </li></ul></ul>
  16. 17. Monetizing your Work <ul><li>Application stores not always goldmines </li></ul><ul><ul><li>Ranking-based system </li></ul></ul><ul><ul><li>Dapple app: $32,000 invested vs. $535 revenue </li></ul></ul><ul><li>Developers are looking for alternatives </li></ul><ul><ul><li>Less restrictive, higher revenue rate </li></ul></ul>Native App Stores Web Apps Openness Open to anyone who signs agreement Completely open Entry Cost $0 - $200 None Developer Revenue 30% - 80% 100% Approval Few days - weeks Instantaneous
  17. 18. Native Development Platform Language Cross-platform iPhoneOS Objective C NO Android Java (Dalvik JVM) NO Windows Mobile .NET / C++ / Java NO Symbian C++ Compilation per target Palm OS C, C++ Windows Mobile with emulator Blackberry Java (with RIM API) NO
  18. 19. What About Java? <ul><li>Java ME offers many opportunities </li></ul><ul><li>However, lots of mobile virtual machines & versions </li></ul><ul><ul><li>Each introducing specific bugs and glitches </li></ul></ul><ul><li>Still need for separated platform development </li></ul><ul><li>“ Write once, run anywhere” not that simple </li></ul>
  19. 20. Web only for Trivial Apps? <ul><li>Google engineers ported Quake II to browsers </li></ul><ul><li>Showing capabilities of HTML5-compatible browsers </li></ul><ul><li>Cross-compiled 3D engine to JavaScript </li></ul>
  20. 21. PhoneGap: Combining both Worlds <ul><li>Create applications using Web technology </li></ul><ul><ul><li>HTML, CSS and JavaScript </li></ul></ul><ul><li>Additional JavaScript APIs to access device interfaces </li></ul><ul><ul><li>GPS, camera, contacts, ... </li></ul></ul><ul><li>Packaged as native application </li></ul><ul><ul><li>Android, Blackberry, iPhone </li></ul></ul><ul><ul><li>Support for other platforms is coming </li></ul></ul>
  21. 22. BONDI: Taking it even Further <ul><li>TODO </li></ul>
  22. 23. GENERAL TECHNIQUES <ul><li>Web mobilization </li></ul>
  23. 24. Device Detection <ul><li>Every device matters </li></ul><ul><ul><li>Differentiating devices is required </li></ul></ul><ul><ul><li>Detect properties and capabilities </li></ul></ul><ul><li>Enables device-optimized server-side actions </li></ul><ul><ul><li>Image transcoding & resizing </li></ul></ul><ul><ul><li>Showing only core information </li></ul></ul><ul><li>WURFL, Device Atlas, lightweight scripts, ... </li></ul>
  24. 25. Domain Redirection <ul><li>2 separate websites </li></ul><ul><ul><li>Desktop & mobile version </li></ul></ul><ul><li>Simple approach </li></ul><ul><ul><li>Perform device detection </li></ul></ul><ul><ul><li>Redirect mobile devices </li></ul></ul><ul><li>Maintenance requires more effort </li></ul>Mobile Desktop
  25. 26. Template Switching <ul><li>Dynamically change website’s template </li></ul><ul><li>Selection based on device detection </li></ul><ul><li>Only the website’s layout changes </li></ul><ul><ul><li>Content can be reused </li></ul></ul><ul><li>Important: Mobile template’s quality </li></ul>
  26. 27. Template Switching <ul><li>Mobile template: Rules of thumb </li></ul><ul><ul><li>Single column design for most device </li></ul></ul><ul><ul><li>No floats, fixed widths, or fixed margins </li></ul></ul><ul><ul><li>Limit usage of tables, no frames </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>W3C Mobile Web Best Practices </li></ul><ul><ul><li> </li></ul></ul>
  27. 28. Transcoding Services <ul><li>Proxy approach: intermediate server </li></ul><ul><ul><li>Perform device detection </li></ul></ul><ul><ul><li>Fetch content from original desktop site </li></ul></ul><ul><ul><li>Apply specific content adaptation rules </li></ul></ul><ul><ul><ul><li>Remove specific content, transform menu structure, resize images, ... </li></ul></ul></ul>Desktop Proxy
  28. 29. Transcoding Services <ul><li>Siruna platform </li></ul><ul><ul><li>Composer with XML based adaptation rules </li></ul></ul><ul><ul><li>Quick preview </li></ul></ul>
  30. 31. Joomla! & Mobile Web <ul><li>By default, no mobile support mechanisms </li></ul><ul><ul><li>... as for most other CMSs </li></ul></ul><ul><li>Bad mobile browsing experience </li></ul><ul><li>Need for mobile extensions </li></ul>
  31. 32. Getting Started: JED
  32. 33. Mobile Joomla! <ul><li>Distinguishes 4 types of mobile devices </li></ul><ul><ul><li>iPhone, XHTML, iMode & WAP </li></ul></ul><ul><li>Template switching per category </li></ul><ul><li>Image adaptation options </li></ul><ul><li>No mobile caching </li></ul><ul><li>Not in JED (yet) </li></ul><ul><ul><li> </li></ul></ul>
  33. 34. Mobilebot <ul><li>Focuses on switching templates for different devices </li></ul><ul><ul><li>Detects iPhone, Blackberry, Android and Opera Mini </li></ul></ul><ul><li>Change HTML content based on device </li></ul><ul><li>Settings through plugin parameters, no “mobile view” </li></ul>
  34. 35. WAFL <ul><li>Experimental student project (guided by Siruna) </li></ul><ul><li>Dynamically creates a mobile template for each installed desktop template </li></ul><ul><li>Uses Siruna transcoding technology for mobile optimizations </li></ul><ul><li>Easy to use </li></ul><ul><li>Quality is difficult to predict (best effort) </li></ul>
  35. 36. WAFL
  36. 37. jWURFL <ul><li>Integrates WURFL device detection in Joomla! </li></ul><ul><ul><li>Repository of +-9000 devices </li></ul></ul><ul><ul><li>Access to detailed device properties </li></ul></ul><ul><li>Useful tool for mobile-minded extension developers </li></ul><ul><li> </li></ul>
  37. 38. OSMOBI <ul><li>Service to instantly mobilize your CMS-driven website </li></ul><ul><li>Based on the Siruna transcoding engine </li></ul><ul><li>Optimized for interfacing with Joomla! </li></ul><ul><ul><li>But also Drupal and Wordpress </li></ul></ul><ul><li>Provides a GUI to easily change mobile look & feel </li></ul><ul><li> </li></ul>
  38. 39. USING OSMOBI
  39. 40. OSMOBI <ul><li>Personal account per user </li></ul><ul><li>Free until 150 pageviews per day </li></ul><ul><li>Account creation in 3 steps </li></ul>
  40. 41. Install CMS extension <ul><li>Download and install OSMOBI plugin & template </li></ul><ul><li>Activate plugin </li></ul>
  41. 42. Start Mobilizing Your Site
  42. 43. Remove, Rearrange Content <ul><li>Everything is selectable (move it up, down, or hide ) </li></ul>
  43. 44. Adapt Navigation <ul><li>Create and modify additional dropdown menus </li></ul>
  44. 45. Change Colors & Logo <ul><li>Originally selected from desktop template </li></ul><ul><li>Can be tweaked </li></ul><ul><ul><li>Color schema inspiration: Adobe Kuler </li></ul></ul><ul><ul><li>Upload a logo </li></ul></ul>
  45. 46. Change Style and CSS <ul><li>All page elements are highly customizable </li></ul><ul><ul><li>Edit margins, padding </li></ul></ul><ul><ul><li>Font settings, text alignment </li></ul></ul><ul><ul><li>Custom CSS inclusion </li></ul></ul>
  46. 47. Preview Website <ul><li>Preview on different devices </li></ul><ul><li>Optimized look & feel adaptations </li></ul><ul><ul><li>iPhone </li></ul></ul><ul><ul><li>Android </li></ul></ul><ul><ul><li>Default mobile look </li></ul></ul><ul><li>Automatically selected </li></ul>
  47. 48. Membership: Personal <ul><li>Up to 500 page views / day </li></ul><ul><li>No OSMOBI advertisements </li></ul><ul><li>AdMob mobile advertising platform </li></ul><ul><li>Own mobile URL (instead of OSMOBI URL) </li></ul>
  48. 49. Membership: Premium <ul><li>Up to 5,000 page views / day </li></ul><ul><li>Native application wrapping </li></ul><ul><ul><li>Apple App Store, Android Market, Ovi Store </li></ul></ul><ul><li>Advanced SEO </li></ul><ul><ul><li>Mobile sitemap, Google Webmaster tool integration, ... </li></ul></ul><ul><li>E-mail support </li></ul><ul><li>+ Personal membership advantages </li></ul>
  49. 50. Affiliate Program <ul><li>Place OSMOBI banners on your website </li></ul><ul><li>Direct new people to OSMOBI </li></ul><ul><li>Get a % commission per sale </li></ul><ul><li>Free, takes only 5 minutes to sign up </li></ul><ul><li> </li></ul>
  51. 52. Show Cases <ul><li> </li></ul>
  52. 53. QUESTIONS?
  53. 54. Contact <ul><li>Mail: [email_address] </li></ul><ul><li>Siruna: </li></ul><ul><li>OSMOBI: </li></ul><ul><li>Twitter: @Osmobi @Siruna </li></ul>