Drupal & responsive

8 965 vues

Publié le

Présentation des diff

Publié dans : Technologie
2 commentaires
6 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
8 965
Sur SlideShare
0
Issues des intégrations
0
Intégrations
59
Actions
Partages
0
Téléchargements
133
Commentaires
2
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Drupal & responsive

    1. 1. Drupal & responsive Responsive Drupal Les outils pour concevoir un site en responsive avec Drupal
    2. 2. Drupal & responsivePré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. 3. Drupal & responsivePrésentation de DrupalDrupal 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. 4. Drupal & responsivePrésentation de DrupalLes points forts de Drupal• Extensible (API) • Granularité des permissions• Montée en charge • Communauté importante et active• Polyvalence • Multisites• Multilingue • Libre• Sécurité
    5. 5. Drupal & responsivePrésentation de DrupalLes points faibles de Drupal• Complexe (courbe d’apprentissage dev)• Gourmand• Theming («divite» aiguë)• Trop de modules....
    6. 6. Drupal & responsivePrésentation de DrupalSites français :Slate, Rue89, Mediapart, France24, Radio France, voyages-sncf...Sites internationaux :La Maison Blanche, CNN, Amnesty International, MTV UK
    7. 7. Drupal & responsivePanorama des outils disponibles• Starter themes• Modules (librairies) par type de media• Performance
    8. 8. Drupal & responsiveStarter themes ?Offre un thème «vierge» sur lequel on décline son propre sous-thème pour construire sonsite• 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. 9. Drupal & responsiveAdaptive theme• Mobile first• WCAG 2.0 level AA compliance• SASS integration
    10. 10. Drupal & responsiveSquare grid• Mobile first• Flexible 35 colonnes• Basé sur 960gs• Grille modulaire 770px, 980px et 1190pxpar défaut
    11. 11. Drupal & responsiveSquare grid• Mobile first• Flexible 35 colonnes• Basé sur 960gs• Grille modulaire 770px, 980px et 1190pxpar défaut
    12. 12. Drupal & responsiveZen• Mobile first• Sass/Compass• Zen Grids• Accessibilité
    13. 13. Drupal & responsiveSasson• Mobile first• Sass• Grille fluide basée sur 960gs via Compass• Light : minimum de balise html
    14. 14. Drupal & responsiveOmega• Mobile first• Entièrement responsive, basé sur 960gs• Grille modulaire de 12, 16, 24 colonnes• Possibilité de gérer des gabarits «contextuels» via delta etle 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. 15. Drupal & responsiveOmega
    16. 16. Drupal & responsiveNotes• 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. 17. Drupal & responsivePrincipe du Mobile First
    18. 18. Drupal & responsivePrincipe du Mobile First
    19. 19. Drupal & responsiveLes 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. 20. Drupal & responsiveLes imagesLes 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. 21. Drupal & responsiveLes slideshowsLes 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. 22. Drupal & responsiveLes vidéosLes modules :• FitVids http://drupal.org/project/fitvids Demo : http://fitvidsjs.com
    23. 23. Drupal & responsiveLes textes• Module FitText : http://drupal.org/project/fit_text Demo : http://fittextjs.com/
    24. 24. Drupal & responsiveLes tableaux
    25. 25. Drupal & responsiveLes tableaux http://css-tricks.com/responsive-data-tables/
    26. 26. Drupal & responsiveLes MenusLes différents patterns : select menu
    27. 27. Drupal & responsiveLes MenusLes différents patterns : toggle menu
    28. 28. Drupal & responsiveLes MenusRessources :• Les différents patterns : http://bradfrostweb.com/blog/web/responsive-nav-patterns/• Jquery mobile dropdown : https://github.com/joggink/jquerymobiledropdown
    29. 29. Drupal & responsivePerformance WebComme pour n’importe quel site...Article sur le #wdfriday : Introduction à la performance pour le web mobilehttp://wdfriday.com/blog/2012/04/introduction-a-la-performance-pour-le-web-mobile/
    30. 30. Drupal & responsivePerformance Web• Réduire le nombre de requête• CSS sprites (si possible)• Appliquer le principe du mobile first• Compression• Parallélisation des scripts• ...
    31. 31. Drupal & responsive Merci :) • Twitter : @nikovitto • http://rezonova.com

    ×