Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile, Responsive & Multi-Device with Drupal

Session given during Drupal Dev Days in Barcelona 16th of June.

Mobile, Responsive Design, Native Appss with Drupal.

JQuery Mobile, Mobile Tools, UA Switch, Responsive Design, and many other stuff on how create mobile and multi-device oriented apps with Drupal.

  • Be the first to comment

Mobile, Responsive & Multi-Device with Drupal

  1. Mobile & Multi-device withby @mtopolov CTO of @adyax & @padcms
  2. 100 Drupal Experts, 45 big Drupal projects in 2011
  3. You said mobile ?
  4. Mobile Web what’s that ?Multiple devicesTouch interfacesReal life usage contextPoor quality internet / offline mode
  5. Multi-device ?
  6. Multiple devices + Numerous ratios (4:3, 16:9, 16:10, 3:4, 1:1...) + Many screen resolutions (240x240 -> 2048x1536) = Importance to adapt the content to the device
  7. Touch-me !?
  8. Touch Interfaces Fingers are larger and clumsier than a mouse But scrolling is easier So : Bigger content disposed vertically Need of a visual feedback (we do not have ‘clicks’)
  9. Real-life usage
  10. in theory
  11. but in practice we have this
  12. this
  13. this
  14. or even this
  15. Real life context Speed and Relevance (remove the useless) The most important first (re-organise your content) Use location (if relevant)
  16. Poor Internet
  17. Low band internet / Offline You content should be available even if the connection is lost Your content must be as light-weight as possible And, of course, your server should respond as quickly as possible
  18. Why the fuck mobile is soimportant ?6 000 000 000 000 000 000 bytes / month
  19. Mobile traffic growth by 2016 mobile traffic will be multiplied by 30 In Africa & Asia, mobile web is already 50% of the whole Internet 200 millions tablets right now in the world
  20. Why the hell it does 3% onmy web-site ? Chicken/Egg problem : maybe people do not come back because your site is NOT mobile-friendly. Mobile SEO is not just Google... (App stores, twitter, facebook, are much more important in mobile) Your content is not relevant in a mobile context
  21. Solutions
  22. Drupal Mobile Solutions Responsive Design Mobile theme (mobile context) Native Apps (PhoneGap, Titanium, or DYI) A word about local web.
  23. What for whom ? Responsive Mobile Theme Native Apps eCommerce YES Media NO YES YESSocial Networks NO YES Brands YES NO Databases YES NO NGO / Gov YES NO
  24. Responsive Design(or how to hook a nerd girl)
  25. Supa-mega-trendy-stuff, yeah ?
  26. Responsive designExtremely cool during a client demo («wooaaa» effect)A real pain the A** during HTML Slicing (2 times longerto make it work)Need a real functional and UX approachBig + : there are no more dev. impacts once HTML isdone.
  27. Responsive Drupal ?Omega, a good grid / responsive starter theme (D7only)Globally responsive has no impact on Drupal itself(Panels?)Think to create different ImageCache presets for eachdevice class (usually 3 are ok)
  28. Some stupid examples<link href="/css/screen.css" type="text/css" rel="stylesheet"media="all" /><link rel="stylesheet" media="only screen and (max-width:1020px)" href="/css/screen_800.css" type="text/css" /><link rel="stylesheet" media="only screen and (max-width:600px)" href="/css/screen_320.css" type="text/css" />
  29. With some JS $(document).ready(function(){ if( screen.width < 750 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ){ $(body).addClass(this-is-mobile); };
  30. Well some examples
  31. Well some examples
  32. Well some examples
  33. Well some examples
  34. Well some examples
  35. Well some examples
  36. Mobile theme(or more like a mobile context)
  37. Mobile themeWhen to switch to mobile context ?We do not switch theme, but context : Views, Panels,and our custom modules are impactedTo go faster, use JQuery mobile, if client agrees.
  38. When to switch ?As soon as possible (LB, Proxy).Do NOT do it in Drupal (Browscap, Wurfl...) Load Cache / HTTP Drupal Balancer Proxy
  39. Varnish (1/2)Cookie ? UA Custom Error Redirectif (!req.http.Cookie ~ "mdevice=desktop") { set req.http.X-Device = "pc"; if (req.http.User-Agent ~ "iP(hone|od)" || req.http.User-Agent ~ "Android" ||req.http.User-Agent ~ "Symbian" || req.http.User-Agent ~ "BlackBerry" || req.http.User-Agent ~ "^SonyEricsson" || req.http.User-Agent ~ "^Nokia" || req.http.User-Agent ~"^SAMSUNG" || req.http.User-Agent ~ "^LG" || req.http.User-Agent ~ " webOS") { set req.http.X-Device = "mobile"; }
  40. Varnish (2/2)Cookie ? UA Custom Error Redirectif(req.http.X-Device == "mobile") { if(req.http.host !~ "m.erol.adyax.com:6081") { error 751 "m.erol.adyax.com:6081"; } }sub vcl_error { if (obj.status == 751) { if (obj.response ~ "m.erol.adyax.com:6081") { set obj.http.Location = "http://m.erol.adyax.com:6081" req.url; set obj.http.Vary = "Cookie"; set obj.http.Cache-Control = "private"; set obj.http.Expires = "Sat, 21 Aug 2022 06:00:00 GMT"; } set obj.status = 302; return(deliver); } }
  41. Core ideas of mobile context Theme Custom / JQuery Mobile (Theme) ImageCache, Panels (Layout) Mobile Tools / Domains (mobile.yoursite.com) VARNISH (Redirection HTTP 302)
  42. jQuery Mobile jQuery Mobile: «Touch-Optimized Web Framework for Smartphones & Tablets » You can easily customize (colors) Looks like iPhone sh**http://jquerymobile.com/
  43. JQM Pros & Cons Pros Cons You client have to accept Fast to setup (2-3 jours) JQM design Items look like native Hard to hack if you want elements to go deeper Avoids you to think about Avoids you to think about mobile mobile
  44. Some live examples
  45. Some live examples
  46. Some live examples
  47. Some live examples
  48. Some live examples
  49. Native Apps
  50. Basic principles Your app must get some content from Drupal Offline mode should work Content may be updated at any time on back-end side.
  51. Services 3.X Give access to nodes, files, taxonomies, users, views Some basic security stuff (API Key) Server API offers your to code your own protocols (if you really like it...)
  52. Usual problemsLeak of structure (thanks to CCK)SOAP is not standard and totally crappyNo WSDLProblems with NodeRefs, Medias, Composed fields
  53. <?xml version=1.0 ?><methodCall> <methodName>node.create</methodName> <params> <param> <value> <struct> <member> <name>type</name> <value> <string>story</string> </value> node.create </member> <member> <name>body</name> <value> <string>Create body input</string> </value> </member> <member> <name>title</name> <value> <string>Test title</string> </value> </member> </struct> </value> </param> </params></methodCall>
  54. SOAP 399 bytes<?xml version=1.0 encoding=UTF-8?><s:Envelope xmlns:s="http://www.w3.org/2001/06/soap-envelope" xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance" xmlns:xsd="http://www.w3.org/1999/XMLSchema"> <s:Body> <x:FlickrRequest xmlns:x="urn:flickr"> <method>flickr.echo</method> <name>value</name> </x:FlickrRequest> </s:Body></s:Envelope>
  55. XML-RPC 99 bytes<?xml version="1.0"?><methodCall> <methodName>flickr.echo</methodName> <params/></methodCall>
  56. JSON 68 bytes{ "method" : "flickr.echo", "params" : null, "id" : 1}
  57. B-PLIST 52 bytes 6270 6c69 7374 3030 d101 0256 6d65 7468 6f64 5b66 6c69 636b 722e 6563 686f 080b 1200 0000 0000 0001 0100 0000 0000 0000 0300 0000 0000 0000 0000 0000 0000 0000 1e
  58. ...but, you can do HTMLThe whole application is just a big WebUI wrapper withJS events handlersDrupal side we generate static HTML with BoostSync using SVN (http://pecl.php.net/package/svn/1.0.0)
  59. Dangers of that methodUsually current devices WebUI support is slow => wehad to pre-generate all HTML in PNG with clickablezonesURLs rewriting (local navigation)Videos integrations (parsing of <object>)
  60. SG : Drupal web site + Mobile theme + iPad App
  61. SG : Drupal web site + Mobile theme + iPad App
  62. SG : Drupal web site + Mobile theme + iPad App
  63. SG : Drupal web site + Mobile theme + iPad App
  64. Some usefull mobile moduleshttp://drupal.org/project/mobile_toolshttp://drupal.org/project/domainhttp://drupal.org/project/browscaphttp://drupal.org/project/omegahttp://drupal.org/project/views_jqm
  65. A word about local
  66. What is Local btw ?Everything !Geocoded contentGeocoded users / vistorsGeographical SearchAnd no, putting a Google Map does NOT mean Local
  67. Content geocodingWell, Location module is really nice, useful for 90%.Manages POI onlyGeo (buggy) but manages Polygons & LinesGeoField to store your POI coordinates
  68. Display Geo DataGMap module : simpliest integrationOpen Layers module : really nice maps effect.KLM & Clusterer to display high amount of markers
  69. Geographical search HTML5 to ask for visitor localisation MySQL is not suitable* Apache SOLR 3.4 or 4 have a Spatial Search (distance & boxing) reaaaaally cool. MongoDB is an alternative (with it’s GeoSpatial Indexing)* SELECT id_geo FROM mybase.mytable AS p WHERE 6371 * 2 * ATAN2 ( SQRT ( ( SIN( ( RADIANS(p.lat - 43.27292469899955000) / 2 ) * SIN( RADIANS(p.lat -43.27292469899955000) / 2 ) + COS ( RADIANS (43.27292469899955000 )) * COS ( RADIANS ( p.lat ) ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) * SIN( RADIANS(p.lon - 5.36235809326171900) / 2 ) ) ) , SQRT ( 1 - (SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) * SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) +COS ( RADIANS (43.27292469899955000) ) * COS ( RADIANS (p.lat) ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) * SIN ( RADIANS(p.lon -5.36235809326171900) / 2 ) ) ) ) < 1
  70. We just launched the first OPEN SOURCEtool to create your interactive magazines on tablets (iPad & Android) DEV.PADCMS.NET http://padcms.com @PadCMS
  71. Have a question ? Just ask ! Gracias !@adyax, @mtopolov

    Be the first to comment

    Login to see the comments

  • alainfourgon

    Jun. 18, 2012
  • kitseeborg

    Jun. 23, 2012
  • TakeshiWatanabe2

    Jun. 23, 2012
  • ciprianmelian7

    Dec. 28, 2012
  • juliacouture

    Mar. 18, 2013
  • leloutre

    Oct. 22, 2013
  • Noirdes

    Oct. 22, 2013
  • chris.schmechel

    Jan. 21, 2014

Session given during Drupal Dev Days in Barcelona 16th of June. Mobile, Responsive Design, Native Appss with Drupal. JQuery Mobile, Mobile Tools, UA Switch, Responsive Design, and many other stuff on how create mobile and multi-device oriented apps with Drupal.

Views

Total views

23,518

On Slideshare

0

From embeds

0

Number of embeds

317

Actions

Downloads

47

Shares

0

Comments

0

Likes

8

×