Building mobile Joomla! websites

  • Published on
    17-Dec-2014

  • View
    6.874

  • Download
    3

DESCRIPTION

Presentation @ Joomla!Days NL 2010

Transcript

  • 1. Building mobile websites with Joomla! Joomla!Days NL 2010 Heiko Desruelle Tom Deryckere
  • 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, well focus on the mobile Internet
  • 3. ... but it can be a Pain Mobile Internet is not the mini-Internet New usage patterns, navigation methods, ... 90% of devices dont support JavaScript 1:1 mapping of desktop concepts leads to frustration
  • 4. Mobile Readiness Example mobiReady evaluation of www.joomla.org Very poor overall score (1.3/5) Too slow, too expensive, unadapted structure, ....
  • 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. History, usage MOBILE WEB
  • 7. Back in 1999 Voice Messaging Infrared HIGH END DEVICE
  • 8. Today Voice, messaging Web Camera Bluetooth Java ENTRY LEVEL DEVICE
  • 9. Technology Trends From WAP, over IMODE, to XHTML
  • 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. Powerful devices Fast network connections Affordable data plans Mobile Web WHERE IS THE COMPLEXITY?
  • 12. Mobile Fragmentation Its 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. 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. NATIVE VS. WEB APPLICATIONS
  • 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. 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. 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. 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. 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. 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. BONDI: Taking it even Further TODO
  • 22. Web mobilization GENERAL TECHNIQUES
  • 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. Domain Redirection Desktop 2 separate websites Mobile Desktop & mobile version Simple approach Perform device detection Redirect mobile devices Maintenance requires more effort
  • 25. Template Switching Dynamically change websites template Selection based on device detection Only the websites layout changes Content can be reused Important: Mobile templates quality
  • 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. 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. Transcoding Services Siruna platform Composer with XML based adaptation rules Quick preview
  • 29. MOBILE JOOMLA! EXTENSIONS
  • 30. Getting Started: JED
  • 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. 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. 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. WAFL
  • 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. 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. USING OSMOBI
  • 38. OSMOBI Personal account per user Free until 150 pageviews per day Account creation in 3 steps
  • 39. Install CMS extension Download and install OSMOBI plugin & template Activate plugin
  • 40. Start Mobilizing Your Site
  • 41. Remove, Rearrange Content Everything is selectable (move it up, down, or hide)
  • 42. Adapt Navigation Create and modify additional dropdown menus
  • 43. Change Colors & Logo Originally selected from desktop template Can be tweaked Color schema inspiration: Adobe Kuler Upload a logo
  • 44. Change Style and CSS All page elements are highly customizable Edit margins, padding Font settings, text alignment Custom CSS inclusion
  • 45. Preview Website Preview on different devices Optimized look & feel adaptations iPhone Android Default mobile look Automatically selected
  • 46. Membership: Personal Up to 500 page views / day No OSMOBI advertisements AdMob mobile advertising platform Own mobile URL (instead of OSMOBI URL)
  • 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. 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. OSMOBI EXAMPLES
  • 50. Show Cases http://www.osmobi.com/gallery
  • 51. QUESTIONS?
  • 52. Contact Mail: heiko.desruelle@siruna.com Siruna: http://www.siruna.com http://open.siruna.org OSMOBI: http://www.osmobi.com Twitter: @Osmobi @Siruna