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

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: heiko.desruelle@siruna.com

Siruna: http://www.siruna.comhttp://open.siruna.org

OSMOBI: http://www.osmobi.com

Twitter: @Osmobi@Siruna