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

Building mobile websites with Joomla! Joomla!Days NL 2010 Heiko Desruelle Tom Deryckere

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

... 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

Mobile Readiness Example
mobiReady evaluation of www.joomla.org
Very poor overall score (1.3/5)
Too slow, too expensive, unadapted structure, ....

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

MOBILE WEB
History, usage

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 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

WHERE IS THE COMPLEXITY?
Mobile Web
Powerful devices Fast network connections Affordable data plans

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

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

NATIVE VS. WEB APPLICATIONS

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 *

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

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

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

Web only for Trivial Apps?
Google engineers ported Quake II to browsers
Showing capabilities of HTML5-compatible browsers
Cross-compiled 3D engine to JavaScript

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

BONDI: Taking it even Further
TODO

GENERAL TECHNIQUES
Web mobilization

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

Domain Redirection
2 separate websites
Desktop & mobile version
Simple approach
Perform device detection
Redirect mobile devices
Maintenance requires more effort
Mobile Desktop

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

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/

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

Transcoding Services
Siruna platform
Composer with XML based adaptation rules
Quick preview

MOBILE JOOMLA! EXTENSIONS

Joomla! & Mobile Web
By default, no mobile support mechanisms
... as for most other CMSs
Bad mobile browsing experience
Need for mobile extensions

Getting Started: JED

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

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”

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)

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

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

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 Kuler
Upload a logo

Change Style and CSS
All page elements are highly customizable
Edit margins, padding
Font settings, text alignment
Custom CSS inclusion

Preview Website
Preview on different devices
Optimized look & feel adaptations
iPhone
Android
Default mobile look
Automatically selected

Membership: Personal
Up to 500 page views / day
No OSMOBI advertisements
AdMob mobile advertising platform
Own mobile URL (instead of OSMOBI URL)

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

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

OSMOBI EXAMPLES

Show Cases
http://www.osmobi.com/gallery

QUESTIONS?

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

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

by Joomla!Days Netherlands on Apr 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 7

Statistics

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