• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Mobile Websites with Joomla
 

Building Mobile Websites with Joomla

on

  • 17,190 views

Presentation on mobile web development as presented at the Joomla Day 2009 in NY

Presentation on mobile web development as presented at the Joomla Day 2009 in NY

Statistics

Views

Total Views
17,190
Views on SlideShare
17,078
Embed Views
112

Actions

Likes
3
Downloads
323
Comments
2

2 Embeds 112

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I like the site.
    Are you sure you want to
    Your message goes here
    Processing…
  • We just completed a number of standards compliant mobile phone templates for Joomla, optimized for iPhone 3GS, iPhone 4 and iPad, here: http://alturl.com/tvkc

    If you own an iPhone, try the samples, we are building a demo site here: http://www.noxidsoft.com/templar

    They are only a few dollars for the download, is open-source GNU licensed of course and they are being used in production mode in a number of mobile websites. Remember to enable the cache feature if desired.

    Hope someone can use them, we have spent more than a few hours trying to get something generic enough but simple to use that we could share. There will be more versions and layouts to come in the coming weeks and months as the first mobile optimized template we made for Joomla! 1.5.x has proven a winner.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building Mobile Websites with Joomla Building Mobile Websites with Joomla Presentation Transcript

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