{"id":9957,"date":"2020-05-14T02:58:15","date_gmt":"2020-05-14T02:58:15","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/fonctionnement-de-la-conception-web-reactive\/"},"modified":"2020-05-14T02:58:15","modified_gmt":"2020-05-14T02:58:15","slug":"fonctionnement-de-la-conception-web-reactive","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/fonctionnement-de-la-conception-web-reactive\/","title":{"rendered":"Fonctionnement de la conception Web r\u00e9active"},"content":{"rendered":"

Ce n'est un secret pour personne que de plus en plus de personnes acc\u00e8dent \u00e0 Internet en utilisant leurs appareils mobiles en plus ou \u00e0 la place des ordinateurs de bureau. En fait, il y a pr\u00e8s de 7 milliards d'utilisateurs mobiles dans le monde. (Pour r\u00e9f\u00e9rence, la population mondiale est actuellement de 7,7 milliards d'habitants. C'est beaucoup d'activit\u00e9 mobile.)<\/p>\n

Mais ce qu'ils font sur ces appareils mobiles est encore plus convaincant pour les sp\u00e9cialistes du marketing comme nous.<\/p>\n

40% des consommateurs utilisent leur appareil mobile pour effectuer des recherches avant d'effectuer un achat en personne. Plus de la moiti\u00e9 ach\u00e8tent r\u00e9guli\u00e8rement avec leur smartphone et 55% des acheteurs ach\u00e8tent sur mobile apr\u00e8s avoir trouv\u00e9 des produits sur les r\u00e9seaux sociaux.<\/p>\n

En cons\u00e9quence, les entreprises qui ont des sites Web r\u00e9actifs g\u00e9n\u00e8rent plus de prospects et conservent un avantage concurrentiel croissant par rapport aux entreprises qui n'en ont pas.<\/p>\n

Mais en quoi consiste exactement la conception de sites Web r\u00e9actifs, comment cela fonctionne-t-il et pourquoi devriez-vous apporter le changement? Ce guide vise \u00e0 r\u00e9pondre \u00e0 ces questions, \u00e0 proposer des statistiques convaincantes et \u00e0 vous enseigner les principales caract\u00e9ristiques d'une conception r\u00e9active que chaque responsable marketing devrait conna\u00eetre. Commen\u00e7ons.<\/p>\n

La conception de sites Web r\u00e9actifs n'est plus une suggestion: c'est un investissement essentiel pour accro\u00eetre la notori\u00e9t\u00e9 de la marque, diversifier votre exp\u00e9rience utilisateur (UX) et convertir davantage de visiteurs du site. <\/p>\n

Cela permet \u00e9galement \u00e0 votre entreprise de gagner un temps pr\u00e9cieux. Vous ne pourrez peut-\u00eatre pas concevoir un site Web distinct pour chaque appareil potentiel que vos visiteurs pourraient utiliser, sans parler des technologies futures. La conception Web r\u00e9active garantit que votre site Web est compatible avec tous les appareils et \u00e9crans pour assurer une exp\u00e9rience agr\u00e9able … \u00e0 la fois moderne et appareils qui n'ont pas encore \u00e9t\u00e9 invent\u00e9s.<\/p>\n

Allons plus loin dans parce que<\/i> Le design r\u00e9actif est si important aujourd'hui.<\/p>\n

<\/span>Pourquoi la conception de sites Web r\u00e9actifs est importante<\/span><\/h2>\n

La conception r\u00e9active vous permet d'atteindre un public plus large et plus engag\u00e9 o\u00f9 et comment ils pr\u00e9f\u00e8rent naviguer.<\/p>\n

Plus important encore, le manque de conception Web r\u00e9active peut faire le contraire: il peut ali\u00e9ner votre site Web des clients \u00e0 la recherche d'une exp\u00e9rience mobile attrayante. En fait, la recherche montre que vous pouvez perdre jusqu'\u00e0 90% de vos prospects en raison d'une mauvaise exp\u00e9rience optimis\u00e9e pour les appareils mobiles.<\/p>\n

Il existe de nombreux clients et revenus.<\/p>\n

D\u00e9couvrons les trois principaux avantages de la conception Web r\u00e9active.<\/p>\n

<\/span>\n
1. La conception Web r\u00e9active aide les consommateurs \u00e0 d\u00e9couvrir votre site Web.<\/span><\/h3>\n

De nombreuses personnes acc\u00e8dent \u00e0 Google sur leurs appareils mobiles, en fait, 63%. Google p\u00e9nalise \u00e9galement les sites Web qui n'offrent pas de design r\u00e9actif. Votre indexation mobile en premier peut vraiment affecter le classement de votre site Web et peut le faire r\u00e9tr\u00e9cir sur les pages de r\u00e9sultats des moteurs de recherche (SERP) au profit des sites Web qui offrent aux consommateurs une conception adapt\u00e9e aux mobiles.<\/p>\n

Donc, si la majorit\u00e9 de votre public effectue une recherche sur son smartphone (comme l'indique la statistique ci-dessus), et que leur site Web ne pr\u00e9sente pas de conception r\u00e9active, les clients peuvent ne pas trouver votre site Web du tout.<\/p>\n

<\/span>\n
2. La conception Web r\u00e9active garde les acheteurs sur votre site Web plus longtemps.<\/span><\/h3>\n

Les taux de rebond des sites Web sur les smartphones sont de pr\u00e8s de 40% (contre seulement 27% pour les tablettes). De plus, une page Web qui se charge en cinq secondes ou moins garantit 70% de sessions de visualisation en plus. <\/p>\n

Les utilisateurs d'appareils mobiles attendent des exp\u00e9riences de site Web rapides et de haute qualit\u00e9 (tout comme Google), des attentes auxquelles une conception de site Web r\u00e9active peut r\u00e9pondre. <\/p>\n

<\/span>\n
3. La conception de sites Web r\u00e9actifs g\u00e9n\u00e8re une reconnaissance de marque positive et une confiance avec les consommateurs.<\/span><\/h3>\n

Enfin, 57% des consommateurs disent qu'ils ne sont pas susceptibles de recommander une entreprise avec un site Web mobile mal con\u00e7u. Le m\u00eame rapport montre que plus de la moiti\u00e9 des acheteurs en ligne d\u00e9\u00e7us par la pr\u00e9sence en ligne d'une entreprise sont susceptibles de penser n\u00e9gativement \u00e0 l'entreprise elle-m\u00eame. <\/p>\n

La conception de site Web r\u00e9active ravit les acheteurs en ligne, les encourage \u00e0 recommander votre entreprise et les incite \u00e0 racheter davantage.<\/p>\n

<\/span>Comment cr\u00e9er une conception Web r\u00e9active<\/span><\/h2>\n

Cette est<\/i> possible de rendre votre propre site Web r\u00e9actif en utilisant CSS et HTML. Mais c'est comme prendre de longues routes quand une autoroute est disponible. Dans ce cas, l'autoroute serait un syst\u00e8me de gestion de contenu (CMS) ou un constructeur de site Web. <\/p>\n

Un CMS est un logiciel qui vous permet de cr\u00e9er votre site Web sans savoir comment coder, et qui comprend savoir comment coder pour une conception r\u00e9active. Les constructeurs de sites sont des outils similaires, mais ils renoncent \u00e0 certaines fonctionnalit\u00e9s qu'un CMS offre en \u00e9change d'une facilit\u00e9 d'utilisation et de prix plus bas.<\/p>\n

La conception Web r\u00e9active peut \u00eatre r\u00e9alis\u00e9e \u00e0 l'aide d'un CMS ou d'un constructeur de site qui facilite les conceptions r\u00e9actives. Voici quelques options courantes.<\/p>\n

<\/span>\n
1. CMS Hub<\/span><\/h3>\n

CMS Hub est un CMS enti\u00e8rement h\u00e9berg\u00e9 et enti\u00e8rement int\u00e9gr\u00e9. Il se connecte \u00e0 vos autres outils HubSpot afin que vous puissiez pr\u00e9senter une exp\u00e9rience unifi\u00e9e de marketing, de vente, de service et de navigation sur le site pour vos visiteurs, clients et employ\u00e9s.<\/p>\n

En termes d'exp\u00e9rience de cr\u00e9ation de site, CMS Hub propose des th\u00e8mes de sites Web pr\u00e9d\u00e9finis qui sont \u00e9galement optimis\u00e9s pour les appareils mobiles afin de satisfaire vos visiteurs et clients partout, quel que soit l'endroit o\u00f9 ils naviguent.<\/p>\n

\"comment<\/p>\n

La source<\/p>\n

<\/span>\n
2. WordPress<\/span><\/h3>\n

WordPress est le CMS le plus populaire au monde et maintient ce superlatif en proposant l'un des cr\u00e9ateurs de sites Web les plus directs: l'\u00e9diteur Gutenberg.<\/p>\n

WordPress propose des milliers de th\u00e8mes et de mod\u00e8les pour vous aider \u00e0 d\u00e9marrer, y compris de nombreux mod\u00e8les avec un design r\u00e9actif. <\/p>\n

\"comment<\/p>\n

La source<\/p>\n

Remarque<\/strong>: Une fois que vous avez configur\u00e9 un th\u00e8me pour votre site Web WordPress, engagez et convertissez vos visiteurs avec des formulaires gratuits, un chat en direct, un marketing par e-mail et des analyses en ajoutant le plugin HubSpot WordPress.<\/p>\n

<\/span>\n
3. Squarespace<\/span><\/h3>\n

Squarespace est un cr\u00e9ateur de site populaire offrant d'excellentes dispositions de site et des outils cr\u00e9atifs. <\/p>\n

Squarespace propose 60 mod\u00e8les optimis\u00e9s pour les mobiles \u00e0 partir desquels vous pouvez choisir de cr\u00e9er rapidement votre site. Dans l'\u00e9diteur Squarespace, vous pouvez \u00e9galement effectuer la transition du bureau \u00e0 la tablette en vue mobile pour vous assurer que vos conceptions r\u00e9pondent parfaitement \u00e0 diff\u00e9rents appareils.<\/p>\n

\"comment<\/p>\n

La source<\/p>\n

<\/span>\n
4. Wix<\/span><\/h3>\n

Wix est un autre constructeur de site qui propose des abonnements \u00e0 des sites Web gratuits et payants. Il fournit un \u00e9diteur de glisser-d\u00e9poser facile \u00e0 utiliser, un h\u00e9bergement gratuit et des fonctionnalit\u00e9s de s\u00e9curit\u00e9.<\/p>\n

Tous les mod\u00e8les Wix offrent aux visiteurs une exp\u00e9rience optimis\u00e9e pour les mobiles. Comme Squarespace, l'\u00e9diteur Wix vous permet de voir \u00e0 quoi ressemble votre site Web sur plusieurs appareils.<\/p>\n

\"comment<\/p>\n

La source<\/p>\n

En plus de cr\u00e9er une conception Web r\u00e9active \u00e0 l'aide de l'un des outils CMS ou des constructeurs de sites ci-dessus, lisez cet article de blog pour savoir comment optimiser<\/i> leur site Web pour une utilisation mobile, aussi. <\/p>\n

<\/span>Meilleures pratiques de conception de sites Web r\u00e9actifs<\/span><\/h2>\n

Avec un CMS intuitif ou un constructeur de site, la conception r\u00e9active est facile. Mais m\u00eame si vous utilisez le meilleur CMS, vous ne pouvez pas compenser le contenu et les m\u00e9dias optimis\u00e9s pour les mobiles; Cette partie d\u00e9pend de vous. Parlons de quelques bonnes pratiques de conception Web r\u00e9active pour vous aider \u00e0 cr\u00e9er l'exp\u00e9rience Web la plus adapt\u00e9e aux mobiles pour vos visiteurs et clients.<\/p>\n

<\/span>\n
1. Ne n\u00e9gligez pas vos boutons.<\/span><\/h3>\n

Que voulez-vous que les visiteurs du site fassent lorsqu'ils arrivent sur votre site Web? Passez \u00e0 l'action, non? Cela pourrait \u00eatre en cliquant sur un appel \u00e0 l'action (CTA) comme Apprendre encore plus<\/i>, T\u00e9l\u00e9charger<\/i>, ou Acheter<\/i>.<\/p>\n

Comment les visiteurs du site interagissent-ils avec ces boutons lorsqu'ils se trouvent sur votre site de bureau? Si ces CTA apparaissent, d\u00e9filent ou se trouvent au bas de votre site Web, vous devrez peut-\u00eatre r\u00e9\u00e9valuer la fa\u00e7on dont les visiteurs mobiles peuvent y acc\u00e9der.<\/p>\n

Par exemple, supposons que vous proposiez un CTA principal comme Obtenez HubSpot gratuit<\/i> en haut de votre site de bureau o\u00f9 les visiteurs peuvent voir si \u00e0 partir de chaque page.<\/p>\n

\"Hubspot<\/p>\n

Cependant, lorsque vous voyez votre site mobile, il ne rentre pas dans l'en-t\u00eate. Au lieu de le supprimer enti\u00e8rement, envisagez de d\u00e9placer le bouton ou de l'inclure dans votre menu de burger (les trois lignes dans le coin sup\u00e9rieur) o\u00f9 les visiteurs peuvent toujours le voir et cliquer dessus.<\/p>\n

\"meilleures<\/p>\n

Tenez \u00e9galement compte de la taille des zones cliquables sur votre site mobile. Contrairement \u00e0 un ordinateur de bureau, o\u00f9 les visiteurs peuvent utiliser le curseur de la souris pour cliquer sur des boutons et des liens, ils utilisent leurs doigts pour naviguer sur votre site Web sur leur smartphone ou tablette.<\/p>\n

Il est recommand\u00e9 que les \u00e9l\u00e9ments cliquables sur les appareils mobiles aient une hauteur d'au moins 48 pixels. Cela inclut les boutons, les champs de formulaire, les liens en ligne et la navigation dans les menus.<\/p>\n

<\/span>\n
2. Utilisez des graphiques vectoriels \u00e9volutifs.<\/span><\/h3>\n

Si votre site Web comprend des illustrations ou des ic\u00f4nes, elles doivent \u00eatre format\u00e9es en graphiques vectoriels \u00e9volutifs (SVG).<\/p>\n

\"responsive<\/p>\n

La source<\/p>\n

Les SVG peuvent \u00eatre mis \u00e0 l'\u00e9chelle \u00e0 l'infini, contrairement \u00e0 d'autres formats de m\u00e9dias comme JPG et PNG. Cela garantit que votre site Web offre une exp\u00e9rience de navigation de haute qualit\u00e9 aux utilisateurs sur n'importe quel appareil. Ils aident \u00e9galement votre site \u00e0 se charger plus rapidement, ce dont nous avons d\u00e9j\u00e0 discut\u00e9 est une bonne chose pour l'exp\u00e9rience utilisateur et le classement SERP.<\/p>\n

<\/span>\n
3. Assurez-vous que vos images sont \u00e0 l'\u00e9chelle.<\/span><\/h3>\n

Les illustrations et les ic\u00f4nes ne sont pas le seul type de m\u00e9dia \u00e0 redimensionner sur diff\u00e9rents appareils. Vos images doivent \u00e9galement \u00eatre mises \u00e0 l'\u00e9chelle. <\/p>\n

Par exemple, les sites Web de bureau peuvent n\u00e9cessiter des images \u00e0 1 200 pixels, tandis que les sites Web mobiles peuvent en avoir besoin \u00e0 400 pixels. L'utilisation d'une r\u00e9solution plus \u00e9lev\u00e9e sur tous les appareils peut r\u00e9duire la vitesse de la page, de sorte que cette approche n'est pas recommand\u00e9e.<\/p>\n

\"Meilleures<\/p>\n

La source<\/p>\n

Au lieu de cela, envisagez de charger diff\u00e9rentes r\u00e9solutions d'image et de d\u00e9signer l'image que vous souhaitez afficher sur chaque appareil. Ceci est g\u00e9n\u00e9ralement accompli en attribuant diff\u00e9rentes balises "multim\u00e9dia" \u00e0 des objets "source" sp\u00e9cifiques (par exemple une tablette ou un appareil mobile) dans le code de votre site Web.<\/p>\n

Remarque<\/strong>: HubSpot permet le redimensionnement automatique de l'image dans le contenu, encore une autre raison de cr\u00e9er votre site Web r\u00e9actif dans CMS Hub!<\/p>\n

<\/span>\n
4. Tenez compte de votre typographie.<\/span><\/h3>\n

Une police qui a fi\u00e8re allure sur votre site de bureau peut ne pas \u00eatre aussi bien lue sur un appareil mobile d'un quart de la taille. Si les visiteurs ne peuvent pas lire votre site Web, ils ne cliqueront ni n'ach\u00e8teront rien. <\/p>\n

\"typographie<\/p>\n

La source<\/p>\n

Alternativement, la combinaison des polices de votre site Web avec l'exp\u00e9rience mobile peut laisser vos utilisateurs de bureau avec des mots laids qui sont trop gros et entrer en collision avec votre marque.<\/p>\n

Voici nos meilleurs conseils pour une typographie de conception Web r\u00e9active:<\/p>\n