La conception Web réactive est l’art d’optimiser un site Web pour une utilisation sur une variété d’appareils. Tout appareil doté d’un Navigateur Internet peuvent être utilisés pour visiter votre site Web. Les gens naviguent généralement sur le Web sur des ordinateurs de bureau, des tablettes et des téléphones mobiles, ce qui en fait les appareils les plus essentiels à optimiser. Les sites Web sont également parfois visibles sur les montres intelligentes, les consoles de jeux, les lecteurs de livres électroniques, les téléviseurs intelligents et de plus.
La conception Web réactive est importante depuis la sortie de l’iPhone en 2007, mais l’approche de conception n’a été inventée que 2010 par un designer nommé Ethan Marcotte. Le mois où Ethan a écrit cet article, 2,3 % de la navigation sur le Web a été effectuée sur un appareil mobile. Au moment de la rédaction (octobre 2016), le chiffre est maintenant de 48,8 %.
Techniques de conception réactives
Certaines des techniques de conception réactive incluent:
- Des grilles et un code de mise en page fluides qui permettent à la mise en page de se réorganiser et de se redimensionner automatiquement pour correspondre à la taille de l’écran.
- Accélération des temps de chargement des appareils mobiles en abandonnant des fonctionnalités complexes.
- Utilisation de différents types de Le menu de navigation. Une version mobile d’un menu de navigation doit être adaptée aux écrans tactiles.
- Assurez-vous que les boutons sont suffisamment grands sur les écrans tactiles mobiles. google pense les boutons doivent mesurer au moins 7 mm sur l’écran.
- Réorganisation des tables. Par exemple, un tableau sur un écran de bureau pourrait ressembler à ceci :
| fou | Pub | baz | |
|---|---|---|---|
| Première entrée | alpha | bêta | spectre |
| deuxième entrée | delta | epsilon | zêta |
Et sur un écran mobile, la mise en page serait arrangée comme ceci :
| Première entrée | |
| fou | alpha |
| Pub | bêta |
| baz | spectre |
| deuxième entrée | |
| fou | delta |
| Pub | epsilon |
| baz | zêta |
Outils de conception réactifs
L’outil le plus important de la boîte à outils de réponse est le CSS requête multimédia Les requêtes multimédia détectent la largeur de l’écran et vous permettent de définir des propriétés visuelles pour certaines largeurs.
La requête multimédia est une technique de bas niveau et les définir encore et encore est inutile. Pour lancer rapidement des sites Web réactifs, nous utilisons des frameworks CSS. Il y en a beaucoup de disponibles. Voici quelques exemples populaires :
Une autre façon de rendre les sites réactifs (bien que moins réactifs) consiste à utiliser javascript Bibliothèques Voici quelques exemples :
Lors du développement de sites Web réactifs, il est agréable de pouvoir afficher le site Web sur différentes tailles d’écran sans avoir à portée de main un tas d’appareils différents. Un excellent outil pour cela est mouche d’écran et le Mode de conception réactif du développeur du navigateur Firefox. Un autre utile est aussi celui de Google Test compatible avec les appareils mobiles qui analysera vos pages Web pour les problèmes liés aux utilisateurs mobiles.
site mobile séparé
Une alternative à la création d’un site Web réactif consiste à créer un site Web distinct pour les navigateurs mobiles. Habituellement, avec cette approche, il y aura un site avec une adresse comme example.com pour PC et un site avec une adresse comme m.example.com pour les appareils mobiles.
Cette approche était populaire au début de la révolution mobile, mais est lentement tombée en désuétude. En général, nous recommandons de concevoir un site unique de manière réactive pour les raisons suivantes :
- La création d’un site mobile et d’un site de bureau signifie que vous devez maintenir le contenu sur deux sites au lieu d’un.
- Optimisation du moteur de recherche cela devient plus difficile car vous devrez indiquer à Google quelle version a le contenu final. C’est possible en mettant en place des liens canoniques, mais c’est un processus assez pénible.