L’un des défis séculaires de la conception Web est de créer un site qui s’affiche bien sur plusieurs plates-formes et navigateurs. Avec l’explosion des appareils mobiles, ce défi s’est intensifié en raison de la plus grande variété de systèmes d’exploitation et de navigateurs et de la gamme plus large de résolutions et de largeurs de visualisation. La conception Web réactive a évolué pour gérer ces variantes.
Table des matières
Comprendre la conception réactive
À la base, le concept de responsive web design, introduit dans l’article de 2010 d’Ethan Marcotte A List Apart, indique simplement qu’un site Web devrait fonctionner pour tous les appareils. Il ne devrait pas être nécessaire d’avoir plusieurs sites, comme un site spécialement conçu pour un moniteur de bureau et un autre conçu pour un appareil portable spécifique. Cela signifie que la mise en page d’un site correctement conçu doit être ajustée – ou répondre – à l’appareil utilisé.
Deux problèmes très importants sont résolus avec la conception Web réactive.
- Expérience utilisateur – En tant que concepteur, vous n’avez peut-être pas le contrôle sur l’appareil utilisé pour afficher votre site, mais vous devez garder le contrôle sur la conception fournie. Avec la conception Web réactive, vous y parvenez à partir d’un ensemble de code, contrairement au passé où plusieurs sites étaient créés – un pour les ordinateurs de bureau et un autre pour les appareils mobiles.
- Maintenance – La maintenance du site est également grandement simplifiée grâce à une conception réactive, car toutes les modifications apportées au site sont mises à jour dans le même ensemble de code.
Grille de conception Web réactive
L’un des nombreux grands avantages du Web est sa communauté open source qui réduit le besoin de «réinventer la roue» chaque fois qu’une nouvelle technologie émerge. Il existe un nombre important de grilles Web réactives disponibles pour les concepteurs. Ces grilles vous donnent le cadre nécessaire pour créer votre conception de site Web réactif. Il est généralement préférable de commencer par une grille, puis de l’ajuster en fonction de vos besoins.
- Pour utiliser une grille, sélectionnez celle qui correspond le plus à votre objectif.
- Si la grille choisie correspond exactement, copiez et collez simplement le HTML et le CSS dans le document et la feuille de style respectivement.
- Si ce n’est pas une correspondance parfaite, modifiez le CSS jusqu’à ce que vous ayez une grille qui fonctionne avec votre contenu.
Ce que la grille est conçue pour faire – en plus de vous faire gagner du temps lors de la création du code – est de se réduire de manière organisée sur des écrans plus petits. Il devrait s’étendre et s’étirer de manière contrôlée sur les plus gros.
Codage pour la conception réactive
Agencements fluides
Le codage pour une conception réactive repose sur l’idée de mises en page fluides, qui sont similaires aux mises en page liquides, mais elles vont plus loin.
- Dans les mises en page liquides, les pages s’agrandissaient en fonction de la résolution, mais cela ne signifiait pas qu’elles fonctionnaient toujours bien à différentes tailles.
- Les mises en page fluides utilisent des pourcentages exacts pour contrôler la largeur d’un conteneur de contenu et de sa gouttière afin qu’ils soient mesurés en proportion et pas seulement en largeurs arbitraires (comme les mises en page fixes) ou en pourcentages.
La formule de base pour une mise en page fluide est: cible / contenu = résultat. Ainsi, par exemple, si la zone cible est de 300 pixels et le conteneur de contenu est de 930 pixels, le pourcentage est de 300/930 ou 32,25.
Requêtes médias
La deuxième partie du codage traite des requêtes multimédias – un concept introduit avec CSS3. Les parties applicables des requêtes multimédias pour la conception Web réactive sont les largeur min et largeur maximale les attributs.
En utilisant ces attributs, un style spécifique peut être appliqué à un écran en fonction de sa taille. Par exemple, vous pouvez créer des styles pour la largeur minimale suivante: 240px, 400px ou 960px. Lorsqu’un utilisateur visite votre site sur un bureau, la mise en page insérée serait pour le style 960px – s’il voyait votre site sur un écran de 400px, alors les styles pour une largeur minimale de 400px seraient utilisés.
Outils de codage
Plusieurs outils sont disponibles pour vous aider à créer un site. Certains des programmes les plus populaires incluent Adobe Edge Reflow, TopStyle 5 ou WebFlow. Ces programmes effectuent le codage en coulisses requis pour que votre site puisse ajuster la taille en fonction de l’appareil sur lequel il est visualisé, ce qui vous fait gagner le temps nécessaire pour le coder.
Codage d’échantillon
En utilisant la formule ci-dessus et le largeur maximale attribut, voici quelques extraits pour vous aider à comprendre le fonctionnement du codage. Dans cet exemple, nous avons un contenu de 960 pixels de large avec deux colonnes à l’intérieur. La colonne de gauche a une largeur de 620 pixels et la colonne de droite a une largeur de 300 pixels. Il y a une marge de 10 pixels (gouttière) entre les colonnes.
HTML
CSS
.content-bien {
largeur: 960px;
}
colonne de gauche{
float: gauche;
marge: 1,04%; / * 10px ÷ 960px = .0104166 * /
largeur: 64,5833%; / * 620px ÷ 960px = .645833 * /
}
colonne de droite{
Flotter à droite;
marge: 1,04%; / * 10px ÷ 960px = .0104166 * /
largeur: 31,25%; / * 10px ÷ 960px = .0104166 * /
}
Requête média
La requête multimédia peut être configurée de plusieurs manières, notamment l’orientation (paysage ou portrait) et une méthode courante consiste à créer des styles associés à différentes largeurs. Dans ce cas, c’est le style pour un écran d’une largeur minimale de 420 px. Ce style supprime l’attribut float, forçant le contenu à s’empiler au lieu d’essayer de se positionner horizontalement. Si l’écran avait une largeur minimale de 600 px, un style créé pour cette largeur serait utilisé à la place.
@media all et (max-width: 420px) {
colonne de droite, colonne de gauche {
float: aucun;
largeur: auto;
}
}
Combiner les ressources
La conception Web réactive représente à bien des égards une libération de ressources. Les concepteurs et les développeurs ne devraient plus créer plusieurs sites pour plusieurs plates-formes. Au lieu de cela, ils peuvent combiner des ressources et collaborer pour déterminer ce pour quoi l’utilisateur final utilisera le contenu – et concevoir un site capable de fournir ces informations quel que soit l’appareil choisi par l’utilisateur final.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
