Contactez-nous : cliquez-ici

Le responsive design

Avec l'avènement du web mobile en quelques années, une nouvelle manière de naviguer sur internet est née. Les sites internet doivent être responsive design au risque d'être pénalisé par les navigateurs mais surtout pas les internautes. Le webdesign doit donc intégrer dès sa conception, un site mobile respectueux des standards mais également un site mobile friendly pour s'afficher aussi bien sur smartphone que sur tablette.
responsive design compatible mobiles
Le responsive design permet un meilleur affichage selon les écrans.

Calculez gratuitement le prix de votre site internet

Quel est l'intérêt du responsive design ?

La force du responsive web design est de proposer un seul et unique site internet qui s'adapte en fonction de l'écran sur lequel on le consulte. Si vous visitez un site sur votre téléphone, le design s'adapte en conséquence afin de vous fournir un confort d'utilisation meilleur. Idem sur une tablette. Un site responsive web design, s'affranchit des problématiques écrans et permet d'améliorer consédirablement l'accès à l'information pour l'internaute.

L'autre avantage d'un site responsive design, c'est le coût. En développant un site de la sorte, les économies sont réèlles. Inutile de créer un site mobile. Il suffit simplement de contraindre l'affichage de votre site pour qu'il s'adapte à n'importe quels terminaux.

D'autres avantages existent :

  • Peu de maintenance
  • Url unique
  • Conservation du référencement naturel
  • Meilleur indexation

Comme ça marche ?

En réalité, c'est très simple : le .css est un langage qui détermine l'identité graphique d'un site : couleurs, typo, architecture, etc... Le css étant séparé du code d'un site web (html, php, javascript, etc...), il est très facile de lui donner des consignes pour afficher ou pas certaines informations, selon si on est sur un smartphone ou sur une tablette et ce, peu importe le système (iOS, Android, etc...).

Ce qui permet la mise en page ce sont les media queries. En gros, ce sont des paramètres interprétés côté navigateurs (Chrome, Firefox, Internet explorer, ...), qui assurent le bon affichage selon la taille de l'écran. C'est ce que l'on appelle donc le responsive design ou site web adaptatif.

Responsive design ou site mobile ?

Comme nous avons pu le voir, le responsive webdesign permet de diminuer fortement les coûts de création d'un site. Cet avantage a aussi des inconvénients. Un site adaptatif est contraint par sa forme. Les inconvénients peuvent être des lenteurs dans le chargement des pages, dû aux images par exemple, qui même si elles sont redimenssionnées, leur chargement par le navigateur se fait à leur taille d'origine.

Le choix de créer un site mobile ou un site reponsive design est en fonction des objectifs. Un site mobile est plus rapide à charger et exploite mieux les avantages des smartphones (connexion et fonctionnalités natives du support). Mais son coût est beaucoup plus élevé. Dans un premier temps, si l'effort n'est pas utile, un site web adaptatif permet de répondre aux principales problématiques et sans surcoût.

Comment créer un site responsive design ?

Il existe plusieurs solutions techniques mais la plus courante et la plus utilisée par un intégrateur web ou un webdesigner, c'est Bootstrap. Développé à l'origine par les équipes de Twitter, le framework a été mis à la disposition de tous sur Github afin que chacun puisse créer des sites responsive plus facilement.

Bootstrap est une collection d'outils codés en html et css, de formulaires, de boutons, de navigation et d'autres éléments interactifs. Bootstrap repose sur un système de grille dont on peut adapter la largeur déclinée en 4 versions : téléphones (portrait et paysage), tablette et PC. Ce framework front end est géré par des feuilles de styles (.less) qui standardisent les élements graphiques. Il suffit ensuite d'implémenter son propre code pour créer un site web adaptatif.

Nous situer
  • Simplewebsite
  • 20 rue des Hérissons
    13530 TRETS
Suivez-nous