SlideShare a Scribd company logo
1 of 47
Responsive design
TYPO3
Où en sommes nous et quelle place pour
TYPO3 ?




                                         1
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
Ce dont je ne vais pas parler


 Du responsive text
 De la démarche de création graphique




                                        3
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
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



                                 6
Ordinateurs de bureau, notebook,
Ordinateurs portables

Dalles différentes,
utilisation du
redimensionnement




                                   7
Des méthodes de navigations différentes
Télécommandes variées, mouvement au stylet,
au doigt, navigation à la souris, quel impact ?




                                                  8
Responsif et Responsif

Le responsive design ce n’est pas juste un
template adaptatif.


Le concept est lié à un profond changement
des mentalités et des habitudes des
utilisateurs.



                                             9
Responsive design principes et
technique
                                 10
La magie des média queries




                             11
Fonctionnement
Exemple d’utilisation d’une“media querie” pour un
appel 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, grid

En savoir plus => www.w3.org/TR/css3-
mediaqueries/
                                                           12
Compatibilité




                13
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
Comportement des images
                          15
Quel est la difficulté avec les
images ?
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
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
Quelques exemples
Possibilités existantes avec les images




                                          18
Redimensionnement par la taille du conteneur




                                               19
20
Chargement de la version adaptée à la
résolution de l’écran




                                        21
22
Redimensionnement à la volée, une seule
solution «propre» mais enormément de
solutions diverses basées sur du JS




                                          23
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
Comportement du texte


@media only screen and (min-width:1200px){
    body{
       font-size: 1.75em;
    }
}




                                             25
Comment TYPO3 peut être
le CMS idéal pour des sites
responsif ?


                              26
Responsif et Responsif

Le responsive design ce n’est pas juste un
template adaptatif.


Le concept est lié à un profond changement
des mentalités et des habitudes des
utilisateurs.



                                             27
Une approche structurée
Le backend et l’arborescence permettent une
approche réfléchie et structurée
                                              28
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
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
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
Methode classique avec
backend layout
Il suffit d’intégrer ses gabarits responsifs




                                              32
Templavoilà

Il suffit d’intégrer ses gabarits responsifs




                                              33
Templavoilà Framework

Possibilité d’intégrer un Framework HTML
responsif et de créer une méthode prête à
l’emploi.




                                            34
Fluid

Il suffit d’intégrer ses gabarits responsifs




                                              35
Les frameworks HTML
Pensés par une communauté active
Réalisé par des experts Frontend




                                   36
37
38
39
40
41
42
43
Mon projet

Templavoilà Framework 2 + Twitter bootstrap +
Chargement dynamique des images + selecteur
                 backend




                                                44
Responsive_preview




                     45
Bilan, état des lieux




                        46
Questions / Réponses

More Related Content

Viewers also liked

Les Coiffes Bretonnes
Les Coiffes BretonnesLes Coiffes Bretonnes
Les Coiffes Bretonneskelrencontre
 
Rapport de synthese-_t._mandon
Rapport de synthese-_t._mandonRapport de synthese-_t._mandon
Rapport de synthese-_t._mandonJean-Michel Boudon
 
Challenge de la publicité 2013
Challenge de la publicité 2013Challenge de la publicité 2013
Challenge de la publicité 2013Hugo Coria
 
Valtech - Integrez vos réseaux sociaux à votre CMS
Valtech - Integrez vos réseaux sociaux à votre CMSValtech - Integrez vos réseaux sociaux à votre CMS
Valtech - Integrez vos réseaux sociaux à votre CMSValtech
 
Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...
Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...
Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...Fondation iFRAP
 
Nuevos retos tecnológicos para los profesionales de RRHH
Nuevos retos tecnológicos para los profesionales de RRHHNuevos retos tecnológicos para los profesionales de RRHH
Nuevos retos tecnológicos para los profesionales de RRHHEmilio Márquez Espino
 
Documentary questionnaire results
Documentary questionnaire resultsDocumentary questionnaire results
Documentary questionnaire resultshowardsmithh
 
Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...
Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...
Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...Association Maladies Foie
 
Pictures ppt.
Pictures ppt.Pictures ppt.
Pictures ppt.mlutwyche
 
Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...
Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...
Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...Antonio García Megía
 
Test presentation
Test presentationTest presentation
Test presentationjanmpash
 
Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...
Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...
Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...Eliana Santos
 

