New Tips WordPress : Conception de sites Web réactifs – Qu'est-ce que c'est?

À mesure que le nombre d'appareils et de navigateurs augmente, la nécessité pour votre site Web d'être facilement accessible et utilisable sur tous les appareils augmente également.

Des grands écrans d'ordinateur à la dernière version des smartphones, votre site Web doit être facile à visualiser et encore plus facile à utiliser sur n'importe quel appareil.

Il y a quelque temps, les sites mobiles étaient la chose à faire avec votre site Web principal. Il existe maintenant une nouvelle génération de conception de sites Web appelée «Responsive Design», c'est la nouvelle façon de vous assurer que votre site Web fonctionne sur tous les appareils.

Les bases d'un site Web responsable sont:

  • HTML 5 et CSS3
  • Exigences relatives aux médias
  • Images et médias flexibles, via l'édition automatique ou CSS
  • Une disposition réseau flexible qui utilise du CSS de taille relative

La disposition du réseau devient la bible de la conception Web lors de l'utilisation d'une disposition flexible. Le système CSS relatif semble redimensionner la grille en fonction de la taille de l'écran. La plupart des gens utilisent la disposition de la grille 960 pour que la page ressemble toujours à un site Web normal, mais elle se réduit et se recharge à mesure que la taille de l'écran diminue.

La navigation est un facteur très important dans les sites Web réactifs. Combien de sites voyez-vous sur votre smartphone où vous ne pouvez même pas faire un seul mot dans la navigation? Les chances de cliquer dessus et d'atterrir sur la page de droite sont d'environ 100: 1. Eh bien, la conception de navigation réactive joue un grand rôle dans le jeu. Certains cercueils très intelligents nous ont permis d'utiliser la navigation dynamique réutilisable, qui se reconstruit également pour une utilisation sur les smartphones. La croisière ne diminue pas, mais elle devient plus visible. Les utilisateurs peuvent en fait cliquer sur les choses qu'ils veulent voir!

Les images jouent également un rôle très important dans la conception responsable. Le besoin de superbes sites Web est plus important que jamais de nos jours. Eh bien, avec des mises en page réactives, il est toujours possible d'utiliser des images, des diapositives d'images, des galeries, des carrousels d'images, des boîtes à lumière et des images de blog de manière réactive. Les images se redimensionnent et se regroupent, ce qui rend l'expérience de visionnement aussi agréable que sur un moniteur.

Il existe des cadres réactifs populaires tels que Twitter Bootsrap et Foundation sont mes favoris. Ils sont faciles à utiliser, bien définis et il existe des milliers de ressources et de didacticiels pour les aider.

La façon d'apprendre est de télécharger un framework tel que l'un des exemples ci-dessus et de créer un site à partir de zéro. Une fois que vous aurez commencé, vous vous demanderez comment vous avez réussi à rester sans réponse.