Responsive designTYPO3Où en sommes nous et quelle place pourTYPO3 ?                                         1
Ce dont je vais parler Présentation rapide de ce qu’est le design responsif Comment fonctionne le côté «responsif» Quelles...
Ce dont je ne vais pas parler Du responsive text De la démarche de création graphique                                     ...
L’approche «design adaptatif» D’ou vient la démarche, quelle différence avec les techniques habituelles ? Ou en est on ave...
Les techniques habituelles Découpe au pixel Découpe élastique Valeurs en % et/ou em                             5
Les périphériques ont évolués,les utilisateurs aussi Téléphones Tablettes Consoles de jeu Téléviseurs Bornes tactiles     ...
Ordinateurs de bureau, notebook,Ordinateurs portablesDalles différentes,utilisation duredimensionnement                   ...
Des méthodes de navigations différentesTélécommandes variées, mouvement au stylet,au doigt, navigation à la souris, quel i...
Responsif et ResponsifLe responsive design ce n’est pas juste untemplate adaptatif.Le concept est lié à un profond changem...
Responsive design principes ettechnique                                 10
La magie des média queries                             11
FonctionnementExemple d’utilisation d’une“media querie” pour unappel de feuille de style sous condition@media only screen ...
Compatibilité                13
IE ? Tiens encore lui ? Il existe des solutions pour une compatibilité.                            respond.js             ...
Comportement des images                          15
Quel est la difficulté avec lesimages ?Quelle image pour quelle résolution ?Quelle image pour quelle périphérique ?Quelle i...
Le cas des écrans rétina@media all and (-webkit-min-device-pixel-ratio : 1.5) {    #container header[role="banner"] .logo ...
Quelques exemplesPossibilités existantes avec les images                                          18
Redimensionnement par la taille du conteneur                                               19
20
Chargement de la version adaptée à larésolution de l’écran                                        21
22
Redimensionnement à la volée, une seulesolution «propre» mais enormément desolutions diverses basées sur du JS            ...
Images de fond en css/* default */#img1 {background-image: url(‘small.jpg’);width: 200px;height: 200px;}@media screen and ...
Comportement du texte@media only screen and (min-width:1200px){    body{       font-size: 1.75em;    }}                   ...
Comment TYPO3 peut êtrele CMS idéal pour des sitesresponsif ?                              26
Responsif et ResponsifLe responsive design ce n’est pas juste untemplate adaptatif.Le concept est lié à un profond changem...
Une approche structuréeLe backend et l’arborescence permettent uneapproche réfléchie et structurée                         ...
Possibilité d’une double logique editoriale  Aux CMSDAY 14 juin 2012:  «Le représentant de TYPO3 Maxime Fauquemberg a évoq...
Puissance de configuration du backend Le backend de TYPO3 est tellement puissant que les applications sont encore ouverte, ...
Puissance de configuration du backend Une idée: Utiliser le système de langues natif de TYPO3 pour remplir plusieures décli...
Methode classique avecbackend layoutIl suffit d’intégrer ses gabarits responsifs                                           ...
TemplavoilàIl suffit d’intégrer ses gabarits responsifs                                              33
Templavoilà FrameworkPossibilité d’intégrer un Framework HTMLresponsif et de créer une méthode prête àl’emploi.           ...
FluidIl suffit d’intégrer ses gabarits responsifs                                              35
Les frameworks HTMLPensés par une communauté activeRéalisé par des experts Frontend                                   36
37
38
39
40
41
42
43
Mon projetTemplavoilà Framework 2 + Twitter bootstrap +Chargement dynamique des images + selecteur                 backend...
Responsive_preview                     45
Bilan, état des lieux                        46
Questions / Réponses
Prochain SlideShare
Chargement dans…5
×

2012 cyril-wolfangel-responsive design-typo3

1 576 vues

Publié le

Présentation proposée lors de la T3UNI12. Analyse technique des solutions de chargement d'images dynamiques pour le responsive design.
Etude des possibilités proposées nativement par TYPO3 pour intégrer en responsive design.
Bilan et état des lieux

Publié dans : Technologie
  • Soyez le premier à commenter

2012 cyril-wolfangel-responsive design-typo3

  1. 1. Responsive designTYPO3Où en sommes nous et quelle place pourTYPO3 ? 1
  2. 2. Ce dont je vais parler Présentation rapide de ce qu’est le design responsif Comment fonctionne le côté «responsif» Quelles sont les difficultés autour de la gestion des images Comment peut-on faire un design responsif avec TYPO3 2
  3. 3. Ce dont je ne vais pas parler Du responsive text De la démarche de création graphique 3
  4. 4. L’approche «design adaptatif» D’ou vient la démarche, quelle différence avec les techniques habituelles ? Ou en est on avec cette technique? 4
  5. 5. Les techniques habituelles Découpe au pixel Découpe élastique Valeurs en % et/ou em 5
  6. 6. Les périphériques ont évolués,les utilisateurs aussi Téléphones Tablettes Consoles de jeu Téléviseurs Bornes tactiles 6
  7. 7. Ordinateurs de bureau, notebook,Ordinateurs portablesDalles différentes,utilisation duredimensionnement 7
  8. 8. Des méthodes de navigations différentesTélécommandes variées, mouvement au stylet,au doigt, navigation à la souris, quel impact ? 8
  9. 9. Responsif et ResponsifLe responsive design ce n’est pas juste untemplate adaptatif.Le concept est lié à un profond changementdes mentalités et des habitudes desutilisateurs. 9
  10. 10. Responsive design principes ettechnique 10
  11. 11. La magie des média queries 11
  12. 12. FonctionnementExemple d’utilisation d’une“media querie” pour unappel de feuille de style sous condition@media only screen and (max-width:500px){    /* … */}Mais aussi: width, height, device-width, device-height,orientation, aspect-ratio, device-aspect-ratio, color,color-index, monochrome, resolution, scan, gridEn savoir plus => www.w3.org/TR/css3-mediaqueries/ 12
  13. 13. Compatibilité 13
  14. 14. IE ? Tiens encore lui ? Il existe des solutions pour une compatibilité. respond.js adapt.js http://modernizr.com Exemple: <!--[if lt IE 9]> <script type="text/javascript" src="/js/css-media-query-ie.js"></script> <![endif]--> 14
  15. 15. Comportement des images 15
  16. 16. Quel est la difficulté avec lesimages ?Quelle image pour quelle résolution ?Quelle image pour quelle périphérique ?Quelle image pour quelle taille du navigateur ?Quelle image au chargement ? 16
  17. 17. Le cas des écrans rétina@media all and (-webkit-min-device-pixel-ratio : 1.5) { #container header[role="banner"] .logo a { background-image: url(../img/logo2@2x.png); }} 17
  18. 18. Quelques exemplesPossibilités existantes avec les images 18
  19. 19. Redimensionnement par la taille du conteneur 19
  20. 20. 20
  21. 21. Chargement de la version adaptée à larésolution de l’écran 21
  22. 22. 22
  23. 23. Redimensionnement à la volée, une seulesolution «propre» mais enormément desolutions diverses basées sur du JS 23
  24. 24. Images de fond en css/* default */#img1 {background-image: url(‘small.jpg’);width: 200px;height: 200px;}@media screen and (min-width: 500px){#img1 {background-image: url(‘large.jpg’);width: 400px;height: 400px;}} 24
  25. 25. Comportement du texte@media only screen and (min-width:1200px){    body{ font-size: 1.75em; }} 25
  26. 26. Comment TYPO3 peut êtrele CMS idéal pour des sitesresponsif ? 26
  27. 27. Responsif et ResponsifLe responsive design ce n’est pas juste untemplate adaptatif.Le concept est lié à un profond changementdes mentalités et des habitudes desutilisateurs. 27
  28. 28. Une approche structuréeLe backend et l’arborescence permettent uneapproche réfléchie et structurée 28
  29. 29. Possibilité d’une double logique editoriale Aux CMSDAY 14 juin 2012: «Le représentant de TYPO3 Maxime Fauquemberg a évoqué lui la double logique éditoriale : proposer deux contenus différents dans un même contexte, expliquant qu’un mobinaute dans le métro ne veut pas forcément lire la même information qu’un internaute assis devant son ordinateur, une démarche pour le moins originale.» 29
  30. 30. Puissance de configuration du backend Le backend de TYPO3 est tellement puissant que les applications sont encore ouverte, chacun peut faire sa propre configuration, adaptée au client. Nativement, utilisation des layouts, frame au niveau des contenus. 30
  31. 31. Puissance de configuration du backend Une idée: Utiliser le système de langues natif de TYPO3 pour remplir plusieures déclinaisons des contenus, avec un fallback à la version par défaut possibilité d’utiliser les workspaces aussi, pour du contenu adapté à chaque plateforme. 31
  32. 32. Methode classique avecbackend layoutIl suffit d’intégrer ses gabarits responsifs 32
  33. 33. TemplavoilàIl suffit d’intégrer ses gabarits responsifs 33
  34. 34. Templavoilà FrameworkPossibilité d’intégrer un Framework HTMLresponsif et de créer une méthode prête àl’emploi. 34
  35. 35. FluidIl suffit d’intégrer ses gabarits responsifs 35
  36. 36. Les frameworks HTMLPensés par une communauté activeRéalisé par des experts Frontend 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. Mon projetTemplavoilà Framework 2 + Twitter bootstrap +Chargement dynamique des images + selecteur backend 44
  45. 45. Responsive_preview 45
  46. 46. Bilan, état des lieux 46
  47. 47. Questions / Réponses

×