Drupalcamp LA Aug 2009
Download as PPT, PDF1 like677 views
This document discusses creating mobile websites with Drupal. It covers technology trends in mobile, reasons to go mobile, complexity issues around device fragmentation and standards, examples of mobile Drupal sites, recommendations for bringing users to the mobile site, tools for mobile site creation, and content adaptation techniques.
![< 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="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /> </map:transform> => Means you want to remove the fieldset of the form XML scripting language: syntax](https://image.slidesharecdn.com/drupalcamplaaug9-090824143711-phpapp02/85/Drupalcamp-LA-Aug-2009-47-320.jpg)
![Remove content (example remove content of nodes on frontpage) Make drupal forms mobile friendly: Adaptations (some examples) < <map:transform type="sirunaElementTransformer"> <map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" /> </map:transform> <map:transform type="sirunaElementTransformer"> <map:parameter name="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /> <map:parameter name="task1" value="removeAttribute(//p:textarea, cols)" /> <map:parameter name="task2" value="removeAttribute(//p:input, size)" /> <map:parameter name="task3" value="setAttribute(//p:textarea, rows, 3)" /> <map:parameter name="task4" value="setAttribute(//p:textarea, style, width:90%)" /> <map:parameter name="task5" value="setAttribute(//p:form[@id='comment-form']//p:input, style, width:90%)" /> </map:transform>](https://image.slidesharecdn.com/drupalcamplaaug9-090824143711-phpapp02/85/Drupalcamp-LA-Aug-2009-48-320.jpg)
![Extract several menu structures and collect as dropdown Change / remove CSS attributes Adaptations (examples) <map:transform type="sirunaMenuExtractor"> <map:parameter name="task0" value="extract(//p:ul[@class='links primary-links'], false, false, true)" /> <map:parameter name="task1" value="extract(//p:ul[@class='links secondary-links'], false, false, true)" /> </map:transform> <map:transform type="sirunaMenuInserter"> <map:parameter name="select_current_url" value="true" /> </map:transform> <map:transform type="sirunaCSSTransformer"> <map:parameter name="task0" value="addCSSItemAttribute(.front #block-block-13, background-position, center)" /> <map:parameter name="task1" value="removeCSSItemAttribute(#block-block-13, height)" /> <map:parameter name="task2" value="removeCSSItemAttribute(#block-block-13, margin-bottom)" /> <map:parameter name="task3" value="removeCSSItemAttribute(#block-block-13, margin-top)" /> <map:parameter name="task4" value="removeCSSItemAttribute(#block-block-13, padding-top)" /> <map:parameter name="task5" value="addCSSItemAttribute(#block-block-13, background-position, center)" /> </map:transform>](https://image.slidesharecdn.com/drupalcamplaaug9-090824143711-phpapp02/85/Drupalcamp-LA-Aug-2009-49-320.jpg)
![Different adaptations for different devices: Analtyics inserter <map:transform type="sirunaGoogleAnalyticsInserter"> <map:parameter name="identifier" value="UA-2883003-5"/> </map:transform> Adaptations (examples) <map:select type="sirunaExpressionSelector" > <map:when test="width < 160 || !imageSupported" > <map:transform type="sirunaElementTransformer" > <map:parameter name="task0" value="remove(//p:div[@id='contentsurround']//p:img)" /> </map:transform> </map:when> </map:select>](https://image.slidesharecdn.com/drupalcamplaaug9-090824143711-phpapp02/85/Drupalcamp-LA-Aug-2009-50-320.jpg)
![Mail : [email_address] Blog: http://www.mobiledrupal.com Twitter: @twom, @siruna Siruna: http://www.siruna.com , http://open.siruna.com Contact](https://image.slidesharecdn.com/drupalcamplaaug9-090824143711-phpapp02/85/Drupalcamp-LA-Aug-2009-52-320.jpg)
Drupalcamp LA Aug 2009
- 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
- 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)
- 14. WHERE IS THE COMPLEXITY
- 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? Complexity
- 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) Complexity
- 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, ... Design
- 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
- 34. FLOW AND TOOLS
- 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
- 42. CREATE THE MOBILE LOOK
- 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="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /> </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="sirunaElementTransformer"> <map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" /> </map:transform> <map:transform type="sirunaElementTransformer"> <map:parameter name="task0" value="remove(//p:form[@id='comment-form']//p:fieldset)" /> <map:parameter name="task1" value="removeAttribute(//p:textarea, cols)" /> <map:parameter name="task2" value="removeAttribute(//p:input, size)" /> <map:parameter name="task3" value="setAttribute(//p:textarea, rows, 3)" /> <map:parameter name="task4" value="setAttribute(//p:textarea, style, width:90%)" /> <map:parameter name="task5" value="setAttribute(//p:form[@id='comment-form']//p:input, style, width:90%)" /> </map:transform>
- 49. Extract several menu structures and collect as dropdown Change / remove CSS attributes Adaptations (examples) <map:transform type="sirunaMenuExtractor"> <map:parameter name="task0" value="extract(//p:ul[@class='links primary-links'], false, false, true)" /> <map:parameter name="task1" value="extract(//p:ul[@class='links secondary-links'], false, false, true)" /> </map:transform> <map:transform type="sirunaMenuInserter"> <map:parameter name="select_current_url" value="true" /> </map:transform> <map:transform type="sirunaCSSTransformer"> <map:parameter name="task0" value="addCSSItemAttribute(.front #block-block-13, background-position, center)" /> <map:parameter name="task1" value="removeCSSItemAttribute(#block-block-13, height)" /> <map:parameter name="task2" value="removeCSSItemAttribute(#block-block-13, margin-bottom)" /> <map:parameter name="task3" value="removeCSSItemAttribute(#block-block-13, margin-top)" /> <map:parameter name="task4" value="removeCSSItemAttribute(#block-block-13, padding-top)" /> <map:parameter name="task5" value="addCSSItemAttribute(#block-block-13, background-position, center)" /> </map:transform>
- 50. Different adaptations for different devices: Analtyics inserter <map:transform type="sirunaGoogleAnalyticsInserter"> <map:parameter name="identifier" value="UA-2883003-5"/> </map:transform> Adaptations (examples) <map:select type="sirunaExpressionSelector" > <map:when test="width < 160 || !imageSupported" > <map:transform type="sirunaElementTransformer" > <map:parameter name="task0" value="remove(//p:div[@id='contentsurround']//p:img)" /> </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 Contact