Building mobile websites
with Joomla!Joomla!Days NL 2010
Heiko DesruelleTom 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 WEBHistory, 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
GPRS52Kb/s
EDGE240Kb/s
UMTS384Kb/S
HSDPA1.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?
Powerful devices
Fast network connections
Affordable data plans
Mobile Web
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 roadQuick 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
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
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 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 TECHNIQUESWeb 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)
WAFL
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 protected]
Siruna: http://www.siruna.comhttp://open.siruna.org
OSMOBI: http://www.osmobi.com
Twitter: @Osmobi@Siruna
Recommended
