Building mobile websites
       with Joomla!

                  Joomla!Days NL 2010



Heiko Desruelle
Tom Deryckere
Mobile is the Future...
 +1 billion mobile phones sold / year
 +100 million mobile web users in the US (JPMorgan)
 Mobi...
... but it can be a Pain
 Mobile Internet is not the “mini-Internet”
   • New usage patterns, navigation methods, ...
   ...
Mobile Readiness Example
 mobiReady evaluation of www.joomla.org
  • Very poor overall score (1.3/5)
  • Too slow, too ex...
About Siruna
 Open source company
 We think in small screens (Mobile Web)
 We develop solutions to help the development...
History, usage

MOBILE WEB
Back in 1999

       Voice
       Messaging
       Infrared


      HIGH END DEVICE
Today
    Voice, messaging
    Web
    Camera
    Bluetooth
    Java




   ENTRY LEVEL DEVICE
Technology Trends
From WAP, over IMODE, to XHTML
Network Technology
                   Speed	
  (kB/sec)
300
225
150
75
 0
      2G    2.5G        2.75G          3G      3...
Powerful devices
     Fast network connections
     Affordable data plans



Mobile Web

WHERE IS THE COMPLEXITY?
Mobile Fragmentation


 It’s not all about iPhone!
 Thousands of different devices
 Different Operating Systems
 Wide ...
Usability
 Mobile web usage differs from surfing on a desktop
    Quick and easy bits of content
    Desktop pages ofte...
NATIVE VS. WEB APPLICATIONS
Development Options
 Native applications
   Powerful application
   Written for specific platform (e.g. iPhone or Andro...
Native Development

Platform         Language              Cross-platform
iPhoneOS         Objective C           NO
Androi...
What About Java?

 Java ME offers many opportunities
 However, lots of mobile virtual machines & versions
    Each intr...
Monetizing your Work
                  Native App Stores                    Web Apps
Openness          Open to anyone who ...
Web only for Trivial Apps?
 Google engineers ported Quake II to browsers
 Showing capabilities of HTML5-compatible brows...
PhoneGap:
      Combining both Worlds
 Create applications using Web technology
    HTML, CSS and JavaScript

 Addition...
BONDI: Taking it even Further
 TODO
Web mobilization

GENERAL TECHNIQUES
Device Detection
 Every device matters
    Differentiating devices is required
    Detect properties and capabilities

...
Domain Redirection
                                        Desktop


 2 separate websites          Mobile

   Desktop & ...
Template Switching

 Dynamically change website’s template
 Selection based on device detection
 Only the website’s lay...
Template Switching
  Mobile template: Rules of thumb
    Single column design for most device

    No floats, fixed wid...
Transcoding Services
 Proxy approach: intermediate server
   Perform device detection
   Fetch content from original de...
Transcoding Services
 Siruna platform
    Composer with XML based adaptation rules
    Quick preview
MOBILE JOOMLA! EXTENSIONS
Getting Started: JED
Mobile Joomla!
 Distinguishes 4 types of mobile devices
    iPhone, XHTML, iMode & WAP

 Template switching per categor...
Mobilebot
 Focuses on switching templates for different devices
    Detects iPhone, Blackberry, Android and Opera Mini

...
WAFL

 Experimental student project (guided by Siruna)
 Dynamically creates a mobile template for each
  installed deskt...
WAFL
jWURFL
 Integrates WURFL device detection in Joomla!
    Repository of +-9000 devices
    Access to detailed device pro...
OSMOBI

 Service to instantly mobilize your CMS-driven website
 Based on the Siruna transcoding engine
 Optimized for i...
USING OSMOBI
OSMOBI
 Personal account per user
 Free until 150 pageviews per day
 Account creation in 3 steps
Install CMS extension
 Download and install OSMOBI plugin & template
 Activate plugin
Start Mobilizing Your Site
Remove, Rearrange Content
 Everything is selectable (move it up, down, or hide)
Adapt Navigation
 Create and modify additional dropdown menus
Change Colors & Logo
 Originally selected from desktop template
 Can be tweaked
   Color schema inspiration: Adobe Kule...
Change Style and CSS
 All page elements are highly customizable
   Edit margins, padding
   Font settings, text alignme...
Preview Website

 Preview on different devices
 Optimized look & feel adaptations
    iPhone
    Android
    Default ...
Membership: Personal

 Up to 500 page views / day
 No OSMOBI advertisements
 AdMob mobile advertising platform
 Own mo...
Membership: Premium
 Up to 5,000 page views / day
 Native application wrapping
    Apple App Store, Android Market, Ovi...
Affiliate Program
 Place OSMOBI banners on your website
 Direct new people to OSMOBI
 Get a % commission per sale




...
OSMOBI EXAMPLES
Show Cases
http://www.osmobi.com/gallery
QUESTIONS?
Contact
 Mail:	
     heiko.desruelle@siruna.com
 Siruna:	
   http://www.siruna.com
  	
 	
       http://open.siruna.org
...
Building mobile Joomla! websites
Upcoming SlideShare
Loading in …5
×

Building mobile Joomla! websites

7,621 views

Published on

Presentation @ Joomla!Days NL 2010

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • We just completed a number of standards compliant mobile phone templates for Joomla, optimized for iPhone 3GS, iPhone 4 and iPad, here: http://alturl.com/tvkc

    If you own an iPhone, try the samples, we are building a demo site here: http://www.noxidsoft.com/templar

    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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
7,621
On SlideShare
0
From Embeds
0
Number of Embeds
1,279
Actions
Shares
0
Downloads
101
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Building mobile Joomla! websites

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

×