design Web responsive

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é. Il peut s’agir d’un moniteur d’ordinateur de bureau surdimensionné, d’un ordinateur portable ou d’appareils dotés d’écrans de petite taille 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.

Ces 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, leur site de commerce électronique, leur page Google Business, leurs pages de médias sociaux et d’autres actifs doivent être facilement accessibles. dispositifs.

Qu’est-ce que le design Web responsive ?

Le design responsive a pour objectif de créer 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. Ou des éléments peuvent être caché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 écran de smartphone minuscule, 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 responsive, 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. Donc, 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 au toucher: la conception 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: Il existe également un problème de graphisme, de publicité et de vitesse de téléchargement. Sur les appareils mobiles, il peut être judicieux d’afficher moins de graphiques que pour les vues de bureau afin qu’un site ne prenne pas toujours à charger 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 aviez peut-être 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 étude récente menée par Pew, 77% des Américains possèdent un smartphone en 2018, contre 35% seulement lors de la première enquête sur la possession de smartphones réalisée par le Pew Research Center 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 explorer en bas pour voir quels appareils envoient le trafic.)

Les modèles de conception responsive 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 responsive ». 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 responsive . Tu ne devrais pas?

Laisser un commentaire