Qu’est-ce que le Responsive Web Design ? Édition débutant

Les ménages américains ont, en moyenne, un total de 22 appareils connectés ! Étonnamment, chaque appareil peut offrir une expérience de visionnage similaire à celle des autres appareils malgré leurs tailles et fonctionnalités différentes.

Tout cela grâce au responsive design !

Qu’est-ce que la conception de sites Web réactifs ? Il est temps de se plonger dans les trois composantes essentielles du responsive web design !

Table des matières

Qu’est-ce que le Responsive Web Design ?

Arrêt! Et considérez ceci : sur quel appareil lisez-vous cet article ? Votre appareil est-il un téléphone Samsung, un iPhone, un téléviseur intelligent, un ordinateur de bureau ou une tablette ?

Comment les éléments sur la page apparaissent-ils ? Nous nous risquerions à dire que les éléments sont plutôt beaux, même sur un écran plus petit.

Il y a de nombreuses années, avant les smartphones et les appareils intelligents, les concepteurs créaient des pages Web uniquement pour les ordinateurs de bureau. Très peu d’appareils, voire aucun, avaient la capacité de navigation que nos appareils mobiles ont aujourd’hui. Cependant, si vous aviez la chance d’avoir un BlackBerry convoité (ou tout autre appareil connecté à Internet !), vous seriez probablement frustré par des sites Web avec des images soufflées et une mise en page bancale qui aurait pu apparaître parfaitement sur un site de bureau.

Heureusement, nous avons progressé depuis l’époque du BlackBerry, tout comme la conception Web !

Désormais, les concepteurs utilisent une technique appelée conception Web réactive – un terme inventé par Ethan Marcotte – pour créer des sites Web qui se redimensionnent automatiquement pour s’adapter à tous les appareils, en particulier les mobiles, avec un panoramique ou un défilement minimal.

La conception réactive vise à offrir la même expérience utilisateur, quel que soit l’appareil, qu’il s’agisse de votre Tamagotchi trompé, de votre téléphone à clapet Nokia ou de votre ordinateur portable de jeu.

(Retour au sommet.)

Conception réactive vs conception mobile d’abord

Tomayto tomahto, non ? Pas assez.

Nous allons faire une supposition folle et supposer que vous lisez ce blog sur un appareil mobile comme un téléphone.

Non, nous ne pouvons pas voir votre écran, mais nous savons que les appareils mobiles représentaient 54,4 % du trafic mondial sur les sites Web en 2021. De plus en plus de personnes utilisent leur téléphone pour effectuer des recherches en déplacement ou naviguer de manière décontractée ; par conséquent, il existe un besoin pour une technique de conception axée sur le mobile.

Mobile-first est une approche de conception réactive créée par le directeur produit de Google, Luke Wroblewski, où les concepteurs créent une expérience en ligne pour les écrans mobiles avant de concevoir pour des écrans plus grands (y compris les pages Web de bureau). Certes, le mobile-first est l’exact opposé de l’approche utilisée par les concepteurs d’antan ainsi que la conception Web réactive, qui est une conception utilisée pour créer des conceptions de bureau qui s’adaptent à tous les appareils.

Mobile-first est une méthode de conception efficace car, en général, il est plus facile d’ajouter des détails que d’en soustraire sur des tailles d’écran plus petites. Mais ce n’est pas parce qu’il est plus efficace qu’il est moins complexe.

« Le World Wide Web a été construit sur une base de capacités plutôt simples (balisage de page, style et script) déterminées par ce que les navigateurs Web peuvent prendre en charge. Les développeurs d’applications Web – désespérés d’ajouter des fonctionnalités innovantes à cet environnement – ont repoussé les limites de JavaScript, des plug-ins de navigateur et même des navigateurs Web eux-mêmes pour permettre des activités et des interactions riches en ligne. – Luke Wroblewski, Mobile First

