Basics of making mobile
websites (with Drupal)
Drupalcamp New York 5 dec 2009



Tom Deryckere
Software Architect / Siruna...
About Siruna
 open source company

 We think in small screens (Mobile Web)

 We develop solutions to help the development ...
Osmobi
A Free service to instantly mobilize your Drupal site
based on our transcoding engine
Focus on
 − Very simple and f...
Demo




       4
Showcases
http://www.osmobi.com/gallery




                5
Focus on Drupal and Joomla!
 http://drupal.org/project/mobile_tools
 http://drupal.org/project/wurfl
 http://www.osmobi.co...
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
Current state
              35 percent less successful completing
              Web site tasks via their mobile phones tha...
Current state
 Web sites designed for PC compatibility will most
 likely render improperly on mobile phones and create
 a ...
Reasons to go mobile
Applications already driving mobile usage



                                                        ...
Reasons to go mobile
  Activities driving mobile usage




Events / conferences        Shopping
                          ...
14
Mobile Web according google
   “We believe the web has won and over the next several
   years, the browser, for economic r...
Some random quotes from the web
 China Internet Users Reach 360 mil, Mobile Internet
 192 mil (8 nov 2009)
 South Africa h...
SOME EXAMPLES


       17
Examples (Drupal)
DrupalCon Paris:
http://drupalcon.siruna.com
Slate:
http://twom.slate.mobixx.eu




                  18
Examples (Drupal)
Garland mobile:
http://twom.garland.mobixx.eu
Marina:
http://twom.marina.mobixx.eu
Zen:
http://twom.zen....
Examples (Drupal)
 Moneywise
 − http://twom.mws.mobixx.eu




                    20
For more examples
 http://www.siruna.com/showcases




                21
WHERE IS THE COMPLEXITY


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




Simple (double) navigation
No video
Easy access to stories     27
Understanding mobile dev
 Different viewpoints to explain / understand
 − Functional point of view:
     • What functional...
WEBSITE VS APPLICATION


       29
Overview
 Platform         Language

 iPhone           Objective C

 Android          Java (Dalvik JVM)

 Windows mobile  ...
http://www.scribd.com/doc/1743125
Complexity / Access to device resource         2/Hitch-Hikers-Guide-Runtime-
power      ...
Browser technology
 Different standards supported
 − xHTML – MP (subset of xHTML) is recommended
 − But full xHTML works f...
Good news
In practise, use your general web skills...
Just keep visuals under control
You will have some new api’s availab...
SOME MORE EXAMPLES


       34
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
  −   Limit usage of fixed fonts
  −   Reduce the usage of t...
Resources
Icons:
 − http://glyphish.com/
 − http://iphonetoolbox.com/category/icons/
 − Many more online
Example designs:
...
Design patterns
 Study examples and design patterns can help
 http://wiki.forum.nokia.com/index.php/Category:Mobile_
 Web_...
Design like you make an app
 Create app like user interfaces (think iPhone)
 Use progressive enhancement
 Javascript mobil...
Some code examples
<ul id="call-numbers">
    <li><a href="wtai://wp/mc;12345678910">Call   number   1</a></li>
    <li><a...
Some code examples
 <ul>
     <li><a   href="">Link   1</a></li>
     <li><a   href="">Link   2</a></li>
     <li><a   hre...
Tab menus
<ul id="navigation">
<li class="active"><a href="" >Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="...
Use Geolocation if you can
   Again, make sure you have a back up if no gps is
   available
   Including geolocation is si...
Examples




       44
Examples




       45
Examples




       46
Examples




       47
Examples




       48
Mobile & Drupal
 Still largely unexplored
 − Demand for mobile is still low
 − No real generic solutions
 Recently a Mobil...
The process
          Collect requirements for a mobile context (workshop)
  Location based         Task and Goal oriented...
Talk some Drupal

MOBILE TOOLS


                   51
Mobile design flow
                        Device Detection
                (Mobile device, desktop, PSP, ...)



        ...
Goal of mobile tools
 Bundle some essential funcitonality to go mobile into one module

 Device detection

 User Notificat...
User notification / redirection
   Device detection
  − Notify mobile users for the existence of a mobile site
  − Automat...
Redirection
  What we recomend:
   − 2 urls: mobile (m.domain.com) and desktop (www.domain.com)
   − Direct mobile user im...
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...
TRANSCODING YOUR SITE


       58
Creating the mobile site
  Create static content specific for mobile

  Create a seperate install for mobile

  Create you...
