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.

1. Mobile & Multi-device with
by @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 devices
Touch interfaces
Real life usage context
Poor 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 so
important ?
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% on
my 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 YES
Social 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 design
Extremely cool during a client demo («wooaaa» effect)
A real pain the A** during HTML Slicing (2 times longer
to make it work)
Need a real functional and UX approach
Big + : there are no more dev. impacts once HTML is
done.

27. Responsive Drupal ?
Omega, a good grid / responsive starter theme (D7
only)
Globally responsive has no impact on Drupal itself
(Panels?)
Think to create different ImageCache presets for each
device 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 theme
When to switch to mobile context ?
We do not switch theme, but context : Views, Panels,
and our custom modules are impacted
To 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 Redirect
if (!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 Redirect
if(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 problems
Leak of structure (thanks to CCK)
SOAP is not standard and totally crappy
No WSDL
Problems 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 HTML
The whole application is just a big WebUI wrapper with
JS events handlers
Drupal side we generate static HTML with Boost
Sync using SVN (http://pecl.php.net/package/svn/
1.0.0)

59. Dangers of that method
Usually current devices WebUI support is slow => we
had to pre-generate all HTML in PNG with clickable
zones
URLs 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 modules
http://drupal.org/project/mobile_tools
http://drupal.org/project/domain
http://drupal.org/project/browscap
http://drupal.org/project/omega
http://drupal.org/project/views_jqm

65. A word about local

66. What is Local btw ?
Everything !
Geocoded content
Geocoded users / vistors
Geographical Search
And no, putting a Google Map does NOT mean Local

67. Content geocoding
Well, Location module is really nice, useful for 90%.
Manages POI only
Geo (buggy) but manages Polygons & Lines
GeoField to store your POI coordinates

68. Display Geo Data
GMap module : simpliest integration
Open 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 SOURCE
tool 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