Basics of making mobile
websites with Drupal
Tom Deryckere
Software Architect / Siruna
@twom
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
5
Making content mobile
is the basis


Making mobile content
useful and usable
is the need


                6
Mobile Web Applications
     that :
     Work on a phone
     Fit on a phone
     Make SENSE on a phone
     Call to ACTIO...
Examples (Drupal)
DrupalCon Paris:
http://drupalcon.siruna.com
Slate:
http://twom.slate.mobixx.eu




                  8
Examples (Drupal)
Garland mobile:
http://twom.garland.mobixx.eu
Marina:
http://twom.marina.mobixx.eu
Zen:
http://twom.zen....
WHERE IS THE COMPLEXITY


       10
Complexity
 Device fragmentation:
 − Millions of devices
 − Different Operating systems
 − Different capabilities
      • ...
On fragmentation
  Convergence is coming
  Javascript becomes more and more the standard
  Desktop html works on mobile de...
More interesting data
        United States Handset Data - April 2009   India Handset Data - April 2009
        Requests: ...
Complexity
 Optmization of download size
  − Network connections are not always optimal (between 50kb/s –
    1,8Mbit/s
  ...
Complexity




Simple (double) navigation
No video
Easy access to stories     15
SOME MORE EXAMPLES


       16
General                              Login or Register


 Form a multi-column based site going towards a 1
 column site
 W...
Design
 Rules of thumb
  −   No fixed margins
  −   No floats
  −   No big fixed fonts
  −   Reduce the usage of tables (o...
Examples




       19
Examples




       20
Examples




       21
Examples




       22
Examples




       23
THE TOOLS


       24
Mobile modules for Drupal
    Many attempts in the comunity
    Focus on
    − Providing mobile themes (e.g. iUI, mobile t...
Some Drupal modules
 Under my maintenance – Co-maintainers welcome!
 http://drupal.org/project/mobile_tools
 (release 6.x-...
First define the flow (4 steps)
                        Device Detection
                (Mobile device, desktop, PSP, ......
User notification / redirection
   Device detection
  − Notify mobile users for the existence of a mobile site
  − Automat...
Mobile permissions
 Mobile context in the permission system
  − Roles of the mobile visitor gets replaced by a mobile vari...
Theme switching
 Theme switching (based on device group if needed)
 Based on domain name or device detection
 Switching pe...
Demo 1




         31
Creating the mobile look
  Two main solutions
  Create you own themes (see rules of thumb)
  −   No fixed margins         ...
Adaptation engine =
proxy to the mobile user
     Mobile URL               Desktop URL




                        DNS



...
The Siruna platform




     Website          XML Feed


                                 34
How does it work?
                                  Automatic
                                   Content
 Device          ...
Content adaptation engine
 Siruna Composer
Previewing   XML based rules
             (http://open.siruna.org/documentation...
XML scripting language:
syntax
 <map:transform />
 means you want to define a transformation on the content.

 <map:transf...
Adaptations (some examples)
         Remove content (example remove content of nodes on
         frontpage)
     < <map:tr...
Adaptations (examples)
     Extract several menu structures and collect as dropdown
<map:transform type="sirunaMenuExtract...
Adaptations (examples)

     Different adaptations for different devices:
<map:select type="sirunaExpressionSelector">
<ma...
Siruna module
  Tight integration between Siruna and Drupal
  Flexible definition of filters for content types, menu
 page...
Predefined adaptations
  Module allows creating adaptation for your own
  themes
  Creation of a repository of mobile adap...
Define your filters
 Filter is a adaptation pipeline for group of pages
 − E.g. Specific pages or nodetypes can have a dif...
Demo 2




         44
Contact
Mail : Tom.Deryckere@siruna.com
Blog: http://www.mobiledrupal.com
Twitter: @twom, @siruna
Siruna: http://www.sirun...
Upcoming SlideShare
Loading in...5
×

Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09

2,986

Published on

Presentation given during Drupal Camp Colorado 2009 about Drupal and mobilization of websites

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,986
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
137
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Siruna presentation Mobile Drupal @ Drupalcamp Colorado Jun09

  1. 1. Basics of making mobile websites with Drupal Tom Deryckere Software Architect / Siruna @twom
  2. 2. Technology Trends 25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s
  3. 3. Technology that works From WAP to iMode to xHTML
  4. 4. Network side TECHNOLOGY From slow connections to fast connections
  5. 5. 5
  6. 6. Making content mobile is the basis Making mobile content useful and usable is the need 6
  7. 7. Mobile Web Applications that : Work on a phone Fit on a phone Make SENSE on a phone Call to ACTION and have REVENUE models 7
  8. 8. Examples (Drupal) DrupalCon Paris: http://drupalcon.siruna.com Slate: http://twom.slate.mobixx.eu 8
  9. 9. 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 9
  10. 10. WHERE IS THE COMPLEXITY 10
  11. 11. 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 − ... 11
  12. 12. On fragmentation Convergence is coming Javascript becomes more and more the standard Desktop html works on mobile devices 12
  13. 13. 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 320 x 240 px 480x320 px Palm pre: 480 x 320 13 Source: AdMob
  14. 14. Complexity Optmization 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) 14
  15. 15. Complexity Simple (double) navigation No video Easy access to stories 15
  16. 16. SOME MORE EXAMPLES 16
  17. 17. 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 17 New Comments Sponsors etc ...
  18. 18. Design 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, ... 18
  19. 19. Examples 19
  20. 20. Examples 20
  21. 21. Examples 21
  22. 22. Examples 22
  23. 23. Examples 23
  24. 24. THE TOOLS 24
  25. 25. Mobile modules for Drupal Many attempts in the comunity 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 http://mobiledrupal.com/content/overview-mobile-modules-drupal 25
  26. 26. Some Drupal modules Under my maintenance – Co-maintainers welcome! http://drupal.org/project/mobile_tools (release 6.x-1.7) http://drupal.org/project/siruna (release 6.x-1.0-beta) http://drupal.org/project/wurfl (release 6.x-dev) Planned: − Image resizing module − Video transcoding solution (based on Media Mover) − Providing some more mobile themes 26
  27. 27. First define the flow (4 steps) 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) 27
  28. 28. 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 28
  29. 29. 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! 29
  30. 30. Theme switching Theme switching (based on device group if needed) Based on domain name or device detection Switching per device group (Android, iPhone, etc ...) 30
  31. 31. Demo 1 31
  32. 32. Creating the mobile look Two main solutions Create you own themes (see rules of thumb) − No fixed margins Currently high risk and − No floats complexity, but allows more − No big fixed fonts − Reduce the usage of tables (or reduce the number of columns) creativity! − 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
  33. 33. Adaptation engine = proxy to the mobile user Mobile URL Desktop URL DNS Adaptation engine Website / XML stream
  34. 34. The Siruna platform Website XML Feed 34
  35. 35. How does it work? Automatic Content Device Content Adaptation Detection Adaptation Engine Select Content Menu Fetcher Select mobile content Adapt Style 35
  36. 36. Content adaptation engine Siruna Composer Previewing XML based rules (http://open.siruna.org/documentation/sitemap-api) 36
  37. 37. 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
  38. 38. 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> 38
  39. 39. 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> 39
  40. 40. Adaptations (examples) Different adaptations for different devices: <map:select type="sirunaExpressionSelector"> <map:when test="width &lt; 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> 40
  41. 41. Siruna module Tight integration between Siruna and Drupal Flexible definition of filters for content types, menu pages, views and individual pages Duplication of theme enabling a “mobile configuration” for the mobile users Possibility to apply predefined adaptations Previewing of the mobile site from within Drupal 41
  42. 42. Predefined adaptations Module allows creating adaptation for your own themes Creation of a repository of mobile adaptations 42
  43. 43. Define your filters Filter is a adaptation pipeline for group of pages − E.g. Specific pages or nodetypes can have a different filter! Powerfull concept to make complex sites mobile! 43
  44. 44. Demo 2 44
  45. 45. Contact Mail : Tom.Deryckere@siruna.com Blog: http://www.mobiledrupal.com Twitter: @twom, @siruna Siruna: http://www.siruna.com, http://open.siruna.com Looking for partnerships with Drupal agencies and developers! 45
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×