Présentation des diff

1. Drupal & responsive
Responsive Drupal
Les outils pour concevoir un site
en responsive avec Drupal

2. Drupal & responsive
Présentation de Drupal
«829,468 people in 228 countries speaking 181 languages power Drupal»
• 16,327 Modules
• 1,392 Themes
• 414 Distributions
• 18,197 Developers

3. Drupal & responsive
Présentation de Drupal
Drupal permet de mettre en place une grande variété de sites web :
• Site communautaire • e-commerce
• Portail • e-learning
• Site d’entreprise • wiki
• Intranet • plateforme d’évènements
• Extranet • plateforme vidéo
• Blog • application
• Réseau social...

4. Drupal & responsive
Présentation de Drupal
Les points forts de Drupal
• Extensible (API) • Granularité des permissions
• Montée en charge • Communauté importante et active
• Polyvalence • Multisites
• Multilingue • Libre
• Sécurité

5. Drupal & responsive
Présentation de Drupal
Les points faibles de Drupal
• Complexe (courbe d’apprentissage dev)
• Gourmand
• Theming («divite» aiguë)
• Trop de modules....

6. Drupal & responsive
Présentation de Drupal
Sites français :
Slate, Rue89, Mediapart, France24, Radio France, voyages-sncf...
Sites internationaux :
La Maison Blanche, CNN, Amnesty International, MTV UK

7. Drupal & responsive
Panorama des outils disponibles
• Starter themes
• Modules (librairies) par type de media
• Performance

8. Drupal & responsive
Starter themes ?
Offre un thème «vierge» sur lequel on décline son propre sous-thème pour construire son
site
• Structure de base solide
• Reset des CSS du core de Drupal
• Temps d’intégration accéléré
• Fonctions spécifiques (personnalisation, hook, theme...)
• Interface pour gérer les zones du site
• Garantie les bonnes pratiques (notamment en sécurité)

9. Drupal & responsive
Adaptive theme
• Mobile first
• WCAG 2.0 level AA compliance
• SASS integration

10. Drupal & responsive
Square grid
• Mobile first
• Flexible 35 colonnes
• Basé sur 960gs
• Grille modulaire 770px, 980px et 1190px
par défaut

11. Drupal & responsive
Square grid
• Mobile first
• Flexible 35 colonnes
• Basé sur 960gs
• Grille modulaire 770px, 980px et 1190px
par défaut

12. Drupal & responsive
Zen
• Mobile first
• Sass/Compass
• Zen Grids
• Accessibilité

13. Drupal & responsive
Sasson
• Mobile first
• Sass
• Grille fluide basée sur 960gs via Compass
• Light : minimum de balise html

14. Drupal & responsive
Omega
• Mobile first
• Entièrement responsive, basé sur 960gs
• Grille modulaire de 12, 16, 24 colonnes
• Possibilité de gérer des gabarits «contextuels» via delta et
le module context (frontpage, blog...)
• Complètement administrable via l’UI
• Omega UI interface drag & drop setting
• Intégration drush
• Omega Tools : facilite la création
de sous thème (en développement)

15. Drupal & responsive
Omega

16. Drupal & responsive
Notes
• Le «tout au clic» peut être contre productif.....
• Possibilité d’améliorer l’output html (views, DS, override tpl.php....)
• Possibilité de faire du «from scratch», en ayant le temps et de bonnes
connaissances de Drupal
• Le choix du starter thème dépend de votre niveau de compétence et demandera
une apprentissage de la philosophie du thème pour en exploiter toutes ses
possibilités

17. Drupal & responsive
Principe du Mobile First

18. Drupal & responsive
Principe du Mobile First

19. Drupal & responsive
Les images
• Charger les plus petites images en 1er
• Ne jamais charger plusieurs fois la même image
• Traitement possible côté client (javascript) ou serveur (php par exemple)

20. Drupal & responsive
Les images
Les modules :
• Adaptive Image http://drupal.org/project/adaptive_image Demo : http://adaptive-images.com/
• Adaptive Image Styles http://drupal.org/project/ais
• Client-side adaptive image http://drupal.org/project/cs_adaptive_image
• Responsive images and styles http://drupal.org/project/resp_img

21. Drupal & responsive
Les slideshows
Les modules :
• Flexslider module http://drupal.org/project/flexslider
demo : http://www.woothemes.com/flexslider/flexslider-demo/
• Views slideshow http://drupal.org/project/views_slideshow

22. Drupal & responsive
Les vidéos
Les modules :
• FitVids http://drupal.org/project/fitvids
Demo : http://fitvidsjs.com

23. Drupal & responsive
Les textes
• Module FitText : http://drupal.org/project/fit_text
Demo : http://fittextjs.com/

24. Drupal & responsive
Les tableaux

25. Drupal & responsive
Les tableaux
http://css-tricks.com/responsive-data-tables/

26. Drupal & responsive
Les Menus
Les différents patterns : select menu

27. Drupal & responsive
Les Menus
Les différents patterns : toggle menu

28. Drupal & responsive
Les Menus
Ressources :
• Les différents patterns : http://bradfrostweb.com/blog/web/responsive-nav-patterns/
• Jquery mobile dropdown : https://github.com/joggink/jquerymobiledropdown

29. Drupal & responsive
Performance Web
Comme pour n’importe quel site...
Article sur le #wdfriday : Introduction à la performance pour le web mobile
http://wdfriday.com/blog/2012/04/introduction-a-la-performance-pour-le-web-mobile/

30. Drupal & responsive
Performance Web
• Réduire le nombre de requête
• CSS sprites (si possible)
• Appliquer le principe du mobile first
• Compression
• Parallélisation des scripts
• ...

31. Drupal & responsive
Merci :)
• Twitter : @nikovitto
• http://rezonova.com