• Like
Drupalcamp LA Aug 2009
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Drupalcamp LA Aug 2009


Presentation given at Drupalcamp LA 2009

Presentation given at Drupalcamp LA 2009

Published in Travel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • 24/08/09
  • 24/08/09
  • 24/08/09
  • 24/08/09


  • 1. Basics of making mobile websites with Drupal Tom Deryckere Software Architect / Siruna @twom
  • 2.
    • 25 years ago :The first GSM: 11 kg
    • Today: iPhoney’s, HSDPA, MID’s
    Technology Trends
  • 3.
    • From WAP to iMode to xHTML
    Technology that works
  • 4.
    • From slow connections to fast connections
    Network side TECHNOLOGY
  • 5.
    • Mobile Web Applications that :
    • Work on a phone
    • Fit on a phone
    • Make SENSE on a phone
    • Call to ACTION
    • and have REVENUE models
  • 6.
    • 35 percent less successful completing Web site tasks via their mobile phones than they are on a regular PC
    • Nielsen Norman Group researchers found that the 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,” said Raluca Budiu, user experience specialist at Nielsen Norman Group, Sunnyvale, CA. “Some companies have mobile sites, but they do not direct users to them.
    Current state
  • 7.
    • “ Also, the preferred method of access to mobile sites is search, and search engines do not make it easy for users to find mobile sites,”
    • Finally, researchers stressed that 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
    Current state
  • 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.
    • Activities driving mobile usage
    Reasons to go mobile Events / conferences Shopping Vacation / travelling Commuting Toilet
  • 10.
  • 11.
    • DrupalCon Paris: http://drupalcon.siruna.com
    • Slate: http://twom.slate.mobixx.eu
    Examples (Drupal)
  • 12.
    • 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
    Examples (Drupal)
  • 13.
    • Moneywise
      • http://twom.mws.mobixx.eu
    Examples (Drupal)
  • 15.
    • 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?
  • 16.
    • Convergence is coming
    • Javascript becomes more and more the standard
    • Desktop html works on mobile devices
    On fragmentation
  • 17. More interesting data United States Handset Data - April 2009 Requests: 3,538,714,000 India Handset Data - April 2009 Requests: 447,079,855 480x320 px 176x220 px 240x320 px 480x320 px Palm pre: 480 x 320 320 x 240 px Source: AdMob
  • 18.
    • 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)
  • 19. Complexity Simple (double) navigation No video Easy access to stories
  • 21. 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 / javascript With own touch (services api + widgets) What some would call widgets. Blackberry Java Browser HTML / CSS / javascript W3C standards, reach
  • 22. Complexity / power Range objective C JAVA ME NET CF C++ Python scripting Web Widgets http://www.scribd.com/doc/17431252/Hitch-Hikers-Guide-Runtime-Booklet
    • Access to device resource
    • Network interface
    • camera
    • database
    • contacts
    • calender
    • Accelero meter
    • GPS
    • ..
  • 23.
    • 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
      • Palm Pré
      • skyfire
    Browser technology WebKit!!
  • 24.
    • In practise, use your general web skills...
    • Just keep visuals under control
    • You will have some new api’s available in the future (same counts for desktop)
    Good news
  • 26.
    • Form a multi-column based site going towards a 1 column site
    • We are talking about generic designs
    General Second navigation New forum posts New Comments Sponsors etc ... Login or Register
  • 27.
    • Rules of thumb
      • No fixed margins
      • No floats
      • No big fixed fonts
      • Reduce the usage of tables (or reduce the number of columns)
      • Make a block with links to views like
        • Most recent comments
        • Most recent forum topics
      • Remove node content from frontpage
      • Replace the user login block by a link
      • Navigation in a dropdown list works well
      • No who is online, who is new kind of blogs (not relevant)
      • You can make things sexy for iphone, android, ...
  • 28. Examples
  • 29. Examples
  • 30. Examples
  • 31. Examples
  • 32. Examples
  • 33.
    • Recommendation:
      • 2 urls: mobile (m.domain.com) and desktop ( www.domain.com )
      • Direct mobile user immediately to the mobile site
      • Have a link on the mobile site to return to the desktop site
      • Remember the last choice and for next visit of the domain.com site, redirect to mobile or stay on desktop
      • Provide link on desktop to mobile and remember this choice
    • No real need for mobile user to learn two urls!
    • Seamless transistions
      • Ex. Facebook
    Bringing user to the mobile site
  • 35. First define the flow (4 steps)
  • 36.
    • Many attempts in the community
    • Focus on
      • Providing mobile themes (e.g. iUI, mobile theme)
      • Theme switching
      • Mobile payments
    • Not a lot of demos
    • General no proven long term strategy
    • An overview on
    Mobile modules for Drupal http://mobiledrupal.com/content/overview-mobile-modules-drupal
  • 37.
    • Under my maintenance – Co-maintainers welcome!
    • http://drupal.org/project/mobile_tools (release 6.x-1.8)
    • http://drupal.org/project/siruna (release 6.x-1.0-beta)
    • http://drupal.org/project/wurfl (release 6.x-dev)
    • Experimental, in search for balance between configuratbility, usability and performance, ...
      • We still use a small derivative for our commercial projects!
    Some Drupal modules
  • 38.
    • Set of functionality targetted at preprocessing your site
      • Device Detection
      • Bringing the mobile users to your mobile site
      • Hooking into the permission system
      • Theme switching
    • Focussed on third party integration!
      • Third party device detection (WURFL, Browscap)
      • Third party capability detection (WURFL)
    • Is very functional but need some improvements
      • Usability (reduce the number of options, ahah)
      • More testing
      • Writing tests
    Mobile Tools
  • 39.
    • Device detection
      • Notify mobile users for the existence of a mobile site
      • Automatically redirect mobile users to the mobile site
      • Provide custom configurable message: e.g.: “View mobile | classic ”
      • Support for Browscap, Wurfl and other third party device detection modules
    User notification / redirection
  • 40.
    • Mobile context in the permission system
      • Roles of the mobile visitor gets replaced by a mobile variant of his normal roles
      • Administrator can use role permissions to toggle functionality
        • Node Acces, Menu per role, etc ... Can help
      • = Mobile context for permissions
      • Very powerfull tool to toggle functionality on your mobile site!
    Mobile permissions
  • 41.
    • Theme switching (based on device group if needed)
    • Based on domain name or device detection
    • Switching per device group (Android, iPhone, etc ...)
    Theme switching
  • 43.
    • Create you own themes (see rules of thumb)
      • No fixed margins
      • No floats
      • No big fixed fonts
      • Reduce the usage of tables (or reduce the number of columns)
      • Make a block with links to views like
        • Most recent comments
        • Most recent forum topics
      • Remove node content from frontpage
      • Replace the user login block by a link
      • Navigation in a dropdown list works well
      • No who is online, who is new kind of blogs (not relevant)
      • You can make things sexy for iphone, android, ...
    • Use an adaptation service (like Siruna ;))
      • Does most of the work for you (image transcoding, device detection, adaptation for difference devices)
      • Build in functionality to help creating different versions
      • Fast prototyping
      • High Quality
    Creating the mobile look Currently high risk and complexity, but allows more creativity!
  • 44. Adaptation engine = proxy to the mobile user Website / XML stream Mobile URL Adaptation engine Desktop URL DNS
  • 45. How does it work? Device Detection Content Fetcher Content Adaptation Engine Select Menu Adapt Style Select mobile content Automatic Content Adaptation
  • 46. Content adaptation engine Siruna Composer Previewing XML based rules (http://open.siruna.org/documentation/sitemap-api)
  • 47.
    • < map:transform /> means you want to define a transformation on the content.
    • <map:transform type =“sirunaElementTransformer” /> means you want to use an “Element Transformer” ( http://open.siruna.org/documentation/sitemap-api for more transformers.
    • <map:transform type=“sirunaElementTransformer> <map:parameter name=&quot;task0&quot; value=&quot;remove(//p:form[@id='comment-form']//p:fieldset)&quot; /> </map:transform>
      • => Means you want to remove the fieldset of the form
    XML scripting language: syntax
  • 48.
    • Remove content (example remove content of nodes on frontpage)
    • Make drupal forms mobile friendly:
    Adaptations (some examples) < <map:transform type=&quot;sirunaElementTransformer&quot;> <map:parameter name=&quot;task0&quot; value=&quot;remove(//p:div[@class='views-field-teaser'])&quot; /> </map:transform> <map:transform type=&quot;sirunaElementTransformer&quot;> <map:parameter name=&quot;task0&quot; value=&quot;remove(//p:form[@id='comment-form']//p:fieldset)&quot; /> <map:parameter name=&quot;task1&quot; value=&quot;removeAttribute(//p:textarea, cols)&quot; /> <map:parameter name=&quot;task2&quot; value=&quot;removeAttribute(//p:input, size)&quot; /> <map:parameter name=&quot;task3&quot; value=&quot;setAttribute(//p:textarea, rows, 3)&quot; /> <map:parameter name=&quot;task4&quot; value=&quot;setAttribute(//p:textarea, style, width:90%)&quot; /> <map:parameter name=&quot;task5&quot; value=&quot;setAttribute(//p:form[@id='comment-form']//p:input, style, width:90%)&quot; /> </map:transform>
  • 49.
    • Extract several menu structures and collect as dropdown
    • Change / remove CSS attributes
    Adaptations (examples) <map:transform type=&quot;sirunaMenuExtractor&quot;> <map:parameter name=&quot;task0&quot; value=&quot;extract(//p:ul[@class='links primary-links'], false, false, true)&quot; /> <map:parameter name=&quot;task1&quot; value=&quot;extract(//p:ul[@class='links secondary-links'], false, false, true)&quot; /> </map:transform> <map:transform type=&quot;sirunaMenuInserter&quot;> <map:parameter name=&quot;select_current_url&quot; value=&quot;true&quot; /> </map:transform> <map:transform type=&quot;sirunaCSSTransformer&quot;> <map:parameter name=&quot;task0&quot; value=&quot;addCSSItemAttribute(.front #block-block-13, background-position, center)&quot; /> <map:parameter name=&quot;task1&quot; value=&quot;removeCSSItemAttribute(#block-block-13, height)&quot; /> <map:parameter name=&quot;task2&quot; value=&quot;removeCSSItemAttribute(#block-block-13, margin-bottom)&quot; /> <map:parameter name=&quot;task3&quot; value=&quot;removeCSSItemAttribute(#block-block-13, margin-top)&quot; /> <map:parameter name=&quot;task4&quot; value=&quot;removeCSSItemAttribute(#block-block-13, padding-top)&quot; /> <map:parameter name=&quot;task5&quot; value=&quot;addCSSItemAttribute(#block-block-13, background-position, center)&quot; /> </map:transform>
  • 50.
    • Different adaptations for different devices:
    • Analtyics inserter
    • <map:transform type=&quot;sirunaGoogleAnalyticsInserter&quot;> <map:parameter name=&quot;identifier&quot; value=&quot;UA-2883003-5&quot;/> </map:transform>
    Adaptations (examples) <map:select type=&quot;sirunaExpressionSelector&quot; > <map:when test=&quot;width &lt; 160 || !imageSupported&quot; > <map:transform type=&quot;sirunaElementTransformer&quot; > <map:parameter name=&quot;task0&quot; value=&quot;remove(//p:div[@id='contentsurround']//p:img)&quot; /> </map:transform> </map:when> </map:select>
  • 51.
    • Module allows creating adaptation for your own themes
    • Creation of a repository of mobile adaptations
    Predefined adaptations
  • 52.
    • Mail : [email_address]
    • Blog: http://www.mobiledrupal.com
    • Twitter: @twom, @siruna
    • Siruna: http://www.siruna.com , http://open.siruna.com