Siruna session at Drupalcon Paris 2009
1 like934 views
The document presents a comprehensive guide on creating mobile websites using Drupal, highlighting the importance of mobile optimization in today's web landscape. It discusses the challenges of device fragmentation, user experience, and the need for tailored content delivery, along with practical examples and tools for effective mobile site development. Additionally, it promotes a new service, OSMOBI, for easy mobilization of Drupal sites, aiming for simplicity and high-quality mobile adaptations.
![XML scripting language:
syntax
<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](https://image.slidesharecdn.com/drupalconparis-090907084444-phpapp01/85/Siruna-session-at-Drupalcon-Paris-2009-52-320.jpg)
![Adaptations (some examples)
Remove content (example remove content of nodes on
frontpage)
< <map:transform type="sirunaElementTransformer">
<map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" />
</map:transform>
Make drupal forms mobile friendly:
<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>
53](https://image.slidesharecdn.com/drupalconparis-090907084444-phpapp01/85/Siruna-session-at-Drupalcon-Paris-2009-53-320.jpg)
![Adaptations (examples)
Extract several menu structures and collect as dropdown
<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>
Change / remove CSS attributes
<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>
54](https://image.slidesharecdn.com/drupalconparis-090907084444-phpapp01/85/Siruna-session-at-Drupalcon-Paris-2009-54-320.jpg)
![Adaptations (examples)
Different adaptations for different devices:
<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>
Analtyics inserter
<map:transform type="sirunaGoogleAnalyticsInserter">
<map:parameter name="identifier" value="UA-2883003-5"/>
</map:transform>
55](https://image.slidesharecdn.com/drupalconparis-090907084444-phpapp01/85/Siruna-session-at-Drupalcon-Paris-2009-55-320.jpg)
Siruna session at Drupalcon Paris 2009
- 1. Basics of making mobile websites with Drupal Drupalcon Paris 2009 Tom Deryckere Software Architect / Siruna @twom
- 2. Before we start Questions? During the presentation: raise your hand and shout After the presentation: − Raise your hand and shout again − Post questions on twitter: #siruna − Or come aftwards and talk to me 2
- 3. 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 Drupal Mobile partner of several web agencies 3
- 4. 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 4
- 5. Technology Trends 25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s
- 6. Technology that works From WAP to iMode to xHTML
- 7. Network side TECHNOLOGY From slow connections to fast connections
- 8. 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,” 8
- 9. 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 9
- 10. Reasons to go mobile Applications already driving mobile usage .... Drive traffic on mobile phones to websites Find relevant content Advertisment ??? Fast download Intuitive .... 10
- 11. Reasons to go mobile Activities driving mobile usage Events / conferences Shopping Vacation / travelling Commuting Toilet 11
- 12. 12
- 13. 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/ 13
- 14. SOME EXAMPLES 14
- 17. Examples (Drupal) Moneywise − http://twom.mws.mobixx.eu 17
- 18. Drupalcon on mobile? Go to http://drupalcon.siruna.com Made mobile using the Siruna Composer Check out the schedule on your mobile 18
- 19. WHERE IS THE COMPLEXITY 19
- 20. 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? 20
- 21. 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) 21
- 22. On fragmentation Convergence is coming Javascript becomes more and more the standard Desktop html works on mobile devices 22
- 23. 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 23 Source: AdMob
- 24. Complexity Simple (double) navigation No video Easy access to stories 24
- 25. WEBSITE VS APPLICATION 25
- 26. 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
- 27. http://www.scribd.com/doc/1743125 Complexity / Access to device resource 2/Hitch-Hikers-Guide-Runtime- power -Network interface Booklet - camera C++ - database objective C - contacts - calender JAVA ME NET CF - Accelero meter - GPS Python scripting - .. Widgets Web 27 Range
- 28. 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
- 29. Good news 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) 29
- 30. SOME MORE EXAMPLES 30
- 31. 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 31 New Comments Sponsors etc ...
- 32. Design Rules of thumb − No fixed margins − No floats − Limit usage of fixed fonts − Reduce the usage of tables (or reduce the number of columns) − 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, ... Optional − Remove node content from frontpage − Overview blocks can be reduced to link pointing to a page view 32
- 33. Examples 33
- 34. Examples 34
- 35. Examples 35
- 36. Examples 36
- 37. Examples 37
- 38. Talk some Drupal MOBILE TOOLS 38
- 39. Mobile design flow Device Detection (Mobile device, desktop, PSP, ...) Switching (Make sure the user gets access to the best site) Functionality + content (What functionality and content is relevant for the device) Theming (Layout, image resizing, navigation, table linearization) 39
- 40. Goal of mobile tools Bundle some essential funcitonality to go mobile into one module Device detection User Notification: “I see you surf mobile... Check out our mobile site” Redirection Mobile permission Theme switching .... 40
- 41. User notification / redirection 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 41
- 42. Redirection What we recomend: − 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 Eg. Facebook 42
- 43. Mobile permissions 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! 43
- 44. Theme switching Theme switching (based on device group if needed) Based on domain name or device detection Switching per device group (Android, iPhone, etc ...) 44
- 45. CREATE THE MOBILE LOOK 45
- 46. Creating the mobile look Create you own themes (see rules of thumb) − No fixed margins − No floats − No big fixed fonts Currently high risk and − Reduce the usage of tables (or reduce the number of columns) − Make a block with links to views like complexity, but allows more • Most recent comments creativity! • 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 − Partly automation − Build in functionality to help creating different versions for different devices − Real multiplatform distribution − Fast prototyping − High Quality
- 47. Automatic Content Device Content Adaptation Detection Adaptation Engine Select Content Menu Fetcher Select mobile content Adapt Style 47
- 48. We are launching OSMOBI A Free service to instantly mobilize your Drupal site based on our transcoding engine Focus on − Very simple and fast − Simple adaptations − High quality We start with support for Garland and the color picker module − Create your own mobile style 48
- 49. Demo 49
- 50. Content adaptation engine Siruna Composer Previewing XML based rules (http://open.siruna.org/documentation/sitemap-api) 50
- 51. Demo Mobilization of Garland − Create a dropdown menu − Remove blocks 51
- 52. XML scripting language: syntax <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
- 53. Adaptations (some examples) Remove content (example remove content of nodes on frontpage) < <map:transform type="sirunaElementTransformer"> <map:parameter name="task0" value="remove(//p:div[@class='views-field-teaser'])" /> </map:transform> Make drupal forms mobile friendly: <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> 53
- 54. Adaptations (examples) Extract several menu structures and collect as dropdown <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> Change / remove CSS attributes <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> 54
- 55. Adaptations (examples) Different adaptations for different devices: <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> Analtyics inserter <map:transform type="sirunaGoogleAnalyticsInserter"> <map:parameter name="identifier" value="UA-2883003-5"/> </map:transform> 55
- 56. Thank you! Talk to us if you want to beta-test our new OSMOBI service! 56
- 57. Questions? 57
- 58. Contact Meet us for a free beer! Mail : Tom.Deryckere@siruna.com Blog: http://www.mobiledrupal.com Twitter: @siruna Siruna: http://www.siruna.com, http://open.siruna.com 58