Avouons-le, alors que nos téléphones peuvent se sentir géant dans nos poches, l’écran moyen du téléphone est de 6,3 pouces ; tandis que l’affichage moyen d’un écran d’ordinateur est de 22 à 24 pouces. Les concepteurs doivent tenir compte de l’utilisateur mobile et de ses besoins pour hiérarchiser les informations les plus vitales et optimiser l’expérience de l’utilisateur mobile. Mais à mesure que la taille de l’appareil augmente, la complexité et la fidélité de la conception augmentent également.

Les smartphones et les tablettes introduisent diverses fonctionnalités uniques que les concepteurs doivent prendre en compte au-delà de la conception d’un site de bureau. L’orientation et le positionnement de l’appareil sont toutes des fonctionnalités qui peuvent avoir un impact sur la façon dont un concepteur optimise une page mobile par rapport à une fenêtre de navigateur de bureau.

(Retour au sommet.)

Conception Web réactive

La conception Web mobile et réactive est importante – génial! Comment un designer en herbe crée-t-il un site web responsive ?

« Nous pouvons concevoir pour une expérience visuelle optimale, mais intégrer des technologies basées sur des normes dans nos conceptions pour les rendre non seulement plus flexibles, mais aussi plus adaptables au média qui les rend », déclare Ethan Marcotte.

Marcotte identifie les grilles fluides, les images flexibles et les requêtes multimédias comme les « trois ingrédients techniques d’une conception Web réactive ». Maîtrisez ces ingrédients et vous serez prêt à créer des sites Web réactifs.

(Retour au sommet.)

Requêtes multimédias

Le W3C a créé des requêtes multimédias en CSS3, permettant aux concepteurs d’inspecter les caractéristiques physiques d’un appareil et d’appliquer différents styles CSS en fonction de la taille de l’appareil.

L’interrogation des types de médias sur la feuille de style CSS d’un site Web à l’aide de @media permet de concevoir pour différents appareils.

Max-width note le point d’arrêt, ou le point auquel le contenu de votre site répondra à une taille d’appareil pour fournir à l’utilisateur la meilleure mise en page pour consommer les informations.

Pour une conception réactive, chaque taille d’écran aurait une ligne différente de règles CSS qui indiquent aux images, au texte, à la navigation, à la mise en page et aux autres fonctionnalités multimédias comment ajuster leur taille et leur orientation en fonction de l’appareil.

📌 En rapport: Qu’est-ce qu’un CSS avancé et que devez-vous apprendre ?

(Retour au sommet.)

Grilles fluides

ESPN.com a plusieurs éléments multimédias qui sont réorganisés en fonction de la fenêtre d’affichage.

Regardez n’importe quelle page Web et vous remarquerez peut-être une tendance. Les éléments multimédias sont bloqués ensemble comme si vous pouviez les saisir et déplacer un élément multimédia complet dans une mise en page.

Vous avez découvert un autre aspect du responsive design : les grilles fluides.

Les grilles sont un outil de conception courant, utilisé depuis des siècles, dans toutes les professions du design, de l’impression au Web. Les grilles sont des guides qui aident à aligner les éléments et à fournir une structure. Ainsi, une grille fluide, par opposition à une grille fixe, est un cadre pour une page web qui se réorganise automatiquement en fonction de l’appareil.

Les reportages ESPN.com sont réorganisés en fonction de la taille de la fenêtre d’affichage.

Une grille fluide, également connue sous le nom de grille flexible, utilise des boîtes réactives qui rétrécissent, se redimensionnent et fléchissent entre le point d’arrêt d’une page.

Comment est-ce possible?

Une grille fixe utilise des pixels pour indiquer à une grille d’éléments de bloc comment apparaître sur une page – quelle que soit la taille de l’écran, et 35 pixels sont très différents sur les écrans plus petits par rapport à une version de bureau. Les grilles fluides utilisaient des pourcentages pour déplacer les boîtes entre différentes tailles.

