Your SlideShare is downloading. ×
0
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Mobile, Responsive & Multi-Device with Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile, Responsive & Multi-Device with Drupal

4,672

Published on

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

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.

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,672
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 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

    ×