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

  • Published on
    28-Jan-2015

  • View
    103

  • Download
    1

Embed Size (px)

DESCRIPTION

 

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
  • Mobile web access will surpass PCs by 2013(Gartner)
  • Today, well focus on themobile 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 ofwww.joomla.org
    • Very poor overall score (1.3/5)
    • Too slow, too expensive, unadapted structure, ....

5. About Siruna

  • Open source company
  • We think insmall screens (Mobile Web)
  • We develop solutions to help thedevelopment of mobile websites
  • With a very strongfocus on Drupal, Joomla!, Wordpress
  • Mobile partnerof 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

  • FromWAP , overIMODE , toXHTML

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 12. 13. 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, ...

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 websites template
  • Selection based on device detection
  • Only the websites layout changes
    • Content can be reused
  • Important: Mobile templates 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

30. MOBILE JOOMLA! EXTENSIONS 31. Joomla! & Mobile Web

  • By default, no mobile support mechanisms
    • ... as for most other CMSs
  • Bad mobile browsing experience
  • Need for mobile extensions

32. Getting Started: JED 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 52. Show Cases

  • http://www.osmobi.com/gallery

53. QUESTIONS? 54. Contact

  • Mail: [email_address]
  • Siruna: http://www.siruna.com http://open.siruna.org
  • OSMOBI: http://www.osmobi.com
  • Twitter: @Osmobi @Siruna

Recommended

View more >