Gaëtan PetitChef de projet Technique - Actency@gaetan_petit @ActencySites mobiles avec Drupal
Le Web MobilePetits rappels pour enfoncer le clou
Web Mobile
Web Mobile
Web Mobile
Quelques chiffres– 40.7M d’internautes en France– 22.3M de mobinautes– 4.3M d’utilisateurs de tablettesWeb Mobile
Quelques chiffres– 46.6% de Français sont équipés d’un smartphoneen septembre 2012– Aux USA le nombre de smartphones dépas...
1.8 millions d’acheteur sur mobile– +50% en 1 ans– +108% en 2 ans– 32% ont cherché des infos sur un produit enmagasin (imp...
Conclusion– Les usages mobiles sont désormaisincontournables– Confrontation à de nouvelles problématiquesWeb Mobile
Sites Mobiles avec DrupalLe grand classique
Site MobilePrincipe– Mettre à disposition une/des versions spécifiques auxutilisateurs mobiles.
Stratégie– Définir et détecter un/des contextes mobiles– Servir un thème spécifique à l’utilisateurSite Mobile
Modules– Theme switcher :• détection par l’URL, le navigateur.– Mobile Tools :• Détection avec la plus part des techniques...
JQuery Mobile– Très facile à mettre en place– Compatible– Difficile à customiserSite Mobile
Quand utiliser cette approche?– Dans le cas d’un site existant, probablement pourune raison de coûts.– Structure de l’info...
Quand utiliser cette approche?Avantages :– Facilité de la mise en place– Optimisation du design et des médiasProblèmes :– ...
Quand utiliser cette approche?Avantages :– Facilité de la mise en place– Optimisation du design et des médiasProblèmes :– ...
Responsive Design avec DrupalCelui dont tout le monde parle
Responsive Design
Responsive Design
Mobile First– Conception avant tout centrée sur les contenus– Prise en considération des performances– Wireframe par décli...
Media Queries?– Proposition soumise en 1994(!)– Proposition d’intégration a CSS1 en 1997– Draft W3C en 2001– Recommandatio...
Media Queries?– Fonctionnalité permettant d’adapter la mise enforme d’un site à partir des dimensions de l’écrandu termina...
Media Queries?– Exemple de ciblage:• @media screen and (max-width: 640px)• @media screen and (min-width: 200px) and (max-w...
Responsive Design
Oui mais pour Drupal?– ThèmesOu n’importe quel autre thème responsive (en fait)Responsive Design
Oui mais pour Drupal?– Thèmes• Utilisation d’une grilleResponsive Design
Oui mais pour Drupal?– Thèmes• Définition des breakpointResponsive Design
Oui mais pour Drupal?– Thèmes• Définition de différents layoutResponsive Design
Oui mais pour Drupal?– Thèmes• Adaptation de certains éléments comme les menus oules champs de login / recherche …• Mise a...
Oui mais pour Drupal?– Modules• Media :– Responsive Images : Picture, Adaptive Image, …– Responsive videos : FitVids• Tabl...
Avantages– SEO– Economie de maintenance– Capitalisation sur la progression d’internet mobile– Adaptable à de futurs périph...
Problèmes–Valorisation de certains contenus–Gestions des médias–Performances–PublicitésResponsive Design
Applications natives avec DrupalOn allait presque les oublier!
Principes– L’utilisateur télécharge une applicationsur le store– les contenus sont transmis par DrupalResponsive Design
Services 3.X– Permet la création de webservices– Différents formats de sortie– Possibilité d’authentificationApp Natives
App Natives<?xml version="1.0" encoding="utf-8"?><node><nid>3</nid><vid>3</vid><type>article</type><title>asdfdsf</title><...
App Natives{"nid":"3","vid":"3","type":"article","title":"asdfdsf","language":"und","url":"https://example.com/node/3","ed...
Quand utiliser cette approche?Problème: Il arrive encore régulièrement qu’uninternaute suive une URL et se voit proposerl’...
Quand utiliser cette approche?App Natives
Quand utiliser cette approche?App Nativeshttp://idontwantyourfuckingapp.tumblr.com/
Quand utiliser cette approche?• Fonctionnalités pas disponibles dans le navigateur(caméra, accéléromètre, offline)• Ou alo...
ConclusionOn résume?
Conclusionfacilité seo maintenanceSite mobileResponsiveToujours des doutes ou besoin de conseils? : http://drupal.org/docu...
ConclusionDrupal 8
ConclusionDrupal 8• Core : Breakpoint, Responsive Image, Tableaux• Intégration de backbone.js => Webapp• Et tout pleins d’...
ConclusionResponsive design – Présent futur– Technique relativement mature– Evolutions à venir :• Images• Vidéos• Support ...
ConclusionLire :Responsive Webdesign – présent etfutur de l’adaptation mobile parStéphanie Walterhttp://www.readability.co...
MERCI DE VOTRE ATTENTIONEn savoir plus,Visitez notre site, téléchargez nos supportswww.actency.frwww.twitter.com/actencyww...
Upcoming SlideShare
Loading in...5
×

DrupalCamp Paris 2013 : Sites mobiles avec Drupal

1,121

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,121
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "DrupalCamp Paris 2013 : Sites mobiles avec Drupal"

  1. 1. Gaëtan PetitChef de projet Technique - Actency@gaetan_petit @ActencySites mobiles avec Drupal
  2. 2. Le Web MobilePetits rappels pour enfoncer le clou
  3. 3. Web Mobile
  4. 4. Web Mobile
  5. 5. Web Mobile
  6. 6. Quelques chiffres– 40.7M d’internautes en France– 22.3M de mobinautes– 4.3M d’utilisateurs de tablettesWeb Mobile
  7. 7. Quelques chiffres– 46.6% de Français sont équipés d’un smartphoneen septembre 2012– Aux USA le nombre de smartphones dépasse celuidu nombre de desktopWeb Mobile
  8. 8. 1.8 millions d’acheteur sur mobile– +50% en 1 ans– +108% en 2 ans– 32% ont cherché des infos sur un produit enmagasin (importance des bonnes pratiques)Web Mobile
  9. 9. Conclusion– Les usages mobiles sont désormaisincontournables– Confrontation à de nouvelles problématiquesWeb Mobile
  10. 10. Sites Mobiles avec DrupalLe grand classique
  11. 11. Site MobilePrincipe– Mettre à disposition une/des versions spécifiques auxutilisateurs mobiles.
  12. 12. Stratégie– Définir et détecter un/des contextes mobiles– Servir un thème spécifique à l’utilisateurSite Mobile
  13. 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 contribincontournables tel que : Context, Panels, ThemeKey,Spaces, Features, …Site Mobile
  14. 14. JQuery Mobile– Très facile à mettre en place– Compatible– Difficile à customiserSite Mobile
  15. 15. Quand utiliser cette approche?– Dans le cas d’un site existant, probablement pourune raison de coûts.– Structure de l’information radicalement différenteentre desktop et mobile.Site Mobile
  16. 16. Quand utiliser cette approche?Avantages :– Facilité de la mise en place– Optimisation du design et des médiasProblèmes :– SEO– Perte de contenus ou de fonctionsSite Mobile
  17. 17. Quand utiliser cette approche?Avantages :– Facilité de la mise en place– Optimisation du design et des médiasProblèmes :– SEO– Perte de contenus ou de fonctionsSite Mobile
  18. 18. Responsive Design avec DrupalCelui dont tout le monde parle
  19. 19. Responsive Design
  20. 20. Responsive Design
  21. 21. Mobile First– Conception avant tout centrée sur les contenus– Prise en considération des performances– Wireframe par déclinaisonsResponsive Design
  22. 22. Media Queries?– Proposition soumise en 1994(!)– Proposition d’intégration a CSS1 en 1997– Draft W3C en 2001– Recommandation W3C en 2012Responsive Design
  23. 23. Media Queries?– Fonctionnalité permettant d’adapter la mise enforme d’un site à partir des dimensions de l’écrandu terminal.Responsive Design
  24. 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. 25. Responsive Design
  26. 26. Oui mais pour Drupal?– ThèmesOu n’importe quel autre thème responsive (en fait)Responsive Design
  27. 27. Oui mais pour Drupal?– Thèmes• Utilisation d’une grilleResponsive Design
  28. 28. Oui mais pour Drupal?– Thèmes• Définition des breakpointResponsive Design
  29. 29. Oui mais pour Drupal?– Thèmes• Définition de différents layoutResponsive Design
  30. 30. Oui mais pour Drupal?– Thèmes• Adaptation de certains éléments comme les menus oules champs de login / recherche …• Mise a disposition d’outils comme SASS / LESS, Polyfillspour c rtains navigateurs, …Responsive Design
  31. 31. Oui mais pour Drupal?– Modules• Media :– Responsive Images : Picture, Adaptive Image, …– Responsive videos : FitVids• Table :– Responsive tables• Panels :– possible via certains thèmeResponsive Design
  32. 32. Avantages– SEO– Economie de maintenance– Capitalisation sur la progression d’internet mobile– Adaptable à de futurs périphériquesResponsive Design
  33. 33. Problèmes–Valorisation de certains contenus–Gestions des médias–Performances–PublicitésResponsive Design
  34. 34. Applications natives avec DrupalOn allait presque les oublier!
  35. 35. Principes– L’utilisateur télécharge une applicationsur le store– les contenus sont transmis par DrupalResponsive Design
  36. 36. Services 3.X– Permet la création de webservices– Différents formats de sortie– Possibilité d’authentificationApp Natives
  37. 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. 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. 39. Quand utiliser cette approche?Problème: Il arrive encore régulièrement qu’uninternaute suive une URL et se voit proposerl’appli mobile dont il se contrefout.App Natives
  40. 40. Quand utiliser cette approche?App Natives
  41. 41. Quand utiliser cette approche?App Nativeshttp://idontwantyourfuckingapp.tumblr.com/
  42. 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. 43. ConclusionOn résume?
  44. 44. Conclusionfacilité seo maintenanceSite mobileResponsiveToujours des doutes ou besoin de conseils? : http://drupal.org/documentation/mobile
  45. 45. ConclusionDrupal 8
  46. 46. ConclusionDrupal 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-8Revoir la présentation de Théodore Biadala sur la Mobile Initiative
  47. 47. ConclusionResponsive design – Présent futur– Technique relativement mature– Evolutions à venir :• Images• Vidéos• Support « rétina »• Typographie• Form• Tableaux• Navigation• Grid
  48. 48. ConclusionLire :Responsive Webdesign – présent etfutur de l’adaptation mobile parStéphanie Walterhttp://www.readability.com/articles/xnyv4hn3
  49. 49. MERCI DE VOTRE ATTENTIONEn savoir plus,Visitez notre site, téléchargez nos supportswww.actency.frwww.twitter.com/actencywww.facebook.com/actencyNotre book de référenceswww.actency.fr/bookNotre Factsheet Drupalwww.actency.fr/drupal@gaetan_petit

×