Automatic
                           Content
 Device      Content      Adaptation
Detection   Adaptation
             Engi...
examples




       61
Content adaptation engine
 Siruna Composer
Previewing   XML based rules
             (http://open.siruna.org/documentation...
Demo
Mobilization of Garland
 − Create a dropdown menu
 − Remove blocks




                   63
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...
Testing
 Firefox with user agent switcher
 Resize firefox to mobile screen sizes
 http://www.testiphone.com/
 SDK’s for di...
Thank you!
 Talk to us if you want to beta-test our new OSMOBI
 service!




                 69
Questions?




       70
Contact
Meet us for a free beer!

Mail : Tom.Deryckere@siruna.com
Blog: http://www.mobiledrupal.com
Twitter: http://twitte...
Upcoming SlideShare
Loading in...5
×

Drupalcamp New York 2009

2,052

Published on

These are the slides that I eventually did not use during the Drupalcamp NY talk. However this is a great reference

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,052
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Drupalcamp New York 2009

  1. 1. Basics of making mobile websites (with Drupal) Drupalcamp New York 5 dec 2009 Tom Deryckere Software Architect / Siruna @twom
  2. 2. 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 and Joomla! Mobile partner of several web agencies 2
  3. 3. 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 Osmobi has a GUI to change the look ‘n feel of your site 3
  4. 4. Demo 4
  5. 5. Showcases http://www.osmobi.com/gallery 5
  6. 6. Focus on Drupal and Joomla! http://drupal.org/project/mobile_tools http://drupal.org/project/wurfl http://www.osmobi.com Why Drupal? − Open Source − Big, well organized community − Emerging − No mobile 6
  7. 7. Technology Trends 25 years ago :The first GSM:11 kg Today: iPhoney’s, HSDPA, MID’s
  8. 8. Technology that works From WAP to iMode to xHTML
  9. 9. Network side TECHNOLOGY From slow connections to fast connections
  10. 10. 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,” 10
  11. 11. 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 11
  12. 12. Reasons to go mobile Applications already driving mobile usage .... Drive traffic on mobile phones to websites Find relevant content Advertisment ??? Fast download Intuitive .... 12
  13. 13. Reasons to go mobile Activities driving mobile usage Events / conferences Shopping Vacation / travelling Commuting Toilet 13
  14. 14. 14
  15. 15. 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/ 15
  16. 16. Some random quotes from the web China Internet Users Reach 360 mil, Mobile Internet 192 mil (8 nov 2009) South Africa has close to 9.5 million mobile internet users compared to the estimated 5 million desktop users. (25 nov 2009) 1 Billion Mobile Internet Users By 2010 (nov 2009) More mobile Internet than fixed by 2011 (2 nov 2009) …. 16
  17. 17. SOME EXAMPLES 17
  18. 18. Examples (Drupal) DrupalCon Paris: http://drupalcon.siruna.com Slate: http://twom.slate.mobixx.eu 18
  19. 19. 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 19
  20. 20. Examples (Drupal) Moneywise − http://twom.mws.mobixx.eu 20
  21. 21. For more examples http://www.siruna.com/showcases 21
  22. 22. WHERE IS THE COMPLEXITY 22
  23. 23. 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? 23
  24. 24. 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) 24
  25. 25. On fragmentation Convergence is coming Javascript becomes more and more available Desktop html works on mobile devices 25
  26. 26. 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 26 Source: AdMob
  27. 27. Complexity Simple (double) navigation No video Easy access to stories 27
  28. 28. Understanding mobile dev Different viewpoints to explain / understand − Functional point of view: • What functionality will I present on the mobile device? • How can I make optimal usage of the mobile context? • What will the user do or need? − From a developer point of view: • What are the possibilities ? • How can my backend adapt? • What device resources are available? • How to handle device detection, redirection, theme switching • How can I manage image resizing − (interaction) Designer • what are good interaction paradigms? • How to maintain a consistent feeling over different devices? Answers to these questions are more natural for desktop sites 28
  29. 29. WEBSITE VS APPLICATION 29
  30. 30. 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 30
  31. 31. 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 31 Range
  32. 32. 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 32
  33. 33. 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) 33
  34. 34. SOME MORE EXAMPLES 34
  35. 35. 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 35 New Comments Sponsors etc ...
  36. 36. 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 36
  37. 37. Resources Icons: − http://glyphish.com/ − http://iphonetoolbox.com/category/icons/ − Many more online Example designs: − http://patterns.design4mobile.com/ − http://www.cssiphone.com/ 37
  38. 38. Design patterns Study examples and design patterns can help http://wiki.forum.nokia.com/index.php/Category:Mobile_ Web_Design_Patterns − Vertical list, Horizontal list, Tabbed List, Grid http://developer.apple.com/safari/library/documentation/I nternetWeb/Conceptual/iPhoneWebAppHIG/iPhoneUser Environment/iPhoneUserEnvironment.html#//apple_ref/d oc/uid/TP40007900-CH3-SW1 − iPhone design patterns 38
  39. 39. Design like you make an app Create app like user interfaces (think iPhone) Use progressive enhancement Javascript mobile libs: − IUI − jQTouch − XUI New, largely unexplored domain 39
  40. 40. Some code examples <ul id="call-numbers"> <li><a href="wtai://wp/mc;12345678910">Call number 1</a></li> <li><a href="wtai://wp/mc;12345678910">Call number 2</a></li> <li><a href="wtai://wp/mc;12345678910">Call number 2</a></li> <li><a href="wtai://wp/mc;12345678910">Call number 2</a></li> <li><a href="wtai://wp/mc;12345678910">Call number 2</a></li> </ul> 40
  41. 41. Some code examples <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 2</a></li> </ul> 41
  42. 42. Tab menus <ul id="navigation"> <li class="active"><a href="" >Menu 1</a></li> <li><a href="">Menu 2</a></li> <li><a href="">Menu 3</a></li> </ul> 42
  43. 43. Use Geolocation if you can Again, make sure you have a back up if no gps is available Including geolocation is simple: − http://code.google.com/p/geo-location-javascript/ //determine if the handset has client side geo location capabilities if(geo_position_js.init()){ geo_position_js.getCurrentPosition(success_callback,error_callback); } else{ alert("Functionality not available"); } 43
  44. 44. Examples 44
  45. 45. Examples 45
  46. 46. Examples 46
  47. 47. Examples 47
  48. 48. Examples 48
  49. 49. Mobile & Drupal Still largely unexplored − Demand for mobile is still low − No real generic solutions Recently a Mobile category was introduced − http://drupal.org/taxonomy/term/7404 (14 modules) 49
  50. 50. The process Collect requirements for a mobile context (workshop) Location based Task and Goal oriented Targetted devices Create mobile strategy Choose appropriate technologies Transcoding Browser based Native application Rest services Prepare sitemaps and wireframes Get early feedback Information architecture Base technology implementations Setup transcoding Backend services Content management Interaction + Look and Feel Progerssive enhancement Device based Mobile interaction paradigms Testing + collecting user feedback Iterate 50
  51. 51. Talk some Drupal MOBILE TOOLS 51
  52. 52. 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) 52
  53. 53. 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 .... 53
  54. 54. 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 54
  55. 55. 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 55
  56. 56. 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! 56
  57. 57. Theme switching Theme switching (based on device group if needed) Based on domain name or device detection Switching per device group (Android, iPhone, etc ...) 57
  58. 58. TRANSCODING YOUR SITE 58
  59. 59. Creating the mobile site Create static content specific for mobile Create a seperate install for mobile Create you own themes and keep drupal install Use an adaptation service − Partly automation − Build in functionality to help creating different versions for different devices − Real multiplatform distribution − Fast prototyping − High Quality
  60. 60. Automatic Content Device Content Adaptation Detection Adaptation Engine Select Content Menu Fetcher Select mobile content Adapt Style 60
  61. 61. examples 61
  62. 62. Content adaptation engine Siruna Composer Previewing XML based rules (http://open.siruna.org/documentation/sitemap-api) 62
  63. 63. Demo Mobilization of Garland − Create a dropdown menu − Remove blocks 63
  64. 64. 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
  65. 65. 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> 65
  66. 66. 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> 66
  67. 67. 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> 67
  68. 68. Testing Firefox with user agent switcher Resize firefox to mobile screen sizes http://www.testiphone.com/ SDK’s for different platforms (Android, Blackberry, Palm, etc ...) Real devices!!! 68
  69. 69. Thank you! Talk to us if you want to beta-test our new OSMOBI service! 69
  70. 70. Questions? 70
  71. 71. Contact Meet us for a free beer! Mail : Tom.Deryckere@siruna.com Blog: http://www.mobiledrupal.com Twitter: http://twitter.com/twom Siruna: http://www.siruna.com, http://open.siruna.com Osmobi: http://www.osmobi.com 71
  1. A particular slide catching your eye?

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

×