Building Mobile Websites with Joomla

Basics of making mobile websites Joomladay NYC 2009 Tom Deryckere Software Architect / Siruna http://twitter.com/twom

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 OS CMS systems (Drupal and Joomla) Mobile partner of several web agencies 2

Some research 1. Who owns an iPhone, Android or Palm pre 2. Who has access to the internet on his mobile phone 3. Who has already created a mobile website 4. Who has currently got an ongoing project with a mobile part 5. Who is planning to make a mobile site in the coming three months 3

Technology Trends 25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s

Technology that works From WAP to iMode to xHTML

Network side TECHNOLOGY From slow connections to fast connections

Current state 35 percent less successful completing Web site tasks via their mobile phones than they are on a regular PC average success rate for users to complete tasks via mobile was only 59 percent. “A surprising and annoying thing was that it was so hard for people to actually access mobile sites,” 7

Current state Web sites designed for PC compatibility will most likely render improperly on mobile phones and create a whole new set of additional obstacles for the mobile Internet user. However, there is still hope for mobile Web developers, publishers and marketers: User performance could be improved by 20 percent by creating mobile-optimized sites, according to Neilsen Norman Group 8

Reasons to go mobile Applications already driving mobile usage .... Drive traffic on mobile phones to websites Find relevant content Advertisment ??? Fast download Intuitive .... 9

Reasons to go mobile Activities driving mobile usage Events / conferences Shopping Vacation / travelling Commuting Toilet 10

Mobile Web according google “We believe the web has won and over the next several years, the browser, for economic reasons almost, will become the platform that matters and certainly that’s where Google is investing.” Src: http://blogs.ft.com/techblog/2009/07/app-stores-are-not-the-future-says-google/ 12

SOME EXAMPLES 13

Examples (Drupal – sorry ;)) DrupalCon Paris: http://drupalcon.siruna.com Slate: http://twom.slate.mobixx.eu 14

Examples (Drupal) Garland mobile: http://twom.garland.mobixx.eu Marina: http://twom.marina.mobixx.eu Zen: http://twom.zen.mobixx.eu XIO: http://xio.siruna.com http://portal.siruna.com 15

Examples Moneywise − http://twom.mws.mobixx.eu 16

Examples Joomla 17

WHERE IS THE COMPLEXITY 18

Complexity Device fragmentation: − Millions of devices − Different Operating systems − Different capabilities • Ex: screen sizes, javascript support, CSS / xHTML support, video support − ... Usability: make a fun and easy experience − Content has to be easy to find − Reduce scrolling (no horizontal scrolling) − Make links clickable (not too small) − Easy navigation structure that is easy to find − ... How to bring users to the mobile website − Two urls? Redirection? 19

