Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
Download as PPT, PDF•1 like•1,409 views
The document discusses building mobile websites with Joomla and mobile web development in general. It notes that mobile internet usage is growing rapidly and introduces some solutions for creating mobile-optimized websites using Joomla extensions like Mobile Joomla, Mobilebot, and WAFL. It also describes the OSMOBI service which uses transcoding techniques to mobilize existing Joomla and other CMS-driven sites without coding.
![Contact Mail: [email_address] Siruna: http://www.siruna.com http://open.siruna.org OSMOBI: http://www.osmobi.com Twitter: @Osmobi @Siruna](https://image.slidesharecdn.com/jd10nlheikodesruelle-100427105222-phpapp01/85/Building-mobile-website-with-Joomla-Joomla-Days-NL-2010-jd10nl-54-320.jpg)
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
- 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 Mobile web access will surpass PCs by 2013 (Gartner) Today, we’ll 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 don’t 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. MOBILE WEB History, usage
- 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 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. WHERE IS THE COMPLEXITY? Mobile Web Powerful devices Fast network connections Affordable data plans
- 13. 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, ...
- 14. 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: On the road Quick lookup On the loo
- 15. NATIVE VS. WEB APPLICATIONS
- 16. 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 *
- 17. Monetizing your Work 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 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
- 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
- 19. 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
- 20. Web only for Trivial Apps? Google engineers ported Quake II to browsers Showing capabilities of HTML5-compatible browsers Cross-compiled 3D engine to JavaScript
- 21. 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
- 22. BONDI: Taking it even Further TODO
- 23. GENERAL TECHNIQUES Web mobilization
- 24. 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, ...
- 25. Domain Redirection 2 separate websites Desktop & mobile version Simple approach Perform device detection Redirect mobile devices Maintenance requires more effort Mobile Desktop
- 26. 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
- 27. 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/
- 28. 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, ... Desktop Proxy
- 29. Transcoding Services Siruna platform Composer with XML based adaptation rules Quick preview
- 31. Joomla! & Mobile Web By default, no mobile support mechanisms ... as for most other CMSs Bad mobile browsing experience Need for mobile extensions
- 33. 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
- 34. 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”
- 35. 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)
- 36. WAFL
- 37. 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
- 38. 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
- 39. USING OSMOBI
- 40. OSMOBI Personal account per user Free until 150 pageviews per day Account creation in 3 steps
- 41. Install CMS extension Download and install OSMOBI plugin & template Activate plugin
- 42. Start Mobilizing Your Site
- 43. Remove, Rearrange Content Everything is selectable (move it up, down, or hide )
- 44. Adapt Navigation Create and modify additional dropdown menus
- 45. Change Colors & Logo Originally selected from desktop template Can be tweaked Color schema inspiration: Adobe Kuler Upload a logo
- 46. Change Style and CSS All page elements are highly customizable Edit margins, padding Font settings, text alignment Custom CSS inclusion
- 47. Preview Website Preview on different devices Optimized look & feel adaptations iPhone Android Default mobile look Automatically selected
- 48. Membership: Personal Up to 500 page views / day No OSMOBI advertisements AdMob mobile advertising platform Own mobile URL (instead of OSMOBI URL)
- 49. 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
- 50. 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
- 51. OSMOBI EXAMPLES
- 53. QUESTIONS?
- 54. Contact Mail: [email_address] Siruna: http://www.siruna.com http://open.siruna.org OSMOBI: http://www.osmobi.com Twitter: @Osmobi @Siruna