Vous êtes-vous déjà demandé «Qu'est-ce qu'une conception Web réactive?» La conception Web réactive est une approche dans laquelle un concepteur crée une page Web qui «réagit» ou se redimensionne en fonction du type de périphérique traversé. Cela pourrait être un écran d'ordinateur de bureau surdimensionné, un ordinateur portable ou des appareils avec de petits écrans tels que les smartphones et les tablettes.
La conception Web réactive est devenue un outil essentiel pour toute personne ayant une présence numérique. Avec la croissance des smartphones, tablettes et autres appareils informatiques mobiles, de plus en plus de personnes utilisent des écrans plus petits pour afficher des pages Web.
$config[code] not foundCes sites Web doivent également prendre en compte l'indice du premier mobile annoncé par Google en avril 2018. À mesure que de plus en plus de petites entreprises renforcent leur présence mobile, leur site Web, commerce électronique, page Google Business, pages de médias sociaux et autres actifs doivent être facilement accessibles. dispositifs.
Qu'est-ce que le design Web réactif?
Le design réactif a pour objectif de ne disposer que d’un site, mais avec des éléments différents qui répondent différemment lorsqu’ils sont visualisés sur des périphériques de tailles différentes.
Prenons un site Web «fixe» traditionnel. Lorsqu'il est affiché sur un ordinateur de bureau, par exemple, le site Web peut afficher trois colonnes. Mais lorsque vous affichez la même présentation sur une tablette plus petite, cela peut vous obliger à faire défiler horizontalement, ce que les utilisateurs n'aiment pas. Des éléments peuvent également être masqués ou déformés. L'impact est également compliqué par le fait que de nombreuses tablettes peuvent être visualisées en orientation portrait ou tournées de côté pour une vue en paysage.
Sur un petit écran de smartphone, les sites Web peuvent être encore plus difficiles à voir. Les grandes images peuvent «casser» la mise en page. Les sites peuvent être lents à charger sur les smartphones s'ils contiennent beaucoup de graphiques.
Toutefois, si un site utilise une conception sensible, la version de la tablette peut s’ajuster automatiquement pour n’afficher que deux colonnes. De cette façon, le contenu est lisible et facile à naviguer. Sur un smartphone, le contenu peut apparaître sous la forme d'une colonne unique, éventuellement empilée verticalement. Ou peut-être que l'utilisateur aurait la possibilité de glisser pour afficher d'autres colonnes. Les images seront redimensionnées au lieu de déformer la mise en page ou d'être tronquées.
Le point important est le suivant: avec un design réactif, le site Web s’ajuste automatiquement en fonction de l’appareil dans lequel le spectateur le voit.
Comment fonctionne le Responsive Web Design?
Les sites sensibles utilisent des grilles de fluide.Tous les éléments de page sont dimensionnés en proportion plutôt qu'en pixels. Ainsi, si vous avez trois colonnes, vous ne diriez pas exactement quelle devrait être leur largeur, mais plutôt quelle serait leur largeur par rapport aux autres colonnes. La colonne 1 devrait occuper la moitié de la page, la colonne 2, 30% et la colonne 3, par exemple.
Les supports tels que les images sont également relativement redimensionnés. Ainsi, une image peut rester dans sa colonne ou son élément de conception relatif.
Problèmes liés
Souris v. Toucher: Concevoir pour les appareils mobiles soulève également le problème de la souris par rapport au toucher. Sur les ordinateurs de bureau, l'utilisateur dispose normalement d'une souris pour naviguer et sélectionner des éléments. Sur un smartphone ou une tablette, l'utilisateur utilise principalement les doigts et touche l'écran. Ce qui peut sembler facile à sélectionner avec une souris peut être difficile à sélectionner avec un doigt sur un petit point sur un écran. Le concepteur Web doit prendre en compte le «toucher».
Graphiques et vitesse de téléchargement: En outre, il y a la question des graphiques, des annonces et de la vitesse de téléchargement. Sur les appareils mobiles, il peut être judicieux d’afficher moins de graphiques que pour les affichages de bureau afin que le chargement d’un site ne dure pas éternellement sur un smartphone. Il peut être nécessaire d’échanger des tailles d’annonces plus grandes pour des annonces plus petites.
Applications et «versions mobiles»: Par le passé, vous avez peut-être déjà pensé à créer une application pour votre site Web, par exemple une application iPad ou Android. Ou vous auriez une version mobile spécialement pour BlackBerry.
Mais avec autant d’appareils différents aujourd’hui, il devient de plus en plus difficile de créer des applications et des versions différentes pour chaque appareil et plate-forme d’exploitation.
Pourquoi les petites entreprises doivent passer à la conception Web réactive
Plus de gens utilisent des appareils mobiles. Selon une récente étude Pew, 77% des Américains possèdent un smartphone en 2018, contre 35% seulement lors de la première enquête réalisée par le Pew Research Center sur la propriété des smartphones en 2011.
Vérifiez votre trafic et vous serez peut-être simplement choqué par le nombre de visiteurs qui accèdent à votre site Web via des appareils mobiles. (Dans Google Analytics, sélectionnez "Audience" sur le côté gauche, puis "Mobile" pour voir quelle proportion du trafic provient d'appareils mobiles. Vous pouvez même faire un zoom avant pour voir quels appareils envoient le trafic.)
Les modèles de conception réactifs sont partout maintenant, à l'achat. Si, par exemple, vous avez un site WordPress, vous pouvez visiter une galerie de modèles réputée, telle que ThemeForest, et rechercher des «thèmes WordPress réactifs». Achetez-en un à moins de 50 $. Votre développeur Web peut ensuite le personnaliser pour votre logo et votre marque.
Note de la rédaction: chez Small Business Trends, nous travaillons sur un nouveau design réactif. Tu ne devrais pas?
Photo via Shutterstock
More in: Content Marketing, What Is 95 Commentaires ▼