Complexity Optimization of download size − Network connections are not always optimal (between 50kb/s – 1,8Mbit/s − Don’t let the user wait, don’t let him download content that he will not use Bring relevant content to the mobile user − Understand what he will look for (think and plan well!!) − Is not easy (especially for the customer) 20

On fragmentation Convergence is coming Javascript becomes more and more the standard Desktop html works on mobile devices 21

More interesting data United States Handset Data - April 2009 India Handset Data - April 2009 Requests: 3,538,714,000 Requests: 447,079,855 480x320 px 176x220 px 240x320 px 320x240 px 480x320 px Palm pre: 480 x 320 22 Source: AdMob

Complexity Simple (double) navigation No video Easy access to stories 23

Some background GOING MOBILE: WEBSITE OR APPLICATION 24

Possibilites Developing a ‘native application’ − Powerfull application − Written for specific operating system − E.g; Iphone or a Android apps Developing widgets − Xhtml, javascript and css − Runs in a widget engine (e.g. Nokia webruntime and Palm Pré) − Javascript api often have access to device resources − Powerfull and easy to create Developing mobile websites − Websites − html/javascript/css − Easy to develop − Often lacks access to gps or camera (but support is quickley getting better) 25

Overview Platform Language iPhone Objective C Android Java (Dalvik JVM) Windows mobile .NET / C++ / Java Nokia C++, java, Flash lite, python Palm Pre HTML / CSS / With own touch javascript (services api + widgets) What some would call widgets. Blackberry Java Browser HTML / CSS / W3C standards, javascript reach 26

Recommended reading: Complexity / Access to device resource http://www.scribd.com/doc/17431252/Hitch-Hikers-Guide-Runtime-Booklet power -Network interface - camera C++ - database objective C - contacts - calender JAVA ME NET CF - Accelero meter - GPS Python scripting - .. Widgets Web Device compatibility

Browser technology Different standards supported − xHTML – MP (subset of xHTML) is recommended − But full xHTML works fine on a lot of devices − CSS + javascript Standardization by W3C Industry initiative BONDI (http://www.bondi.com) stimulates spread of these (and more) standards Main browsers support ‘full web’ − Opera − Fennec − Google Android − Safari WebKit!! − Palm Pré − skyfire 28

SOME MORE EXAMPLES 29

General Login or Register Form a multi-column based site going towards a 1 column site We are talking about generic designs Second navigation New forum posts 30 New Comments Sponsors etc ...

Mobile template: Rules of thumb Rescale images for the mobile screen No fixed margins (certainly left, right and bigger then 5px) No fixed widths No floats Limit usage of fixed font sizes Reduce the usage of tables Navigation in a dropdown list works well Limit the amount of content! 31

Example templates

Examples

Example: new joomla site 34

Examples

Mobile modules for Joomla 36

PDA-plugin for joomla Combination of a mobile template and a joomla plugin − Mobile template provides a very simple view of your site Very easy to use No image transcoding Limited in the number of modules that can be viewed Last update already dates from more then a year back 37

PDA-Plugin config 38

Mobilebot http://www.nearsoft.com/blog/mobilebot-joomla-goes- mobile.html Focusses on switching templates for different devices Change html content based on the device Does not provide a mobile view 39

WAFL Experimental student project (guided by Siruna) Dynamically create a mobile template from each existing theme Use the Siruna transcoding engine to ‘real-time’ transcode for optimized mobile viewing Easy to use Quality is difficult to predict (best effort) 40

Osmobi plugin + template New solution taking the best of all worlds - Plugin - Template - And transcoding service 41

OSMOBI

Leave your e-mail or business card to get a invitation for the beta site!!

Download the Osmobi plugin and template

Install plugin on your existing website

Start building your mobile website with Osmobi

Remove or rearrange content

Change CSS and style

Change Colors

Add Advertisment and Analytics

More features • Device detection • Website Fit to screen • Menus in user friendly dropdown box • Automatic Image resizing • linearization of tables • availability of Iphone Webclip • Selection out different mobile themes • ...

What is transcoding? TRANSCODING YOUR SITE 52

Creating the mobile look Create you own themes (see rules of thumb) − No fixed margins − No floats − No fixed widths Currently high risk and − No big fixed fonts − Reduce the usage of tables (or reduce the number of columns) complexity, but allows more − Navigation in a dropdown list works well creativity! − ... Use an adaptation service − Partly automation − Build in functionality to help creating different versions for different devices − Real multiplatform distribution − Fast prototyping − High Quality

Automatic Content Device Content Adaptation Detection Adaptation Engine Select Content Menu Fetcher Select mobile content Adapt Style 54

We search Joomla beta-testers! Leave your e-mail or businesscard and get an early Osmobi invitation

Contact Mail : Tom.Deryckere@siruna.com Twitter: @twom Siruna: http://www.siruna.com, http://www.osmobi.com 56

Building Mobile Websites with Joomla

by Tom Deryckere on Oct 14, 2009

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 112

Statistics

Building Mobile Websites with Joomla Presentation Transcript

http://www.slideshare.net	110
http://niartsdesign.blogspot.com	2