Ce n'est un secret pour personne que de plus en plus de personnes accèdent à Internet en utilisant leurs appareils mobiles en plus ou à la place des ordinateurs de bureau. En fait, il y a près de 7 milliards d'utilisateurs mobiles dans le monde. (Pour référence, la population mondiale est actuellement de 7,7 milliards d'habitants. C'est beaucoup d'activité mobile.)
Mais ce qu'ils font sur ces appareils mobiles est encore plus convaincant pour les spécialistes du marketing comme nous.
40% des consommateurs utilisent leur appareil mobile pour effectuer des recherches avant d'effectuer un achat en personne. Plus de la moitié achètent régulièrement avec leur smartphone et 55% des acheteurs achètent sur mobile après avoir trouvé des produits sur les réseaux sociaux.
En conséquence, les entreprises qui ont des sites Web réactifs génèrent plus de prospects et conservent un avantage concurrentiel croissant par rapport aux entreprises qui n'en ont pas.
Mais en quoi consiste exactement la conception de sites Web réactifs, comment cela fonctionne-t-il et pourquoi devriez-vous apporter le changement? Ce guide vise à répondre à ces questions, à proposer des statistiques convaincantes et à vous enseigner les principales caractéristiques d'une conception réactive que chaque responsable marketing devrait connaître. Commençons.
La conception de sites Web réactifs n'est plus une suggestion: c'est un investissement essentiel pour accroître la notoriété de la marque, diversifier votre expérience utilisateur (UX) et convertir davantage de visiteurs du site.
Cela permet également à votre entreprise de gagner un temps précieux. Vous ne pourrez peut-être pas concevoir un site Web distinct pour chaque appareil potentiel que vos visiteurs pourraient utiliser, sans parler des technologies futures. La conception Web réactive garantit que votre site Web est compatible avec tous les appareils et écrans pour assurer une expérience agréable … à la fois moderne et appareils qui n'ont pas encore été inventés.
Allons plus loin dans parce que Le design réactif est si important aujourd'hui.
Pourquoi la conception de sites Web réactifs est importante
La conception réactive vous permet d'atteindre un public plus large et plus engagé où et comment ils préfèrent naviguer.
Plus important encore, le manque de conception Web réactive peut faire le contraire: il peut aliéner votre site Web des clients à la recherche d'une expérience mobile attrayante. En fait, la recherche montre que vous pouvez perdre jusqu'à 90% de vos prospects en raison d'une mauvaise expérience optimisée pour les appareils mobiles.
Il existe de nombreux clients et revenus.
Découvrons les trois principaux avantages de la conception Web réactive.
1. La conception Web réactive aide les consommateurs à découvrir votre site Web.
De nombreuses personnes accèdent à Google sur leurs appareils mobiles, en fait, 63%. Google pénalise également les sites Web qui n'offrent pas de design réactif. Votre indexation mobile en premier peut vraiment affecter le classement de votre site Web et peut le faire rétrécir sur les pages de résultats des moteurs de recherche (SERP) au profit des sites Web qui offrent aux consommateurs une conception adaptée aux mobiles.
Donc, si la majorité de votre public effectue une recherche sur son smartphone (comme l'indique la statistique ci-dessus), et que leur site Web ne présente pas de conception réactive, les clients peuvent ne pas trouver votre site Web du tout.
2. La conception Web réactive garde les acheteurs sur votre site Web plus longtemps.
Les taux de rebond des sites Web sur les smartphones sont de près 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.
Les utilisateurs d'appareils mobiles attendent des expériences de site Web rapides et de haute qualité (tout comme Google), des attentes auxquelles une conception de site Web réactive peut répondre.
3. La conception de sites Web réactifs génère une reconnaissance de marque positive et une confiance avec les consommateurs.
Enfin, 57% des consommateurs disent qu'ils ne sont pas susceptibles de recommander une entreprise avec un site Web mobile mal conçu. Le même rapport montre que plus de la moitié des acheteurs en ligne déçus par la présence en ligne d'une entreprise sont susceptibles de penser négativement à l'entreprise elle-même.
La conception de site Web réactive ravit les acheteurs en ligne, les encourage à recommander votre entreprise et les incite à racheter davantage.
Comment créer une conception Web réactive
Cette est possible de rendre votre propre site Web réactif 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ème de gestion de contenu (CMS) ou un constructeur de site Web.
Un CMS est un logiciel qui vous permet de créer votre site Web sans savoir comment coder, et qui comprend savoir comment coder pour une conception réactive. Les constructeurs de sites sont des outils similaires, mais ils renoncent à certaines fonctionnalités qu'un CMS offre en échange d'une facilité d'utilisation et de prix plus bas.
La conception Web réactive peut être réalisée à l'aide d'un CMS ou d'un constructeur de site qui facilite les conceptions réactives. Voici quelques options courantes.
1. CMS Hub
CMS Hub est un CMS entièrement hébergé et entièrement intégré. Il se connecte à vos autres outils HubSpot afin que vous puissiez présenter une expérience unifiée de marketing, de vente, de service et de navigation sur le site pour vos visiteurs, clients et employés.
En termes d'expérience de création de site, CMS Hub propose des thèmes de sites Web prédéfinis qui sont également optimisés pour les appareils mobiles afin de satisfaire vos visiteurs et clients partout, quel que soit l'endroit où ils naviguent.
La source
2. WordPress
WordPress est le CMS le plus populaire au monde et maintient ce superlatif en proposant l'un des créateurs de sites Web les plus directs: l'éditeur Gutenberg.
WordPress propose des milliers de thèmes et de modèles pour vous aider à démarrer, y compris de nombreux modèles avec un design réactif.
La source
Remarque: Une fois que vous avez configuré un thème 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.
3. Squarespace
Squarespace est un créateur de site populaire offrant d'excellentes dispositions de site et des outils créatifs.
Squarespace propose 60 modèles optimisés pour les mobiles à partir desquels vous pouvez choisir de créer rapidement votre site. Dans l'éditeur Squarespace, vous pouvez également effectuer la transition du bureau à la tablette en vue mobile pour vous assurer que vos conceptions répondent parfaitement à différents appareils.
La source
4. Wix
Wix est un autre constructeur de site qui propose des abonnements à des sites Web gratuits et payants. Il fournit un éditeur de glisser-déposer facile à utiliser, un hébergement gratuit et des fonctionnalités de sécurité.
Tous les modèles Wix offrent aux visiteurs une expérience optimisée pour les mobiles. Comme Squarespace, l'éditeur Wix vous permet de voir à quoi ressemble votre site Web sur plusieurs appareils.
La source
En plus de créer une conception Web réactive à l'aide de l'un des outils CMS ou des constructeurs de sites ci-dessus, lisez cet article de blog pour savoir comment optimiser leur site Web pour une utilisation mobile, aussi.
Meilleures pratiques de conception de sites Web réactifs
Avec un CMS intuitif ou un constructeur de site, la conception réactive est facile. Mais même si vous utilisez le meilleur CMS, vous ne pouvez pas compenser le contenu et les médias optimisés pour les mobiles; Cette partie dépend de vous. Parlons de quelques bonnes pratiques de conception Web réactive pour vous aider à créer l'expérience Web la plus adaptée aux mobiles pour vos visiteurs et clients.
1. Ne négligez pas vos boutons.
Que voulez-vous que les visiteurs du site fassent lorsqu'ils arrivent sur votre site Web? Passez à l'action, non? Cela pourrait être en cliquant sur un appel à l'action (CTA) comme Apprendre encore plus, Télécharger, ou Acheter.
Comment les visiteurs du site interagissent-ils avec ces boutons lorsqu'ils se trouvent sur votre site de bureau? Si ces CTA apparaissent, défilent ou se trouvent au bas de votre site Web, vous devrez peut-être réévaluer la façon dont les visiteurs mobiles peuvent y accéder.
Par exemple, supposons que vous proposiez un CTA principal comme Obtenez HubSpot gratuit en haut de votre site de bureau où les visiteurs peuvent voir si à partir de chaque page.
Cependant, lorsque vous voyez votre site mobile, il ne rentre pas dans l'en-tête. Au lieu de le supprimer entièrement, envisagez de déplacer le bouton ou de l'inclure dans votre menu de burger (les trois lignes dans le coin supérieur) où les visiteurs peuvent toujours le voir et cliquer dessus.
Tenez également compte de la taille des zones cliquables sur votre site mobile. Contrairement à un ordinateur de bureau, où 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.
Il est recommandé que les éléments 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.
2. Utilisez des graphiques vectoriels évolutifs.
Si votre site Web comprend des illustrations ou des icônes, elles doivent être formatées en graphiques vectoriels évolutifs (SVG).
La source
Les SVG peuvent être mis à l'échelle à l'infini, contrairement à d'autres formats de médias comme JPG et PNG. Cela garantit que votre site Web offre une expérience de navigation de haute qualité aux utilisateurs sur n'importe quel appareil. Ils aident également votre site à se charger plus rapidement, ce dont nous avons déjà discuté est une bonne chose pour l'expérience utilisateur et le classement SERP.
3. Assurez-vous que vos images sont à l'échelle.
Les illustrations et les icônes ne sont pas le seul type de média à redimensionner sur différents appareils. Vos images doivent également être mises à l'échelle.
Par exemple, les sites Web de bureau peuvent nécessiter des images à 1 200 pixels, tandis que les sites Web mobiles peuvent en avoir besoin à 400 pixels. L'utilisation d'une résolution plus élevée sur tous les appareils peut réduire la vitesse de la page, de sorte que cette approche n'est pas recommandée.
La source
Au lieu de cela, envisagez de charger différentes résolutions d'image et de désigner l'image que vous souhaitez afficher sur chaque appareil. Ceci est généralement accompli en attribuant différentes balises "multimédia" à des objets "source" spécifiques (par exemple une tablette ou un appareil mobile) dans le code de votre site Web.
Remarque: HubSpot permet le redimensionnement automatique de l'image dans le contenu, encore une autre raison de créer votre site Web réactif dans CMS Hub!
4. Tenez compte de votre typographie.
Une police qui a fière allure sur votre site de bureau peut ne pas être 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èteront rien.
La source
Alternativement, la combinaison des polices de votre site Web avec l'expérience mobile peut laisser vos utilisateurs de bureau avec des mots laids qui sont trop gros et entrer en collision avec votre marque.
Voici nos meilleurs conseils pour une typographie de conception Web réactive:
-
Le type de corps à 16 points est la règle de base pour le contenu Web pour ordinateur et mobile.
-
Évitez les polices super fines qui s'estompent sur les petits écrans.
-
Assurez-vous que tous les titres sont clairement plus gros que le contenu du corps et les sous-titres.
-
Utilisez des couleurs contrastées pour votre typographie afin qu'elle ne se fane pas dans les couleurs d'arrière-plan de votre site Web.
5. Profitez des fonctionnalités de l'appareil.
Bien que les prospects et les clients ne puissent pas vous appeler sur leurs ordinateurs, ils le peuvent certainement sur leurs smartphones. Pensez à modifier votre CTA et à inclure votre numéro de téléphone professionnel au lieu de l'adresse e-mail.
De plus, si votre entreprise dispose d'une application mobile, demandez aux visiteurs du site d'ouvrir votre application à partir de leur site Web, ce qu'ils ne pourront peut-être pas faire sur leur ordinateur.
6. Testez fréquemment votre site Web.
Comme toujours, testez votre site Web réactif sur différents appareils et navigateurs. Vérifiez l'outil de test des appareils mobiles de Google pour voir comment fonctionne votre site.
Cet outil pratique de Matt Kersley fournira également un aperçu de votre site Web sur des appareils de différentes tailles. Bien sûr, vous pouvez également utiliser vos propres appareils mobiles.
Modèles de conception de sites Web réactifs
La meilleure façon de vous assurer que votre site Web est réactif consiste à commencer par un modèle de conception Web réactif. Vous trouverez ci-dessous cinq magnifiques modèles disponibles sur HubSpot Asset Marketplace qui offriront aux visiteurs de votre site une expérience de navigation adaptée aux mobiles.
1. Modèle de conception responsive DjanGo
Prix: 200 $
Le modèle DjanGo est un modèle de site entièrement personnalisable et réactif. Son design moderne et minimaliste permet aux visiteurs de se concentrer sur le contenu de votre site et les informations sur les produits.
2. Modèle de conception adaptative Prodigy
Prix: Gratuit
Le modèle Prodigy est un modèle de site Web propre qui atteint votre public avec des médias brillants et plusieurs CTA. Convertit automatiquement votre conception pour l'adapter à n'importe quel appareil utilisé par les visiteurs de votre site.
3. Modèle de conception réactif quantique
Prix: 75 $
Le modèle Quantum est un thème polyvalent qui capture votre public avec des titres en gras et un arrière-plan vidéo. Personnalisez votre site avec une variété de mises en page et de modules personnalisés.
4. Modèle de conception adaptative du Kalahari
Prix: 199 $
Le modèle Kalahari est un thème réactif qui offre une navigation dynamique et une personnalisation au niveau de la page. Utilisez ce modèle pour convertir votre audience avec des CTA brillants et exceptionnels.
5. Modèle de conception de cadre de démarrage réactif
Prix: Gratuit
Le modèle Startup Framework est un modèle de site Web unique avec une police de caractères audacieuse et des graphiques brillants. Construisez-le nativement dans l'éditeur de contenu de HubSpot et choisissez parmi des milliers d'icônes et des dizaines de modules personnalisés.
Répondez à votre public avec un design réactif
Avec autant de consommateurs qui achètent et naviguent sur leurs appareils mobiles, le design réactif est un must. Sans cela, vous pourriez perdre des prospects, des clients et des revenus.
Utilisez ces outils, modèles et meilleures pratiques pour commencer dès aujourd'hui avec une conception Web réactive.
