Table des matières
Responsive web design, quel est l'intérêt pour le web ?De nombreux aspects du comportement des utilisateurs ont été étudiés par des spécialistes du marketing et indiquent que 70% des personnes entre 18 et 45 ans surfent sur Internet non pas depuis des ordinateurs, mais depuis des tablettes et des téléphones, ce qui est un marché très vaste que l'on aime mettre de côté.
Qu'est-ce qu'une conception Web réactive ?
C'est un design qui s'adapte à n'importe quel appareil et résolution d'écran, qu'il s'agisse d'un téléphone, d'une tablette, d'un ordinateur ou d'un écran de télévision. Tout cela doit être adapté sans créer différentes versions d'un site web pour chaque appareil, mais c'est un site web unique qui doit pouvoir s'adapter.
Une façon est via le module de requêtes multimédias CSS3 qui permet le rendu du contenu en fonction des conditions telles que la résolution de l'écran
Par exemple dans le fichier de styles.css
@import url (styles.css) uniquement écran et (max-device-width: 480px);
À l'intérieur du fichier, nous commençons à définir des appareils d'une largeur maximale de 480 pixels et orientés horizontalement :
@media only screen and (max-device-width: 480px) and (orientation: landscape) {
/ * voici les styles pour cet appareil * /
}
Autre style pour écran vertical
@media only screen et (min-width: 680px) and (max-width: 979px) and (orientation: portrait) {
/ * modes * /
}
Ici, nous définissons les styles pour un iPhone 5
@media screen et (device-aspect-ratio : 40/71) {
/ * modes * /
}
L'idéal est de tout mesurer en pourcentage pour pouvoir faire un site générique sans avoir à faire autant de feuilles de style.
Une façon consiste à placer le contenu sur 80% de la largeur de l'écran, cela conservera la section de contenu sur n'importe quel appareil.
Quelques avantages et aspects à considérer
Les travaux de conception de sites Web réactifs sont un moyen de faire du référencement car nous évitons de dupliquer les liens et le contenu pour différentes versions de l'appareil, Google il l'aime bien que cela ne signifie pas que c'est nécessaire. Si nous le faisons pour les utilisateurs mobiles et non pour Google.
Pour chaque appareil, l'expérience et l'urgence sont différentes puisqu'il est utilisé à des moments différents.
Généralement, ceux qui naviguent depuis un ordinateur sont au travail ou à la maison, donc la recherche sera plus détendue et avec plus de temps pour lire et voir la bannière, celui qui navigue depuis une tablette sera sûrement un professionnel ou quelqu'un qui effectue une tâche spécifique car vous avez donc besoin de conseils ou d'informations de référence, mais pas de quelque chose qui puisse entraver votre recherche.
Alors que ceux qui naviguent par téléphone seront les plus jeunes ou les personnes beaucoup plus mobiles et chercheront des informations rapides et concrètes pour des demandes urgentes ou une recherche rapide d'informations sur un lieu, un événement ou un besoin de communication, certains de ces aspects sont révélés dans le Rapport comScore de marketing en ligne gratuit, gratuit et reflétant les tendances annuelles.
