Conférence de Gaëtan Petit @ DrupalCamp Paris 2013 : "Sites mobiles avec Drupal"

1. Gaëtan Petit
Chef de projet Technique - Actency
@gaetan_petit @Actency
Sites mobiles avec Drupal

2. Le Web Mobile
Petits rappels pour enfoncer le clou

3. Web Mobile

4. Web Mobile

5. Web Mobile

6. Quelques chiffres
– 40.7M d’internautes en France
– 22.3M de mobinautes
– 4.3M d’utilisateurs de tablettes
Web Mobile

7. Quelques chiffres
– 46.6% de Français sont équipés d’un smartphone
en septembre 2012
– Aux USA le nombre de smartphones dépasse celui
du nombre de desktop
Web Mobile

8. 1.8 millions d’acheteur sur mobile
– +50% en 1 ans
– +108% en 2 ans
– 32% ont cherché des infos sur un produit en
magasin (importance des bonnes pratiques)
Web Mobile

9. Conclusion
– Les usages mobiles sont désormais
incontournables
– Confrontation à de nouvelles problématiques
Web Mobile

10. Sites Mobiles avec Drupal
Le grand classique

11. Site Mobile
Principe
– Mettre à disposition une/des versions spécifiques aux
utilisateurs mobiles.

12. Stratégie
– Définir et détecter un/des contextes mobiles
– Servir un thème spécifique à l’utilisateur
Site Mobile

13. Modules
– Theme switcher :
• détection par l’URL, le navigateur.
– Mobile Tools :
• Détection avec la plus part des techniques connues.
• Intégration dans divers modules contrib
incontournables tel que : Context, Panels, ThemeKey,
Spaces, Features, …
Site Mobile

14. JQuery Mobile
– Très facile à mettre en place
– Compatible
– Difficile à customiser
Site Mobile

15. Quand utiliser cette approche?
– Dans le cas d’un site existant, probablement pour
une raison de coûts.
– Structure de l’information radicalement différente
entre desktop et mobile.
Site Mobile

16. Quand utiliser cette approche?
Avantages :
– Facilité de la mise en place
– Optimisation du design et des médias
Problèmes :
– SEO
– Perte de contenus ou de fonctions
Site Mobile

17. Quand utiliser cette approche?
Avantages :
– Facilité de la mise en place
– Optimisation du design et des médias
Problèmes :
– SEO
– Perte de contenus ou de fonctions
Site Mobile

18. Responsive Design avec Drupal
Celui dont tout le monde parle

19. Responsive Design

20. Responsive Design

21. Mobile First
– Conception avant tout centrée sur les contenus
– Prise en considération des performances
– Wireframe par déclinaisons
Responsive Design

22. Media Queries?
– Proposition soumise en 1994(!)
– Proposition d’intégration a CSS1 en 1997
– Draft W3C en 2001
– Recommandation W3C en 2012
Responsive Design

23. Media Queries?
– Fonctionnalité permettant d’adapter la mise en
forme d’un site à partir des dimensions de l’écran
du terminal.
Responsive Design

24. Media Queries?
– Exemple de ciblage:
• @media screen and (max-width: 640px)
• @media screen and (min-width: 200px) and (max-
width: 640px)
Responsive Design

25. Responsive Design

26. Oui mais pour Drupal?
– Thèmes
Ou n’importe quel autre thème responsive (en fait)
Responsive Design

27. Oui mais pour Drupal?
– Thèmes
• Utilisation d’une grille
Responsive Design

28. Oui mais pour Drupal?
– Thèmes
• Définition des breakpoint
Responsive Design

29. Oui mais pour Drupal?
– Thèmes
• Définition de différents layout
Responsive Design

30. Oui mais pour Drupal?
– Thèmes
• Adaptation de certains éléments comme les menus ou
les champs de login / recherche …
• Mise a disposition d’outils comme SASS / LESS, Polyfills
pour c rtains navigateurs, …
Responsive Design

31. Oui mais pour Drupal?
– Modules
• Media :
– Responsive Images : Picture, Adaptive Image, …
– Responsive videos : FitVids
• Table :
– Responsive tables
• Panels :
– possible via certains thème
Responsive Design

32. Avantages
– SEO
– Economie de maintenance
– Capitalisation sur la progression d’internet mobile
– Adaptable à de futurs périphériques
Responsive Design

33. Problèmes
–Valorisation de certains contenus
–Gestions des médias
–Performances
–Publicités
Responsive Design

34. Applications natives avec Drupal
On allait presque les oublier!

35. Principes
– L’utilisateur télécharge une application
sur le store
– les contenus sont transmis par Drupal
Responsive Design

36. Services 3.X
– Permet la création de webservices
– Différents formats de sortie
– Possibilité d’authentification
App Natives

37. App Natives
<?xml version="1.0" encoding="utf-8"?>
<node>
<nid>3</nid>
<vid>3</vid>
<type>article</type>
<title>asdfdsf</title>
<language>und</language>
<url>https://example.com/node/3</url>
<edit_url>https://example.com/node/3/edit</edit_url>
<status>1</status>
<promote>1</promote>
<sticky>0</sticky>
<created>1294913241</created>
<changed>1296405309</changed>
<author resource="user" id="1">https://example.com/user/1</author>
XML:

38. App Natives
{
"nid":"3",
"vid":"3",
"type":"article",
"title":"asdfdsf",
"language":"und",
"url":"https://example.com/node/3",
"edit_url":"https://example.com/node/3/edit",
"status":"1",
"promote":"1",
"sticky":"0",
"created":"1294913241",
"changed":"1296405309",
"author":{
"uri":"https://example.com/user/1", …
Json :

39. Quand utiliser cette approche?
Problème: Il arrive encore régulièrement qu’un
internaute suive une URL et se voit proposer
l’appli mobile dont il se contrefout.
App Natives

40. Quand utiliser cette approche?
App Natives

41. Quand utiliser cette approche?
App Natives
http://idontwantyourfuckingapp.tumblr.com/

42. Quand utiliser cette approche?
• Fonctionnalités pas disponibles dans le navigateur
(caméra, accéléromètre, offline)
• Ou alors pour un produit différent
(appli événementiel, expérience interactive, jeux, etc.)
App Natives

43. Conclusion
On résume?

44. Conclusion
facilité seo maintenance
Site mobile
Responsive
Toujours des doutes ou besoin de conseils? : http://drupal.org/documentation/mobile

45. Conclusion
Drupal 8

46. Conclusion
Drupal 8
• Core : Breakpoint, Responsive Image, Tableaux
• Intégration de backbone.js => Webapp
• Et tout pleins d’optimisation (css, js, …)
Consulter : http://groups.drupal.org/mobile/drupal-8
Revoir la présentation de Théodore Biadala sur la Mobile Initiative

47. Conclusion
Responsive design – Présent futur
– Technique relativement mature
– Evolutions à venir :
• Images
• Vidéos
• Support « rétina »
• Typographie
• Form
• Tableaux
• Navigation
• Grid

48. Conclusion
Lire :
Responsive Webdesign – présent et
futur de l’adaptation mobile par
Stéphanie Walter
http://www.readability.com/articles/x
nyv4hn3

49. MERCI DE VOTRE ATTENTION
En savoir plus,
Visitez notre site, téléchargez nos supports
www.actency.fr
www.twitter.com/actency
www.facebook.com/actency
Notre book de références
www.actency.fr/book
Notre Factsheet Drupal
www.actency.fr/drupal
@gaetan_petit