💡Grille-topie ! Les grilles sont utilisées partout ! Les designers d’intérieur utilisent des grilles pour équilibrer les conceptions de maison. Les concepteurs de journaux utilisent des grilles pour créer une hiérarchie entre les articles. Les artistes utilisent des grilles pour créer de l’art avec des règles de symétrie ou de subversion. Les concepteurs utilisent des grilles de mise en page pour cartographier les conceptions avec proportion, rythme, espace blanc et hiérarchie.

(Retour au sommet.)

Supports souples

Avez-vous déjà téléchargé une image sur Instagram ou Twitter uniquement pour voir votre précieuse mémoire déformée en un désordre granuleux et étiré ? C’est la prémisse des médias flexibles.

Les médias flexibles (ou images et vidéos réactives), un concept réalisé et perfectionné par le designer Richard Rutter, sont des médias suffisamment grands pour apparaître sur le plus grand des écrans et sont codés pour s’adapter proportionnellement sur les appareils plus petits, empêchant les recadrages extrêmes et les étirements étranges, et maintenant sa résolution et sa proportion sur différents appareils.

(Retour au sommet.)

Test de site réactif

Comme pour toutes les conceptions, il est recommandé de tester vos conceptions mobiles ou réactives avant de publier la page en direct.

Bien sûr, vous pouvez utiliser votre outil de conception Web préféré, comme Figma ou Sketch, pour afficher la maquette d’une application Web, mais il existe d’autres outils qui vous permettront d’étirer la conception à ses limites et de déterminer si une conception est vraiment sensible.

Chrome DevTool est disponible sur le navigateur Chrome.

Chrome DevTools simule les appareils mobiles et vous permet d’ajuster la taille de la fenêtre d’affichage. Tout le monde peut accéder à Chrome DevTools avec un clic droit et en choisissant « Inspecter » dans le menu contextuel. De même, le test du simulateur Xcode iOS exécute des conceptions sur différents appareils Apple, y compris tvOS et watchOS.

Les simulateurs sont excellents et servent un objectif pendant le processus de conception, mais avant le lancement final, vous devez tester sur de vrais appareils (ne jetez pas encore votre ancien iPhone !) Et sur différents navigateurs. Des tests de qualité sur différentes tailles d’écran vous permettent de déterminer l’impact de l’affichage de chaque appareil sur votre conception.

💡Parcourir les navigateurs. Ne vous arrêtez pas à Google Chrome et Apple Safari ! Il existe plusieurs navigateurs Internet, dont Mozilla Firefox, Opera, Kingpin, Tor et Iridium, que vous devriez tester pour déterminer la compatibilité de votre conception. Pourquoi? Différents navigateurs prennent en charge différentes fonctionnalités. Par exemple, Apple Safari 14 et Mozilla Firefox ont supprimé la prise en charge d’Adobe Flash en 2020, tandis que Google Chrome a continué à prendre en charge l’application jusqu’en 2021. Les tests de compatibilité croisée des navigateurs détectent de petites différences avant la publication des conceptions.

La conception réactive est une avancée de conception assez récente qui coïncide avec une approche axée sur le mobile. C’est l’une des nombreuses avancées par rapport à la conception de bureau uniquement, mais ce n’est que le début. Au fur et à mesure que la technologie portable, la réalité virtuelle, la réalité augmentée et plus encore se populariseront (comme les appareils intelligents l’ont fait autrefois !), le besoin d’une conception réactive, mobile et adaptative deviendra plus évident.

Prêt à plonger dans une carrière en conception de sites Web? Apprenez tous les outils du métier avec Skillcrush, l’école de codage et de design avec un ❤️. Notre parcours Break Into Tech Design vous apprendra à créer une conception Web réactive qui a fière allure sur tous les appareils, des montres intelligentes aux ordinateurs portables. ET vous accompagner vers votre premier emploi dans le domaine de la technologie avec des conseils de carrière individuels. Pendant tout ce temps, notre réseau d’étudiants et d’instructeurs Skillcrushing vous encouragera.

Votre carrière dans la technologie vous attend ! Rejoignez Skillcrush aujourd’hui !

(Retour au sommet.)