Viewers also liked (14)

Les Coiffes Bretonnes
Les Coiffes BretonnesLes Coiffes Bretonnes
Les Coiffes Bretonnes
 
Rapport de synthese-_t._mandon
Rapport de synthese-_t._mandonRapport de synthese-_t._mandon
Rapport de synthese-_t._mandon
 
Challenge de la publicité 2013
Challenge de la publicité 2013Challenge de la publicité 2013
Challenge de la publicité 2013
 
Valtech - Integrez vos réseaux sociaux à votre CMS
Valtech - Integrez vos réseaux sociaux à votre CMSValtech - Integrez vos réseaux sociaux à votre CMS
Valtech - Integrez vos réseaux sociaux à votre CMS
 
Au coeur des saveurs n°7
Au coeur des saveurs n°7Au coeur des saveurs n°7
Au coeur des saveurs n°7
 
Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...
Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...
Fondation iFRAP, "Retraites : les 15 clés de la réforme", Société Civile n° 1...
 
Icasque ppt
Icasque pptIcasque ppt
Icasque ppt
 
Nuevos retos tecnológicos para los profesionales de RRHH
Nuevos retos tecnológicos para los profesionales de RRHHNuevos retos tecnológicos para los profesionales de RRHH
Nuevos retos tecnológicos para los profesionales de RRHH
 
Documentary questionnaire results
Documentary questionnaire resultsDocumentary questionnaire results
Documentary questionnaire results
 
Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...
Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...
Depliant de l'Alerte jaune, campagne de dépistage des maladies du foie de l'e...
 
Pictures ppt.
Pictures ppt.Pictures ppt.
Pictures ppt.
 
Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...
Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...
Propaganda de la verdadera devoción a María enseñada por el Beato Grignión de...
 
Test presentation
Test presentationTest presentation
Test presentation
 
Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...
Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...
Guía de uso software de eventos -Registro proyectos Encuentro Nacional- Elian...
 

Similar to 2012 cyril-wolfangel-responsive design-typo3

Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Livre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceLivre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceRubedo, a WebTales solution
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesBig5media
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
Réutilisation de code entre windows 8 et windows phone 8
Réutilisation de code entre windows 8 et windows phone 8Réutilisation de code entre windows 8 et windows phone 8
Réutilisation de code entre windows 8 et windows phone 8Arnaud Auroux
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionL_Demontiers
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxGeorges59
 
Intégrer la problématique du responsive image dans WordPress
Intégrer la problématique du responsive image dans WordPressIntégrer la problématique du responsive image dans WordPress
Intégrer la problématique du responsive image dans WordPressAlexandre Sadowski
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement bruteYounesOuladSayad1
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamiqueYounesOuladSayad1
 
Yannick DUPUIS
Yannick DUPUISYannick DUPUIS
Yannick DUPUISYannick D.
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalActency
 

Similar to 2012 cyril-wolfangel-responsive design-typo3 (20)

Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Livre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-sourceLivre blanc Rubedo - Plateforme digitale open-source
Livre blanc Rubedo - Plateforme digitale open-source
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
Réutilisation de code entre windows 8 et windows phone 8
Réutilisation de code entre windows 8 et windows phone 8Réutilisation de code entre windows 8 et windows phone 8
Réutilisation de code entre windows 8 et windows phone 8
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Intégrer la problématique du responsive image dans WordPress
Intégrer la problématique du responsive image dans WordPressIntégrer la problématique du responsive image dans WordPress
Intégrer la problématique du responsive image dans WordPress
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
 
Yannick DUPUIS
Yannick DUPUISYannick DUPUIS
Yannick DUPUIS
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 

