Drupal & responsive      Responsive Drupal            Les outils pour concevoir un site              en responsive avec Dr...
Drupal & responsivePrésentation de Drupal«829,468 people in 228 countries speaking 181 languages power Drupal»            ...
Drupal & responsivePrésentation de DrupalDrupal permet de mettre en place une grande variété de sites web :• Site communau...
Drupal & responsivePrésentation de DrupalLes points forts de Drupal• Extensible (API)           • Granularité des permissi...
Drupal & responsivePrésentation de DrupalLes points faibles de Drupal• Complexe (courbe d’apprentissage dev)• Gourmand• Th...
Drupal & responsivePrésentation de DrupalSites français :Slate, Rue89, Mediapart, France24, Radio France, voyages-sncf...S...
Drupal & responsivePanorama des outils disponibles• Starter themes• Modules (librairies) par type de media• Performance
Drupal & responsiveStarter themes ?Offre un thème «vierge» sur lequel on décline son propre sous-thème pour construire son...
Drupal & responsiveAdaptive theme• Mobile first• WCAG 2.0 level AA compliance• SASS integration
Drupal & responsiveSquare grid• Mobile first• Flexible 35 colonnes• Basé sur 960gs• Grille modulaire 770px, 980px et 1190px...
Drupal & responsiveSquare grid• Mobile first• Flexible 35 colonnes• Basé sur 960gs• Grille modulaire 770px, 980px et 1190px...
Drupal & responsiveZen• Mobile first• Sass/Compass• Zen Grids• Accessibilité
Drupal & responsiveSasson• Mobile first• Sass• Grille fluide basée sur 960gs via Compass• Light : minimum de balise html
Drupal & responsiveOmega• Mobile first• Entièrement responsive, basé sur 960gs• Grille modulaire de 12, 16, 24 colonnes• Po...
Drupal & responsiveOmega
Drupal & responsiveNotes• Le «tout au clic» peut être contre productif.....• Possibilité d’améliorer l’output html (views,...
Drupal & responsivePrincipe du Mobile First
Drupal & responsivePrincipe du Mobile First
Drupal & responsiveLes images• Charger les plus petites images en 1er• Ne jamais charger plusieurs fois la même image• Tra...
Drupal & responsiveLes imagesLes modules :• Adaptive Image http://drupal.org/project/adaptive_image Demo : http://adaptive...
Drupal & responsiveLes slideshowsLes modules :• Flexslider module http://drupal.org/project/flexslider demo : http://www.wo...
Drupal & responsiveLes vidéosLes modules :• FitVids http://drupal.org/project/fitvids                                      ...
Drupal & responsiveLes textes• Module FitText : http://drupal.org/project/fit_text Demo : http://fittextjs.com/
Drupal & responsiveLes tableaux
Drupal & responsiveLes tableaux            http://css-tricks.com/responsive-data-tables/
Drupal & responsiveLes MenusLes différents patterns : select menu
Drupal & responsiveLes MenusLes différents patterns : toggle menu
Drupal & responsiveLes MenusRessources :• Les différents patterns : http://bradfrostweb.com/blog/web/responsive-nav-patter...
Drupal & responsivePerformance WebComme pour n’importe quel site...Article sur le #wdfriday : Introduction à la performanc...
Drupal & responsivePerformance Web• Réduire le nombre de requête• CSS sprites (si possible)• Appliquer le principe du mobi...
Drupal & responsive                      Merci :)                      • Twitter : @nikovitto                      • http:...
Prochain SlideShare
Chargement dans…5
×

Drupal & responsive

8 861 vues

Publié le

Présentation des diff

Publié dans : Technologie
2 commentaires
5 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
8 861
Sur SlideShare
0
Issues des intégrations
0
Intégrations
59
Actions
Partages
0
Téléchargements
132
Commentaires
2
J’aime
5
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

    ×