Drupal & responsive
6 j'aime6,723 vues
Le document présente Drupal comme un outil puissant et polyvalent pour créer des sites web responsives, mentionnant ses avantages tels que la sécurité, l'extensibilité et une documentation riche, ainsi que ses inconvénients comme sa complexité et sa gourmandise en ressources. Il discute également des thèmes de démarrage, de l’approche mobile-first et propose divers modules pour optimiser les images, les vidéos et les tableaux. Enfin, il aborde des considérations sur la performance des sites web et fournit des ressources supplémentaires pour les développeurs.
Drupal & responsive
- 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)
- 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