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.
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’)
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
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
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');
};
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
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
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
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
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