Drupalcamp LA Aug 2009


Published on

Presentation given at Drupalcamp LA 2009

Published in: Travel
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 24/08/09
  • 24/08/09
  • 24/08/09
  • 24/08/09
  • Drupalcamp LA Aug 2009

    1. 1. Basics of making mobile websites with Drupal Tom Deryckere Software Architect / Siruna @twom
    2. 2. <ul><li>25 years ago :The first GSM: 11 kg </li></ul><ul><li>Today: iPhoney’s, HSDPA, MID’s </li></ul>Technology Trends
    3. 3. <ul><li>From WAP to iMode to xHTML </li></ul>Technology that works
    4. 4. <ul><li>From slow connections to fast connections </li></ul>Network side TECHNOLOGY
    5. 5. <ul><li>Mobile Web Applications that : </li></ul><ul><li>Work on a phone </li></ul><ul><li>Fit on a phone </li></ul><ul><li>Make SENSE on a phone </li></ul><ul><li>Call to ACTION </li></ul><ul><li>and have REVENUE models </li></ul>
    6. 6. <ul><li>35 percent less successful completing Web site tasks via their mobile phones than they are on a regular PC </li></ul><ul><li>Nielsen Norman Group researchers found that the average success rate for users to complete tasks via mobile was only 59 percent. </li></ul><ul><li>“ 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. </li></ul>Current state
    7. 7. <ul><li>“ 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,” </li></ul><ul><li>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. </li></ul><ul><li>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 </li></ul>Current state
    8. 8. Reasons to go mobile <ul><li>Applications already driving mobile usage </li></ul>.... Drive traffic on mobile phones to websites ??? Find relevant content Advertisment Fast download Intuitive ....
    9. 9. <ul><li>Activities driving mobile usage </li></ul>Reasons to go mobile Events / conferences Shopping Vacation / travelling Commuting Toilet
    10. 10.
    11. 11. <ul><li>DrupalCon Paris: http://drupalcon.siruna.com </li></ul><ul><li>Slate: http://twom.slate.mobixx.eu </li></ul>Examples (Drupal)
    12. 12. <ul><li>Garland mobile: http://twom.garland.mobixx.eu </li></ul><ul><li>Marina: http://twom.marina.mobixx.eu </li></ul><ul><li>Zen: http://twom.zen.mobixx.eu </li></ul><ul><li>XIO: http://xio.siruna.com </li></ul><ul><li>http://portal.siruna.com </li></ul>Examples (Drupal)
    13. 13. <ul><li>Moneywise </li></ul><ul><ul><li>http://twom.mws.mobixx.eu </li></ul></ul>Examples (Drupal)
    15. 15. <ul><li>Device fragmentation: </li></ul><ul><ul><li>Millions of devices </li></ul></ul><ul><ul><li>Different Operating systems </li></ul></ul><ul><ul><li>Different capabilities </li></ul></ul><ul><ul><ul><li>Ex: screen sizes, javascript support, CSS / xHTML support, video support </li></ul></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Usability: make a fun and easy experience </li></ul><ul><ul><li>Content has to be easy to find </li></ul></ul><ul><ul><li>Reduce scrolling (no horizontal scrolling) </li></ul></ul><ul><ul><li>Make links clickable (not too small) </li></ul></ul><ul><ul><li>Easy navigation structure that is easy to find </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>How to bring users to the mobile website </li></ul><ul><ul><li>Two urls? Redirection? </li></ul></ul>Complexity
    16. 16. <ul><li>Convergence is coming </li></ul><ul><li>Javascript becomes more and more the standard </li></ul><ul><li>Desktop html works on mobile devices </li></ul>On fragmentation
    17. 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. 18. <ul><li>Optimization of download size </li></ul><ul><ul><li>Network connections are not always optimal (between 50kb/s – 1,8Mbit/s </li></ul></ul><ul><ul><li>Don’t let the user wait, don’t let him download content that he will not use </li></ul></ul><ul><li>Bring relevant content to the mobile user </li></ul><ul><ul><li>Understand what he will look for (think and plan well!!) </li></ul></ul><ul><ul><li>Is not easy (especially for the customer) </li></ul></ul>Complexity
    19. 19. Complexity Simple (double) navigation No video Easy access to stories
    21. 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. 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 <ul><li>Access to device resource </li></ul><ul><li>Network interface </li></ul><ul><li>camera </li></ul><ul><li>database </li></ul><ul><li>contacts </li></ul><ul><li>calender </li></ul><ul><li>Accelero meter </li></ul><ul><li>GPS </li></ul><ul><li>.. </li></ul>
    23. 23. <ul><li>Different standards supported </li></ul><ul><ul><li>xHTML – MP (subset of xHTML) is recommended </li></ul></ul><ul><ul><li>But full xHTML works fine on a lot of devices </li></ul></ul><ul><ul><li>CSS + javascript </li></ul></ul><ul><li>Standardization by W3C </li></ul><ul><li>Industry initiative BONDI ( http://www.bondi.com ) stimulates spread of these (and more) standards </li></ul><ul><li>Main browsers support ‘full web’ </li></ul><ul><ul><li>Opera </li></ul></ul><ul><ul><li>Fennec </li></ul></ul><ul><ul><li>Google Android </li></ul></ul><ul><ul><li>Safari </li></ul></ul><ul><ul><li>Palm Pré </li></ul></ul><ul><ul><li>skyfire </li></ul></ul>Browser technology WebKit!!
    24. 24. <ul><li>In practise, use your general web skills... </li></ul><ul><li>Just keep visuals under control </li></ul><ul><li>You will have some new api’s available in the future (same counts for desktop) </li></ul>Good news
    26. 26. <ul><li>Form a multi-column based site going towards a 1 column site </li></ul><ul><li>We are talking about generic designs </li></ul>General Second navigation New forum posts New Comments Sponsors etc ... Login or Register
    27. 27. <ul><li>Rules of thumb </li></ul><ul><ul><li>No fixed margins </li></ul></ul><ul><ul><li>No floats </li></ul></ul><ul><ul><li>No big fixed fonts </li></ul></ul><ul><ul><li>Reduce the usage of tables (or reduce the number of columns) </li></ul></ul><ul><ul><li>Make a block with links to views like </li></ul></ul><ul><ul><ul><li>Most recent comments </li></ul></ul></ul><ul><ul><ul><li>Most recent forum topics </li></ul></ul></ul><ul><ul><li>Remove node content from frontpage </li></ul></ul><ul><ul><li>Replace the user login block by a link </li></ul></ul><ul><ul><li>Navigation in a dropdown list works well </li></ul></ul><ul><ul><li>No who is online, who is new kind of blogs (not relevant) </li></ul></ul><ul><ul><li>You can make things sexy for iphone, android, ... </li></ul></ul>Design
    28. 28. Examples
    29. 29. Examples
    30. 30. Examples
    31. 31. Examples
    32. 32. Examples
    33. 33. <ul><li>Recommendation: </li></ul><ul><ul><li>2 urls: mobile (m.domain.com) and desktop ( www.domain.com ) </li></ul></ul><ul><ul><li>Direct mobile user immediately to the mobile site </li></ul></ul><ul><ul><li>Have a link on the mobile site to return to the desktop site </li></ul></ul><ul><ul><li>Remember the last choice and for next visit of the domain.com site, redirect to mobile or stay on desktop </li></ul></ul><ul><ul><li>Provide link on desktop to mobile and remember this choice </li></ul></ul><ul><li>No real need for mobile user to learn two urls! </li></ul><ul><li>Seamless transistions </li></ul><ul><ul><li>Ex. Facebook </li></ul></ul>Bringing user to the mobile site
    34. 34. FLOW AND TOOLS
    35. 35. First define the flow (4 steps)
    36. 36. <ul><li>Many attempts in the community </li></ul><ul><li>Focus on </li></ul><ul><ul><li>Providing mobile themes (e.g. iUI, mobile theme) </li></ul></ul><ul><ul><li>Theme switching </li></ul></ul><ul><ul><li>Mobile payments </li></ul></ul><ul><li>Not a lot of demos </li></ul><ul><li>General no proven long term strategy </li></ul><ul><li>An overview on </li></ul>Mobile modules for Drupal http://mobiledrupal.com/content/overview-mobile-modules-drupal
    37. 37. <ul><li>Under my maintenance – Co-maintainers welcome! </li></ul><ul><li>http://drupal.org/project/mobile_tools (release 6.x-1.8) </li></ul><ul><li>http://drupal.org/project/siruna (release 6.x-1.0-beta) </li></ul><ul><li>http://drupal.org/project/wurfl (release 6.x-dev) </li></ul><ul><li>Experimental, in search for balance between configuratbility, usability and performance, ... </li></ul><ul><ul><li>We still use a small derivative for our commercial projects! </li></ul></ul>Some Drupal modules
    38. 38. <ul><li>Set of functionality targetted at preprocessing your site </li></ul><ul><ul><li>Device Detection </li></ul></ul><ul><ul><li>Bringing the mobile users to your mobile site </li></ul></ul><ul><ul><li>Hooking into the permission system </li></ul></ul><ul><ul><li>Theme switching </li></ul></ul><ul><li>Focussed on third party integration! </li></ul><ul><ul><li>Third party device detection (WURFL, Browscap) </li></ul></ul><ul><ul><li>Third party capability detection (WURFL) </li></ul></ul><ul><li>Is very functional but need some improvements </li></ul><ul><ul><li>Usability (reduce the number of options, ahah) </li></ul></ul><ul><ul><li>More testing </li></ul></ul><ul><ul><li>Writing tests </li></ul></ul>Mobile Tools
    39. 39. <ul><li>Device detection </li></ul><ul><ul><li>Notify mobile users for the existence of a mobile site </li></ul></ul><ul><ul><li>Automatically redirect mobile users to the mobile site </li></ul></ul><ul><ul><li>Provide custom configurable message: e.g.: “View mobile | classic ” </li></ul></ul><ul><ul><li>Support for Browscap, Wurfl and other third party device detection modules </li></ul></ul>User notification / redirection
    40. 40. <ul><li>Mobile context in the permission system </li></ul><ul><ul><li>Roles of the mobile visitor gets replaced by a mobile variant of his normal roles </li></ul></ul><ul><ul><li>Administrator can use role permissions to toggle functionality </li></ul></ul><ul><ul><ul><li>Node Acces, Menu per role, etc ... Can help </li></ul></ul></ul><ul><ul><li>= Mobile context for permissions </li></ul></ul><ul><ul><li>Very powerfull tool to toggle functionality on your mobile site! </li></ul></ul>Mobile permissions
    41. 41. <ul><li>Theme switching (based on device group if needed) </li></ul><ul><li>Based on domain name or device detection </li></ul><ul><li>Switching per device group (Android, iPhone, etc ...) </li></ul>Theme switching
    43. 43. <ul><li>Create you own themes (see rules of thumb) </li></ul><ul><ul><li>No fixed margins </li></ul></ul><ul><ul><li>No floats </li></ul></ul><ul><ul><li>No big fixed fonts </li></ul></ul><ul><ul><li>Reduce the usage of tables (or reduce the number of columns) </li></ul></ul><ul><ul><li>Make a block with links to views like </li></ul></ul><ul><ul><ul><li>Most recent comments </li></ul></ul></ul><ul><ul><ul><li>Most recent forum topics </li></ul></ul></ul><ul><ul><li>Remove node content from frontpage </li></ul></ul><ul><ul><li>Replace the user login block by a link </li></ul></ul><ul><ul><li>Navigation in a dropdown list works well </li></ul></ul><ul><ul><li>No who is online, who is new kind of blogs (not relevant) </li></ul></ul><ul><ul><li>You can make things sexy for iphone, android, ... </li></ul></ul><ul><li>Use an adaptation service (like Siruna ;)) </li></ul><ul><ul><li>Does most of the work for you (image transcoding, device detection, adaptation for difference devices) </li></ul></ul><ul><ul><li>Build in functionality to help creating different versions </li></ul></ul><ul><ul><li>Fast prototyping </li></ul></ul><ul><ul><li>High Quality </li></ul></ul>Creating the mobile look Currently high risk and complexity, but allows more creativity!
    44. 44. Adaptation engine = proxy to the mobile user Website / XML stream Mobile URL Adaptation engine Desktop URL DNS
    45. 45. How does it work? Device Detection Content Fetcher Content Adaptation Engine Select Menu Adapt Style Select mobile content Automatic Content Adaptation
    46. 46. Content adaptation engine Siruna Composer Previewing XML based rules (http://open.siruna.org/documentation/sitemap-api)
    47. 47. <ul><li>< map:transform /> means you want to define a transformation on the content. </li></ul><ul><li><map:transform type =“sirunaElementTransformer” /> means you want to use an “Element Transformer” ( http://open.siruna.org/documentation/sitemap-api for more transformers. </li></ul><ul><li><map:transform type=“sirunaElementTransformer> <map:parameter name=&quot;task0&quot; value=&quot;remove(//p:form[@id='comment-form']//p:fieldset)&quot; /> </map:transform> </li></ul><ul><ul><li>=> Means you want to remove the fieldset of the form </li></ul></ul>XML scripting language: syntax
    48. 48. <ul><li>Remove content (example remove content of nodes on frontpage) </li></ul><ul><li>Make drupal forms mobile friendly: </li></ul>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. 49. <ul><li>Extract several menu structures and collect as dropdown </li></ul><ul><li>Change / remove CSS attributes </li></ul>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. 50. <ul><li>Different adaptations for different devices: </li></ul><ul><li>Analtyics inserter </li></ul><ul><li><map:transform type=&quot;sirunaGoogleAnalyticsInserter&quot;> <map:parameter name=&quot;identifier&quot; value=&quot;UA-2883003-5&quot;/> </map:transform> </li></ul>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. 51. <ul><li>Module allows creating adaptation for your own themes </li></ul><ul><li>Creation of a repository of mobile adaptations </li></ul>Predefined adaptations
    52. 52. <ul><li>Mail : [email_address] </li></ul><ul><li>Blog: http://www.mobiledrupal.com </li></ul><ul><li>Twitter: @twom, @siruna </li></ul><ul><li>Siruna: http://www.siruna.com , http://open.siruna.com </li></ul>Contact