Nous entendons tous beaucoup ce mot « réactif » dans le domaine de la conception Web de nos jours. Les gens recommandent fortement et vont ga-ga sur l’importance d’utiliser un design réactif. Mais les débutants dans les domaines des blogs professionnels et du webmastering prennent souvent un peu de temps pour s’emparer de tout ce buzz sur ce qu’est un site Web réactif et comment en développer un.
Les gens créent souvent les thèmes de leurs sites Web à partir d’un fichier image (p. ex. PSD). Bien que toutes les conceptions de sites Web commencent comme une image, il faut faire très attention à ce que leur conception soit conforme aux principes de la réactivité et soit adaptée aux mobiles. Faisons un plongeon dans le sujet et découvrons tout sur cette question.
Eh bien, la réactivité d’un site Web fait référence à sa capacité à ajuster l’affichage en fonction de l’appareil sur lequel il est vu. Il est révolu le temps où la plupart des gens utilisaient des PC de bureau – il existe maintenant toutes sortes d’appareils. Ordinateurs de bureau, ordinateurs portables, netbooks, tablettes, mini-tablettes, lecteurs de livres électroniques, smartphones et téléphones pas si intelligents! Ouf! Trop pour ne pas s’inquiéter!
Tous ces appareils ont leurs propres tailles d’écran et résolutions spécifiques. Un site Web « rigide » ne pourra pas s’adapter (ou disons, répondre) aux différentes tailles d’écran. L’apparition de la barre de défilement horizontale dans le navigateur est l’un des signes les plus visibles que le site Web n’est pas réactif.
En revanche, le site Web avec un thème responsive pourra s’adapter et s’assurera que le contenu est facilement lisible quelle que soit la taille de l’écran.
Pas vraiment. Un thème réactif ajustera l’affichage dans le but principal que le contenu du site Web puisse être utilisé par le visiteur. Pour atteindre cet objectif, le site Web peut masquer certains de ses composants accessoires (comme la barre latérale) et modifier la taille d’autres composants (par exemple, des images, des polices, etc.)
Il est assez facile de savoir à quel point le thème de votre site Web est réactif. Il suffit de l’ouvrir sur différentes tailles d’écrans d’ordinateur et d’écrans de téléphones portables. Si vous voyez bien votre site Web et que tout le contenu est lisible, votre site Web est réactif. Si vous ne disposez pas de différents types d’appareils pour tester votre site Web, vous pouvez également utiliser le test en ligne pour la réactivité.
La réponse générale est que oui c’est très important. Mais avant de prendre la décision de faire une cure de jouvence de votre site Web pour le transformer en un site réactif, vous devez examiner vos données de trafic Web. À partir de ces données, essayez de déterminer le trafic que votre site Web reçoit des appareils mobiles. Habituellement, les sites Web sont conçus pour être utilisés sur un ordinateur de bureau / ordinateur portable – mais si vous obtenez un trafic important d’appareils tels que les tablettes / téléphones mobiles – vous devriez voir à quoi ressemble votre site Web sur de tels appareils.
À l’heure actuelle, les sites Web asiatiques reçoivent en moyenne 27% de leur trafic à partir d’appareils mobiles. Ce pourcentage serait beaucoup plus élevé pour les sites Web dans des régions comme l’Europe et les Amériques, car les appareils mobiles sont relativement beaucoup plus populaires.
Vous serez surpris que la réactivité puisse être facilement obtenue en utilisant uniquement CSS. Les normes CSS actuelles vous permettent de styliser votre site Web pour différents types d’écran. Cela signifie que vous pouvez avoir des règles CSS distinctes pour différentes tailles d’écran. Par exemple :
@media screen et (max-width: 320px) {
.primaire – barre latérale {affichage: aucun } // masquer la barre latérale lorsque la taille de l’écran est inférieure ou égale à 320 pixels
}
@ écran multimédia et (largeur minimale: 1024px) {
body {font-size: 12px} // définir la taille de la police pour les tailles d’écran supérieures à 1024px
}
Ces règles CSS personnalisées contrôleront l’apparence de votre site Web en fonction de l’espace disponible à l’écran.
Si vous décidez d’opter pour le responsive design pour votre site Web ou votre blog, vous pouvez vous attendre à avoir les avantages suivants:
- Le trafic augmentera sur votre site Web car les utilisateurs d’appareils mobiles pourront l’utiliser et peuvent décider de revenir pour de nouvelles informations. Si les utilisateurs mobiles ne peuvent pas utiliser le contenu d’un site Web, ils ne reviendront pas!
- Si vous utilisez des publicités sur votre site Web pour gagner de l’argent en ligne, vos revenus peuvent augmenter car un site Web réactif pourra également afficher des publicités sur des appareils mobiles.
- Vous n’aurez pas besoin de développer différentes versions de votre site Web ou de votre blog pour différentes plates-formes. Cela permettra également de gagner du temps sur la maintenance car plus de versions demandent plus de temps de maintenance.
- Si vous développez plusieurs versions pour différents types d’appareils, vous risquez de voir Google indexer des URL en double. Les URL différentes qui pointent vers le même contenu sont appelées URL en double. Google impose une lourde pénalité aux URL en double estimant que le contenu est également en double. La conception de sites Web responsive vous protège d’une telle pénalité.
- Vous n’avez pas à vous soucier de la détection correcte des agents, car le même site Web fonctionnera pour tous les agents du navigateur.
- Le partage d’URL sur les sites Web de médias sociaux deviendra plus facile car chaque page de votre site Web n’aura qu’une seule URL associée.
Il n’y a pas d’inconvénients significatifs de la conception réactive, sauf que les règles CSS supplémentaires peuvent augmenter la taille du fichier CSS et, par conséquent, le temps de téléchargement augmentera. Mais avec Internet plus rapide qui devient disponible partout dans le monde – je ne pense pas que cela pose de réel problème.
En responsive design, différentes images ne sont pas utilisées pour différentes tailles d’écran. Au lieu de cela, la même image est redimensionnée via CSS pour s’adapter à l’écran de l’appareil. Ainsi, les appareils mobiles devront également télécharger les mêmes images haute résolution qui sont diffusées sur les connexions de bureau.
Maintenant, nous savons que la conception réactive peut peser un peu plus sur la connexion Internet mobile, il est important que vous puissiez tester la vitesse de fonctionnement de votre conception actuelle (réactive ou non). Le meilleur outil en ligne pour tester cela est PageSpeed de Google. Cet outil peut marquer votre site Web à la fois sur des appareils de bureau et mobiles.
La plupart des sites Web de Google sont désormais réactifs. Par exemple, le site Web Chromebook utilise un design réactif. Mais Google est une entreprise pionnière de tout ce qui concerne Internet. Alors que de plus en plus d’autres entreprises reconnaissent l’importance du responsive design, les sites Web se tournent vers ce nouveau paradigme. Consultez les sites Web de la chaîne de restaurants Wendy’s, de la société de marketing entrant HubSpot et du journal Boston Globe pour vous inspirer.
Oui, de nombreux sites Web majeurs n’ont pas encore adopté le responsive design. Les exemples incluent CNN et BBC. Il s’agit de sites Web massifs et une refonte complète pour intégrer la réactivité peut nécessiter des investissements importants. Cela pourrait être la raison pour laquelle ces maisons de médias ne sont pas encore réactives.
Non, ce n’est pas vraiment cher. Si vous possédez un site Web / blog basé sur WordPress, de nombreux thèmes réactifs sont disponibles. Le thème par défaut de WordPress (c’est-à-dire TwentyThirteen) est également conçu pour être réactif. La plupart des thèmes gratuits proposés par WordPress et Blogger sont réactifs. Mais si vous utilisez un thème tiers, vous devez vérifier sa réactivité.