SlideShare une entreprise Scribd logo

Qu'est-ce que le Responsive Design.docx

G
Georges59

Le responsive design est une approche de la conception web dans laquelle l'interface s'adapte à la disposition de l'appareil, ce qui facilite l'utilisation, la navigation et la recherche d'informations. La réactivité est possible grâce aux media queries, qui permettent à la conception de s'adapter automatiquement à l'espace du navigateur pour garantir la cohérence du contenu sur tous les appareils, et aux éléments de conception dimensionnés en unités relatives (%).

1  sur  6
Télécharger pour lire hors ligne
Qu'est-ce que le Responsive Design ?
Le responsive design est une approche de la conception web dans laquelle l'interface s'adapte à la
disposition de l'appareil, ce qui facilite l'utilisation, la navigation et la recherche d'informations.
La réactivité est possible grâce aux media queries, qui permettent à la conception de s'adapter
automatiquement à l'espace du navigateur pour garantir la cohérence du contenu sur tous les
appareils, et aux éléments de conception dimensionnés en unités relatives (%).
La conception réactive présente des avantages considérables, et la conception Web doit par défaut
prendre en charge le changement d'appareil.
Avec le responsive design, vous pouvez :
Atteindre un public plus large : de nos jours, de plus en plus d'utilisateurs accèdent au web via des
appareils mobiles.
Économiser du temps et des efforts de développement puisque les concepteurs et les développeurs
ne se concentrent que sur une seule version du design.
Améliorer le référencement, car les moteurs de recherche récompensent les sites Web adaptés aux
mobiles par de meilleures positions de recherche.
Assurez la cohérence de la marque et du design sur tous les appareils, car il n'y a aucune chance de
devoir modifier les directives pour les adapter à différentes boîtes de design.
Afficher la transcription de la vidéo
Pourquoi le design réactif est si populaire
Au début des années 2010, les concepteurs ont dû faire face à un phénomène historique. De plus en
plus d'utilisateurs commençaient à accéder à des contenus Web sur des appareils portables plutôt
que sur des ordinateurs de bureau. Il existait deux grandes approches de conception pour gérer la
conception sur les différents appareils :
Les concepteurs peuvent créer plusieurs versions d'un design optimisé pour différents appareils et
leur donner des dimensions fixes (approche de conception adaptative). Ils pouvaient travailler sur
une conception unique et flexible qui s'étirerait ou rétrécirait pour s'adapter à l'écran (approche de
conception réactive).
Les organisations et les concepteurs ont eu du mal à ignorer les avantages de la conception réactive.
Plutôt que de travailler avec des unités absolues (par exemple, des pixels) sur des versions distinctes,
les concepteurs se sont concentrés sur un seul design et l'ont laissé couler comme un liquide pour
remplir tous les "conteneurs"."
Comprendre le langage de la conception réactive
La conception réactive repose sur trois principes fondamentaux :
Système de grille fluide
Les systèmes de grille sont des outils utilisés par les concepteurs pour construire, concevoir,
organiser les informations et créer des expériences utilisateur cohérentes. Dans le design
d'interaction, les grilles à plusieurs colonnes, hiérarchiques et modulaires sont les types de grilles les
plus utilisés.
Le principe d'une grille est simple : chaque élément occupe le même pourcentage d'espace, quelle
que soit la taille de l'écran, ce qui signifie que les composants peuvent être mis à l'échelle lorsque
l'utilisateur change de périphérique.
Dans cette image, vous pouvez voir que la version fixe du contenu a la même largeur quel que soit
l'appareil alors que dans la version fluide, le contenu remplit l'espace disponible en fonction de la
taille de l'appareil.
Images fluides
Dans la conception réactive, les images fluides sont des images qui s'adaptent à leur conteneur, ce
qui signifie que lorsque le navigateur atteint un point d'arrêt, l'image s'adapte à la taille actuelle de la
fenêtre.
Pour les images non photographiques, comme les icônes, vous pouvez utiliser des fichiers SVG. Ces
formats de fichiers sont légers et vous pouvez les adapter à n'importe quelle résolution sans perdre
en qualité.
Requêtes multimédias et points d'arrêt
Les requêtes multimédia sont des filtres qui détectent les dimensions de l'appareil de navigation et
font en sorte que votre conception soit appropriée, quelle que soit la taille de l'écran. Pour faciliter
les requêtes multimédia, vous disposez de points d'arrêt : il s'agit des valeurs auxquelles le contenu
de votre site Web sera réorganisé pour offrir à l'utilisateur la meilleure expérience possible.
Les requêtes multimédia et les points d'arrêt vont de pair et peuvent tous deux être définis dans vos
feuilles de style CSS. Pour les concepteurs, un point de rupture est une limite où la conception sera
modifiée pour adapter les fonctionnalités à la nouvelle taille. Les concepteurs utilisent généralement
trois tailles lors de la conception de sites Web réactifs : 1024 et plus, 1023-768, et 767-320 px.
Dans cette image, vous pouvez voir comment le placement des colonnes est réorganisé en fonction
de la surface d'écran disponible. Le contenu est affiché en une seule colonne sur le smartphone, deux
sur la tablette et trois sur le bureau.
Les requêtes multimédia fonctionnent mieux avec une approche "mobile first", qui consiste à définir
ce que vous voulez sur le mobile, puis à augmenter l'échelle à partir de là. Vous devrez tester le
contenu pour voir où se situent les points de rupture et les planifier. À terme, vous pourrez peut-être
prédire les points d'arrêt en fonction de la résolution de l'écran d'un appareil.
Meilleures pratiques et considérations pour le design réactif
Avec le responsive design, la flexibilité est de mise à tous les niveaux : images, textes et mises en
page. Vous devez donc
Adopter une mentalité "mobile-first" : Que vous commenciez à concevoir à partir du plus petit écran
ou de la version de bureau, adopter une mentalité "mobile-first" vous aide à mettre en pratique
l'approche "mobile-first", un principe de conception dont le cœur est la simplicité.
Une mentalité "mobile-first" implique de donner la priorité au contenu, de laisser les graphiques et
les images complexes pour la version de bureau, et de créer des cibles d'effleurement adaptées aux
gros doigts (30px minimum).
Utilisez des graphiques vectoriels évolutifs (SVG). Il s'agit d'un format de fichier basé sur XML pour les
graphiques en 2D, qui prend en charge l'interactivité et les animations. Incluez trois points d'arrêt ou
plus (c'est-à-dire, concevez pour trois appareils ou plus).
Hiérarchisez et masquez le contenu en fonction du contexte des utilisateurs. Vérifiez votre hiérarchie
visuelle et utilisez la divulgation progressive et les tiroirs de navigation pour donner aux utilisateurs
les éléments nécessaires en premier. Placez les éléments non essentiels au second plan.
Visez le minimalisme.
Appliquez des modèles de conception afin de maximiser la facilité d'utilisation pour les utilisateurs
dans leurs contextes et de les familiariser plus rapidement avec le site : par exemple, le modèle de
chute des colonnes adapte le contenu à de nombreux types d'écran.
Visez l'accessibilité avec les tailles/styles de police. Utilisez efficacement le contraste et l'arrière-plan.
Envisagez d'apprendre les échelles typographiques pour harmoniser le corps du texte et les titres.
Comme certains utilisateurs ont recours à des lecteurs d'écran, faites en sorte que tout votre texte
soit "réel" au lieu d'utiliser du texte dans des images.
Le Responsive Design est robuste et économique, mais sa nature "facile" est trompeuse. Vous pouvez
toujours rencontrer des difficultés si vous l'utilisez sans précaution.
Par exemple, elle peut restreindre votre contrôle sur les tailles d'écran de la conception ; par
conséquent, si vous ne définissez pas de requêtes média en amont, les éléments peuvent se déplacer
indépendamment. En outre, il est courant de rencontrer des problèmes avec les formats d'annonce,
en particulier sur les appareils mobiles.
Néanmoins, le design réactif contribue à une excellente expérience utilisateur car, par défaut, il exige
l'uniformité, l'homogénéité et la simplicité de vos efforts de conception. Il est favorable au
référencement, et les multiples CMS et frameworks, tels que WordPress et Bootstrap, le rendent très
économique à mettre en œuvre.
En savoir plus sur le Responsive Design
Suivez notre cours : Mobile UX Design : Le guide du débutant. Lisez l'analyse approfondie de Jerry
Cao sur le Responsive Design, qui présente d'excellents exemples de leaders du secteur. TNW
propose des considérations utiles concernant le Responsive Design, et d'autres conseils pour les
concepteurs attentifs.
Apprenez-en davantage sur la conception réactive et les bonnes pratiques de convivialité dans le
guide de terrain sur la conception Web de Steve Krug, "Don't make me think". Apprenez tout sur les
grilles, pourquoi elles sont importantes et comment les utiliser dans la conception d'interfaces.
Responsive Design : Meilleures pratiques
La conception réactive permet aux utilisateurs d'accéder au contenu à partir de plusieurs résolutions
d'appareils. Comme de plus en plus de personnes interagissent avec les sites Web par le biais
d'appareils mobiles, les utilisateurs s'attendent désormais à ce que les sites Web soient réactifs.
Nous examinerons ici les grands principes de la conception réactive et la manière dont elle prend en
charge l'accessibilité et le changement d'appareil. Le terme "Responsive Design" a été inventé par le
concepteur et développeur web Ethan Marcotte dans son livre Responsive Web Design.
Il s'agit de l'option par défaut pour prendre en charge le changement d'appareil. Les utilisateurs
peuvent commencer à interagir avec votre produit ou service sur un ordinateur de bureau, passer à
un téléphone ou une tablette, puis revenir. Examinons de près les éléments clés du design réactif.
En outre, les directives d'accessibilité aux contenus Web (WCAG) définissent la réactivité du Web
(appelée Reflow) comme l'un des critères de réussite en matière de contenu accessible. Un site
réactif est également mieux classé dans les résultats de recherche et est crucial pour l'optimisation
des moteurs de recherche (SEO).
Qu'est-ce que le Responsive Design ?
La conception Web réactive (aussi appelée "Responsive" ou "Responsive Design") est une approche
visant à concevoir un contenu Web qui s'affiche quelle que soit la résolution régie par l'appareil.
Elle s'effectue généralement à l'aide de points de rupture (seuils de résolution à partir desquels le
contenu s'adapte à la vue). Les fenêtres d'affichage doivent s'adapter logiquement aux tablettes, aux
téléphones et aux ordinateurs de bureau, quelle que soit leur résolution.
Illustration des différentes tailles d'écran et de la façon dont la mise en page se réorganise en
fonction de la taille. En responsive design, vous pouvez définir des règles pour la circulation du
contenu et la modification de la mise en page en fonction de la plage de taille de l'écran.
Les conceptions réactives répondent aux changements de largeur du navigateur en ajustant le
placement des éléments de conception pour qu'ils s'adaptent à l'espace disponible. Si vous ouvrez un
site réactif sur un ordinateur de bureau et que vous modifiez la taille de la fenêtre du navigateur, le
contenu sera réorganisé de manière dynamique pour s'adapter à la fenêtre du navigateur.
Sur les téléphones mobiles, le site vérifie l'espace disponible et se présente ensuite dans la
disposition idéale. Illustration de l'eau prenant la forme de chaque récipient : une tasse, une théière,
une bouteille, un téléphone et un bureau.
Les 3 grands principes du Responsive Design
Trois grands principes régissent le responsive design. D'autres principes peuvent entrer en jeu pour
certaines conceptions, mais ces trois principes lient tous les sites responsive :
Systèmes de grilles fluides
Utilisation fluide des images
Requêtes média
Système de grille fluide
Dans la presse écrite, les éditeurs déterminent la taille de ce qui est affiché (et où) en mesures
absolues. Avec l'arrivée d'Internet, cette tendance s'est poursuivie et les concepteurs ont défini les
sites Web en pixels.
Illustration de différents écrans de résolution : 720p, 1080p et 4K.
Le "p" dans "720p" et "1080p" signifie "progressive scan" (balayage progressif), et le nombre fait
référence aux dimensions en hauteur de l'image en pixels. Pour le responsive design, la méthode de
la taille absolue ne fonctionne pas car la taille des appareils varie. Le responsive design utilise donc
des tailles relatives.
Hiérarchisez et masquez le contenu en fonction du contexte des utilisateurs. Vérifiez votre hiérarchie
visuelle et utilisez la divulgation progressive et les tiroirs de navigation pour donner aux utilisateurs
les éléments nécessaires en premier. Placez les éléments non essentiels au second plan.
Visez le minimalisme.
Appliquez des modèles de conception afin de maximiser la facilité d'utilisation pour les utilisateurs
dans leurs contextes et de les familiariser plus rapidement avec le site : par exemple, le modèle de
chute des colonnes adapte le contenu à de nombreux types d'écran.
Visez l'accessibilité avec les tailles/styles de police. Utilisez efficacement le contraste et l'arrière-plan.
Envisagez d'apprendre les échelles typographiques pour harmoniser le corps du texte et les titres.
Comme certains utilisateurs ont recours à des lecteurs d'écran, faites en sorte que tout votre texte
soit "réel" au lieu d'utiliser du texte dans des images.
Le Responsive Design est robuste et économique, mais sa nature "facile" est trompeuse. Vous pouvez
toujours rencontrer des difficultés si vous l'utilisez sans précaution.
Par exemple, elle peut restreindre votre contrôle sur les tailles d'écran de la conception ; par
conséquent, si vous ne définissez pas de requêtes média en amont, les éléments peuvent se déplacer
indépendamment. En outre, il est courant de rencontrer des problèmes avec les formats d'annonce,
en particulier sur les appareils mobiles.
Néanmoins, le design réactif contribue à une excellente expérience utilisateur car, par défaut, il exige
l'uniformité, l'homogénéité et la simplicité de vos efforts de conception. Il est favorable au
référencement, et les multiples CMS et frameworks, tels que WordPress et Bootstrap, le rendent très
économique à mettre en œuvre.
En savoir plus sur le Responsive Design
Apprenez-en davantage sur la conception réactive et les bonnes pratiques de convivialité dans le
guide de terrain sur la conception Web de Steve Krug, "Don't make me think".
Apprenez tout sur les grilles, pourquoi elles sont importantes et comment les utiliser dans la
conception d'interfaces.
Responsive Design : Meilleures pratiques
La conception réactive permet aux utilisateurs d'accéder au contenu à partir de plusieurs résolutions
d'appareils. Comme de plus en plus de personnes interagissent avec les sites Web par le biais
d'appareils mobiles, les utilisateurs s'attendent désormais à ce que les sites Web soient réactifs.
Nous examinerons ici les grands principes de la conception réactive et la manière dont elle prend en
charge l'accessibilité et le changement d'appareil. Le terme "Responsive Design" a été inventé par le
concepteur et développeur web Ethan Marcotte dans son livre Responsive Web Design. Il s'agit de
l'option par défaut pour prendre en charge le changement d'appareil.
Les utilisateurs peuvent commencer à interagir avec votre produit ou service sur un ordinateur de
bureau, passer à un téléphone ou une tablette, puis revenir. Examinons de près les éléments clés du
design réactif.
En outre, les directives d'accessibilité aux contenus Web (WCAG) définissent la réactivité du Web
(appelée Reflow) comme l'un des critères de réussite en matière de contenu accessible. Un site
réactif est également mieux classé dans les résultats de recherche et est crucial pour l'optimisation
des moteurs de recherche (SEO).
Qu'est-ce que le Responsive Design ?
La conception Web réactive (aussi appelée "Responsive" ou "Responsive Design") est une approche
visant à concevoir un contenu Web qui s'affiche quelle que soit la résolution régie par l'appareil. Elle
s'effectue généralement à l'aide de points de rupture (seuils de résolution à partir desquels le
contenu s'adapte à la vue). Cliquez sur ce lien pour en savoir plus sur le Responsive design.
Les fenêtres d'affichage doivent s'adapter logiquement aux tablettes, aux téléphones et aux
ordinateurs de bureau, quelle que soit leur résolution.
Illustration des différentes tailles d'écran et de la façon dont la mise en page se réorganise en
fonction de la taille. En responsive design, vous pouvez définir des règles pour la circulation du
contenu et la modification de la mise en page en fonction de la plage de taille de l'écran.
Les conceptions réactives répondent aux changements de largeur du navigateur en ajustant le
placement des éléments de conception pour qu'ils s'adaptent à l'espace disponible. Si vous ouvrez un
site réactif sur un ordinateur de bureau et que vous modifiez la taille de la fenêtre du navigateur, le
contenu sera réorganisé de manière dynamique pour s'adapter à la fenêtre du navigateur.
Sur les téléphones mobiles, le site vérifie l'espace disponible et se présente ensuite dans la
disposition idéale. Illustration de l'eau prenant la forme de chaque récipient : une tasse, une théière,
une bouteille, un téléphone et un bureau.
Les 3 grands principes du Responsive Design
Trois grands principes régissent le responsive design. D'autres principes peuvent entrer en jeu pour
certaines conceptions, mais ces trois principes lient tous les sites responsive :
Systèmes de grilles fluides
Utilisation fluide des images
Requêtes média
Système de grille fluide
Dans la presse écrite, les éditeurs déterminent la taille de ce qui est affiché (et où) en mesures
absolues. Avec l'arrivée d'Internet, cette tendance s'est poursuivie et les concepteurs ont défini les
sites Web en pixels.
Illustration de différents écrans de résolution : 720p, 1080p et 4K. Le "p" dans "720p" et "1080p"
signifie "progressive scan" (balayage progressif), et le nombre fait référence aux dimensions en
hauteur de l'image en pixels.
Pour le responsive design, la méthode de la taille absolue ne fonctionne pas car la taille des appareils
varie. Le responsive design utilise donc des tailles relatives.
Publicité

Recommandé

Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / MobilitéAndré Dubreuil
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 

Contenu connexe

Similaire à Qu'est-ce que le Responsive Design.docx

Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieOlivier Dommange
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
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
 
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
 
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
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileWSI France
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVGChristian SUMBANG
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Julien Dereumaux
 
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
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3Talan
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Olivier Dommange
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobileLudovic Tant
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCBrioude Internet
 
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
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXNewflux UX/UI News
 
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 webdesign orienté Business
Le webdesign orienté BusinessLe webdesign orienté Business
Le webdesign orienté BusinessKhaled Djebloun
 

Similaire à Qu'est-ce que le Responsive Design.docx (20)

Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
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
 
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
 
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
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
 
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
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
 
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
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 
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 webdesign orienté Business
Le webdesign orienté BusinessLe webdesign orienté Business
Le webdesign orienté Business
 

Qu'est-ce que le Responsive Design.docx

  • 1. Qu'est-ce que le Responsive Design ? Le responsive design est une approche de la conception web dans laquelle l'interface s'adapte à la disposition de l'appareil, ce qui facilite l'utilisation, la navigation et la recherche d'informations. La réactivité est possible grâce aux media queries, qui permettent à la conception de s'adapter automatiquement à l'espace du navigateur pour garantir la cohérence du contenu sur tous les appareils, et aux éléments de conception dimensionnés en unités relatives (%). La conception réactive présente des avantages considérables, et la conception Web doit par défaut prendre en charge le changement d'appareil. Avec le responsive design, vous pouvez : Atteindre un public plus large : de nos jours, de plus en plus d'utilisateurs accèdent au web via des appareils mobiles. Économiser du temps et des efforts de développement puisque les concepteurs et les développeurs ne se concentrent que sur une seule version du design. Améliorer le référencement, car les moteurs de recherche récompensent les sites Web adaptés aux mobiles par de meilleures positions de recherche. Assurez la cohérence de la marque et du design sur tous les appareils, car il n'y a aucune chance de devoir modifier les directives pour les adapter à différentes boîtes de design. Afficher la transcription de la vidéo Pourquoi le design réactif est si populaire Au début des années 2010, les concepteurs ont dû faire face à un phénomène historique. De plus en plus d'utilisateurs commençaient à accéder à des contenus Web sur des appareils portables plutôt que sur des ordinateurs de bureau. Il existait deux grandes approches de conception pour gérer la conception sur les différents appareils : Les concepteurs peuvent créer plusieurs versions d'un design optimisé pour différents appareils et leur donner des dimensions fixes (approche de conception adaptative). Ils pouvaient travailler sur une conception unique et flexible qui s'étirerait ou rétrécirait pour s'adapter à l'écran (approche de conception réactive). Les organisations et les concepteurs ont eu du mal à ignorer les avantages de la conception réactive. Plutôt que de travailler avec des unités absolues (par exemple, des pixels) sur des versions distinctes, les concepteurs se sont concentrés sur un seul design et l'ont laissé couler comme un liquide pour remplir tous les "conteneurs"." Comprendre le langage de la conception réactive La conception réactive repose sur trois principes fondamentaux : Système de grille fluide Les systèmes de grille sont des outils utilisés par les concepteurs pour construire, concevoir, organiser les informations et créer des expériences utilisateur cohérentes. Dans le design d'interaction, les grilles à plusieurs colonnes, hiérarchiques et modulaires sont les types de grilles les plus utilisés.
  • 2. Le principe d'une grille est simple : chaque élément occupe le même pourcentage d'espace, quelle que soit la taille de l'écran, ce qui signifie que les composants peuvent être mis à l'échelle lorsque l'utilisateur change de périphérique. Dans cette image, vous pouvez voir que la version fixe du contenu a la même largeur quel que soit l'appareil alors que dans la version fluide, le contenu remplit l'espace disponible en fonction de la taille de l'appareil. Images fluides Dans la conception réactive, les images fluides sont des images qui s'adaptent à leur conteneur, ce qui signifie que lorsque le navigateur atteint un point d'arrêt, l'image s'adapte à la taille actuelle de la fenêtre. Pour les images non photographiques, comme les icônes, vous pouvez utiliser des fichiers SVG. Ces formats de fichiers sont légers et vous pouvez les adapter à n'importe quelle résolution sans perdre en qualité. Requêtes multimédias et points d'arrêt Les requêtes multimédia sont des filtres qui détectent les dimensions de l'appareil de navigation et font en sorte que votre conception soit appropriée, quelle que soit la taille de l'écran. Pour faciliter les requêtes multimédia, vous disposez de points d'arrêt : il s'agit des valeurs auxquelles le contenu de votre site Web sera réorganisé pour offrir à l'utilisateur la meilleure expérience possible. Les requêtes multimédia et les points d'arrêt vont de pair et peuvent tous deux être définis dans vos feuilles de style CSS. Pour les concepteurs, un point de rupture est une limite où la conception sera modifiée pour adapter les fonctionnalités à la nouvelle taille. Les concepteurs utilisent généralement trois tailles lors de la conception de sites Web réactifs : 1024 et plus, 1023-768, et 767-320 px. Dans cette image, vous pouvez voir comment le placement des colonnes est réorganisé en fonction de la surface d'écran disponible. Le contenu est affiché en une seule colonne sur le smartphone, deux sur la tablette et trois sur le bureau. Les requêtes multimédia fonctionnent mieux avec une approche "mobile first", qui consiste à définir ce que vous voulez sur le mobile, puis à augmenter l'échelle à partir de là. Vous devrez tester le contenu pour voir où se situent les points de rupture et les planifier. À terme, vous pourrez peut-être prédire les points d'arrêt en fonction de la résolution de l'écran d'un appareil. Meilleures pratiques et considérations pour le design réactif Avec le responsive design, la flexibilité est de mise à tous les niveaux : images, textes et mises en page. Vous devez donc Adopter une mentalité "mobile-first" : Que vous commenciez à concevoir à partir du plus petit écran ou de la version de bureau, adopter une mentalité "mobile-first" vous aide à mettre en pratique l'approche "mobile-first", un principe de conception dont le cœur est la simplicité. Une mentalité "mobile-first" implique de donner la priorité au contenu, de laisser les graphiques et les images complexes pour la version de bureau, et de créer des cibles d'effleurement adaptées aux gros doigts (30px minimum). Utilisez des graphiques vectoriels évolutifs (SVG). Il s'agit d'un format de fichier basé sur XML pour les graphiques en 2D, qui prend en charge l'interactivité et les animations. Incluez trois points d'arrêt ou plus (c'est-à-dire, concevez pour trois appareils ou plus).
  • 3. Hiérarchisez et masquez le contenu en fonction du contexte des utilisateurs. Vérifiez votre hiérarchie visuelle et utilisez la divulgation progressive et les tiroirs de navigation pour donner aux utilisateurs les éléments nécessaires en premier. Placez les éléments non essentiels au second plan. Visez le minimalisme. Appliquez des modèles de conception afin de maximiser la facilité d'utilisation pour les utilisateurs dans leurs contextes et de les familiariser plus rapidement avec le site : par exemple, le modèle de chute des colonnes adapte le contenu à de nombreux types d'écran. Visez l'accessibilité avec les tailles/styles de police. Utilisez efficacement le contraste et l'arrière-plan. Envisagez d'apprendre les échelles typographiques pour harmoniser le corps du texte et les titres. Comme certains utilisateurs ont recours à des lecteurs d'écran, faites en sorte que tout votre texte soit "réel" au lieu d'utiliser du texte dans des images. Le Responsive Design est robuste et économique, mais sa nature "facile" est trompeuse. Vous pouvez toujours rencontrer des difficultés si vous l'utilisez sans précaution. Par exemple, elle peut restreindre votre contrôle sur les tailles d'écran de la conception ; par conséquent, si vous ne définissez pas de requêtes média en amont, les éléments peuvent se déplacer indépendamment. En outre, il est courant de rencontrer des problèmes avec les formats d'annonce, en particulier sur les appareils mobiles. Néanmoins, le design réactif contribue à une excellente expérience utilisateur car, par défaut, il exige l'uniformité, l'homogénéité et la simplicité de vos efforts de conception. Il est favorable au référencement, et les multiples CMS et frameworks, tels que WordPress et Bootstrap, le rendent très économique à mettre en œuvre. En savoir plus sur le Responsive Design Suivez notre cours : Mobile UX Design : Le guide du débutant. Lisez l'analyse approfondie de Jerry Cao sur le Responsive Design, qui présente d'excellents exemples de leaders du secteur. TNW propose des considérations utiles concernant le Responsive Design, et d'autres conseils pour les concepteurs attentifs. Apprenez-en davantage sur la conception réactive et les bonnes pratiques de convivialité dans le guide de terrain sur la conception Web de Steve Krug, "Don't make me think". Apprenez tout sur les grilles, pourquoi elles sont importantes et comment les utiliser dans la conception d'interfaces. Responsive Design : Meilleures pratiques La conception réactive permet aux utilisateurs d'accéder au contenu à partir de plusieurs résolutions d'appareils. Comme de plus en plus de personnes interagissent avec les sites Web par le biais d'appareils mobiles, les utilisateurs s'attendent désormais à ce que les sites Web soient réactifs. Nous examinerons ici les grands principes de la conception réactive et la manière dont elle prend en charge l'accessibilité et le changement d'appareil. Le terme "Responsive Design" a été inventé par le concepteur et développeur web Ethan Marcotte dans son livre Responsive Web Design. Il s'agit de l'option par défaut pour prendre en charge le changement d'appareil. Les utilisateurs peuvent commencer à interagir avec votre produit ou service sur un ordinateur de bureau, passer à un téléphone ou une tablette, puis revenir. Examinons de près les éléments clés du design réactif. En outre, les directives d'accessibilité aux contenus Web (WCAG) définissent la réactivité du Web (appelée Reflow) comme l'un des critères de réussite en matière de contenu accessible. Un site
  • 4. réactif est également mieux classé dans les résultats de recherche et est crucial pour l'optimisation des moteurs de recherche (SEO). Qu'est-ce que le Responsive Design ? La conception Web réactive (aussi appelée "Responsive" ou "Responsive Design") est une approche visant à concevoir un contenu Web qui s'affiche quelle que soit la résolution régie par l'appareil. Elle s'effectue généralement à l'aide de points de rupture (seuils de résolution à partir desquels le contenu s'adapte à la vue). Les fenêtres d'affichage doivent s'adapter logiquement aux tablettes, aux téléphones et aux ordinateurs de bureau, quelle que soit leur résolution. Illustration des différentes tailles d'écran et de la façon dont la mise en page se réorganise en fonction de la taille. En responsive design, vous pouvez définir des règles pour la circulation du contenu et la modification de la mise en page en fonction de la plage de taille de l'écran. Les conceptions réactives répondent aux changements de largeur du navigateur en ajustant le placement des éléments de conception pour qu'ils s'adaptent à l'espace disponible. Si vous ouvrez un site réactif sur un ordinateur de bureau et que vous modifiez la taille de la fenêtre du navigateur, le contenu sera réorganisé de manière dynamique pour s'adapter à la fenêtre du navigateur. Sur les téléphones mobiles, le site vérifie l'espace disponible et se présente ensuite dans la disposition idéale. Illustration de l'eau prenant la forme de chaque récipient : une tasse, une théière, une bouteille, un téléphone et un bureau. Les 3 grands principes du Responsive Design Trois grands principes régissent le responsive design. D'autres principes peuvent entrer en jeu pour certaines conceptions, mais ces trois principes lient tous les sites responsive : Systèmes de grilles fluides Utilisation fluide des images Requêtes média Système de grille fluide Dans la presse écrite, les éditeurs déterminent la taille de ce qui est affiché (et où) en mesures absolues. Avec l'arrivée d'Internet, cette tendance s'est poursuivie et les concepteurs ont défini les sites Web en pixels. Illustration de différents écrans de résolution : 720p, 1080p et 4K. Le "p" dans "720p" et "1080p" signifie "progressive scan" (balayage progressif), et le nombre fait référence aux dimensions en hauteur de l'image en pixels. Pour le responsive design, la méthode de la taille absolue ne fonctionne pas car la taille des appareils varie. Le responsive design utilise donc des tailles relatives. Hiérarchisez et masquez le contenu en fonction du contexte des utilisateurs. Vérifiez votre hiérarchie visuelle et utilisez la divulgation progressive et les tiroirs de navigation pour donner aux utilisateurs les éléments nécessaires en premier. Placez les éléments non essentiels au second plan. Visez le minimalisme. Appliquez des modèles de conception afin de maximiser la facilité d'utilisation pour les utilisateurs dans leurs contextes et de les familiariser plus rapidement avec le site : par exemple, le modèle de chute des colonnes adapte le contenu à de nombreux types d'écran.
  • 5. Visez l'accessibilité avec les tailles/styles de police. Utilisez efficacement le contraste et l'arrière-plan. Envisagez d'apprendre les échelles typographiques pour harmoniser le corps du texte et les titres. Comme certains utilisateurs ont recours à des lecteurs d'écran, faites en sorte que tout votre texte soit "réel" au lieu d'utiliser du texte dans des images. Le Responsive Design est robuste et économique, mais sa nature "facile" est trompeuse. Vous pouvez toujours rencontrer des difficultés si vous l'utilisez sans précaution. Par exemple, elle peut restreindre votre contrôle sur les tailles d'écran de la conception ; par conséquent, si vous ne définissez pas de requêtes média en amont, les éléments peuvent se déplacer indépendamment. En outre, il est courant de rencontrer des problèmes avec les formats d'annonce, en particulier sur les appareils mobiles. Néanmoins, le design réactif contribue à une excellente expérience utilisateur car, par défaut, il exige l'uniformité, l'homogénéité et la simplicité de vos efforts de conception. Il est favorable au référencement, et les multiples CMS et frameworks, tels que WordPress et Bootstrap, le rendent très économique à mettre en œuvre. En savoir plus sur le Responsive Design Apprenez-en davantage sur la conception réactive et les bonnes pratiques de convivialité dans le guide de terrain sur la conception Web de Steve Krug, "Don't make me think". Apprenez tout sur les grilles, pourquoi elles sont importantes et comment les utiliser dans la conception d'interfaces. Responsive Design : Meilleures pratiques La conception réactive permet aux utilisateurs d'accéder au contenu à partir de plusieurs résolutions d'appareils. Comme de plus en plus de personnes interagissent avec les sites Web par le biais d'appareils mobiles, les utilisateurs s'attendent désormais à ce que les sites Web soient réactifs. Nous examinerons ici les grands principes de la conception réactive et la manière dont elle prend en charge l'accessibilité et le changement d'appareil. Le terme "Responsive Design" a été inventé par le concepteur et développeur web Ethan Marcotte dans son livre Responsive Web Design. Il s'agit de l'option par défaut pour prendre en charge le changement d'appareil. Les utilisateurs peuvent commencer à interagir avec votre produit ou service sur un ordinateur de bureau, passer à un téléphone ou une tablette, puis revenir. Examinons de près les éléments clés du design réactif. En outre, les directives d'accessibilité aux contenus Web (WCAG) définissent la réactivité du Web (appelée Reflow) comme l'un des critères de réussite en matière de contenu accessible. Un site réactif est également mieux classé dans les résultats de recherche et est crucial pour l'optimisation des moteurs de recherche (SEO). Qu'est-ce que le Responsive Design ? La conception Web réactive (aussi appelée "Responsive" ou "Responsive Design") est une approche visant à concevoir un contenu Web qui s'affiche quelle que soit la résolution régie par l'appareil. Elle s'effectue généralement à l'aide de points de rupture (seuils de résolution à partir desquels le contenu s'adapte à la vue). Cliquez sur ce lien pour en savoir plus sur le Responsive design. Les fenêtres d'affichage doivent s'adapter logiquement aux tablettes, aux téléphones et aux ordinateurs de bureau, quelle que soit leur résolution.
  • 6. Illustration des différentes tailles d'écran et de la façon dont la mise en page se réorganise en fonction de la taille. En responsive design, vous pouvez définir des règles pour la circulation du contenu et la modification de la mise en page en fonction de la plage de taille de l'écran. Les conceptions réactives répondent aux changements de largeur du navigateur en ajustant le placement des éléments de conception pour qu'ils s'adaptent à l'espace disponible. Si vous ouvrez un site réactif sur un ordinateur de bureau et que vous modifiez la taille de la fenêtre du navigateur, le contenu sera réorganisé de manière dynamique pour s'adapter à la fenêtre du navigateur. Sur les téléphones mobiles, le site vérifie l'espace disponible et se présente ensuite dans la disposition idéale. Illustration de l'eau prenant la forme de chaque récipient : une tasse, une théière, une bouteille, un téléphone et un bureau. Les 3 grands principes du Responsive Design Trois grands principes régissent le responsive design. D'autres principes peuvent entrer en jeu pour certaines conceptions, mais ces trois principes lient tous les sites responsive : Systèmes de grilles fluides Utilisation fluide des images Requêtes média Système de grille fluide Dans la presse écrite, les éditeurs déterminent la taille de ce qui est affiché (et où) en mesures absolues. Avec l'arrivée d'Internet, cette tendance s'est poursuivie et les concepteurs ont défini les sites Web en pixels. Illustration de différents écrans de résolution : 720p, 1080p et 4K. Le "p" dans "720p" et "1080p" signifie "progressive scan" (balayage progressif), et le nombre fait référence aux dimensions en hauteur de l'image en pixels. Pour le responsive design, la méthode de la taille absolue ne fonctionne pas car la taille des appareils varie. Le responsive design utilise donc des tailles relatives.