2012 cyril-wolfangel-responsive design-typo3

  • 1. Responsive design TYPO3 Où en sommes nous et quelle place pour TYPO3 ? 1
  • 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. Ce dont je ne vais pas parler Du responsive text De la démarche de création graphique 3
  • 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. Les techniques habituelles Découpe au pixel Découpe élastique Valeurs en % et/ou em 5
  • 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. Ordinateurs de bureau, notebook, Ordinateurs portables Dalles différentes, utilisation du redimensionnement 7
  • 8. Des méthodes de navigations différentes Télécommandes variées, mouvement au stylet, au doigt, navigation à la souris, quel impact ? 8
  • 9. Responsif et Responsif Le responsive design ce n’est pas juste un template adaptatif. Le concept est lié à un profond changement des mentalités et des habitudes des utilisateurs. 9
  • 10. Responsive design principes et technique 10
  • 11. La magie des média queries 11
  • 12. Fonctionnement Exemple d’utilisation d’une“media querie” pour un appel 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, grid En savoir plus => www.w3.org/TR/css3- mediaqueries/ 12
  • 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
  • 16. Quel est la difficulté avec les images ? 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. 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
  • 19. Redimensionnement par la taille du conteneur 19
  • 20. 20
  • 21. Chargement de la version adaptée à la résolution de l’écran 21
  • 22. 22
  • 23. Redimensionnement à la volée, une seule solution «propre» mais enormément de solutions diverses basées sur du JS 23
  • 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. Comportement du texte @media only screen and (min-width:1200px){     body{ font-size: 1.75em; } } 25
  • 26. Comment TYPO3 peut être le CMS idéal pour des sites responsif ? 26
  • 27. Responsif et Responsif Le responsive design ce n’est pas juste un template adaptatif. Le concept est lié à un profond changement des mentalités et des habitudes des utilisateurs. 27
  • 28. Une approche structurée Le backend et l’arborescence permettent une approche réfléchie et structurée 28
  • 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. 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. 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. Methode classique avec backend layout Il suffit d’intégrer ses gabarits responsifs 32
  • 33. Templavoilà Il suffit d’intégrer ses gabarits responsifs 33
  • 34. Templavoilà Framework Possibilité d’intégrer un Framework HTML responsif et de créer une méthode prête à l’emploi. 34
  • 35. Fluid Il suffit d’intégrer ses gabarits responsifs 35
  • 36. Les frameworks HTML Pensés par une communauté active Réalisé par des experts Frontend 36
  • 37. 37
  • 38. 38
  • 39. 39
  • 40. 40
  • 41. 41
  • 42. 42
  • 43. 43
  • 44. Mon projet Templavoilà Framework 2 + Twitter bootstrap + Chargement dynamique des images + selecteur backend 44
  • 46. Bilan, état des lieux 46

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. Nouvelles sp&amp;#xE9;cifications de Css 3 ajout de nouvelles sp&amp;#xE9;cification la balise &amp;#xAB;media&amp;#xBB;\n
  5. \n
  6. \n
  7. M&amp;#xEA;me pour les ordinateurs de bureau, on a des dalles diff&amp;#xE9;rentes, et des r&amp;#xE9;solution diff&amp;#xE9;rentes\n
  8. Pas d&amp;#x2019;effets de survol, interface simplifi&amp;#xE9;e selon le p&amp;#xE9;riph&amp;#xE9;rique\n
  9. \n
  10. \n
  11. \n
  12. Possible d&amp;#x2019;imbriquer des media queries\n\n
  13. \n
  14. \n
  15. Temps de chargement, blocs conditionnels, comment &amp;#xE9;viter ces probl&amp;#xE8;mes ?\n
  16. Combien d&amp;#x2019;image diff&amp;#xE9;rentes ?\nRedimensionnement du navigateur, probl&amp;#xE8;me d&amp;#x2019;aliasing\nRedimensionnement par crop, ou par redimensionnement homot&amp;#xE9;tique\nSi j&amp;#x2019;ai un mobile, je voudrais ne charger que la version mobile\n
  17. A taille d&amp;#x2019;&amp;#xE9;cran &amp;#xE9;gale et r&amp;#xE9;solution &amp;#xE9;gale, pas le m&amp;#xEA;me nombre de pixels !\n
  18. \n
  19. \n
  20. On ne charge qu&amp;#x2019;une seule image, qui est redimensionn&amp;#xE9;e en pourcentage ou par le navigateur\n \n
  21. \n
  22. On ne charge qu&amp;#x2019;une seule image, qui est redimensionn&amp;#xE9;e en pourcentage ou par le navigateur\n \n
  23. \n
  24. V&amp;#xE9;rifier et illustrer\n
  25. Ici parler du responsive text\n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. C&amp;#x2019;est juste le d&amp;#xE9;but, &amp;#xE0; mon sens important de syst&amp;#xE9;matiser la d&amp;#xE9;marche\n
  47. \n