building mobile joomla! websites
DESCRIPTION
Presentation @ Joomla!Days NL 2010TRANSCRIPT
Building mobile websiteswith Joomla!
Joomla!Days NL 2010
Heiko DesruelleTom Deryckere
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, 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/sE-mail (3KB) < 1s < 1s < 1s < 1s
Website (128KB)
20s 5s 3s < 1sMP3 (3MB) 8m 2m 64s 13s
Video (15MB) 40m 9m 6m 66s
0
75
150
225
300
2G 2.5G 2.75G 3G 3.5G
Speed (kB/sec)
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 *
Native Development
Platform Language Cross-platformiPhoneOS Objective C NOAndroid Java (Dalvik JVM) NOWindows Mobile .NET / C++ / Java NOSymbian C++ Compilation per targetPalm OS C, C++ Windows Mobile with emulatorBlackberry 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
Monetizing your Work
Native App Stores Web AppsOpenness Open to anyone who signs agreement Completely openEntry Cost $0 - $200 NoneDeveloper 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
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
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.com http://open.siruna.org
OSMOBI: http://www.osmobi.com
Twitter: @Osmobi @Siruna