Responsive Webdesign

Mais qu’est-ce donc ?

Le « Responsive design » est une technique utilisant une mise en page souple (qui « étire » l’écran en s’adaptant dynamiquement au mieux) en plus des « media queries » CSS, qui appliquent différentes feuilles de style (CSS) basées sur la taille de l’écran de l’appareil.

Avec un design Responsive ou réactif, votre site web s’ajustera à n’importe quel appareil doté d’un « explorateur plein » : smartphones, tablettes (aussi bien en mode portrait que paysage), et même TV. Peu importe si la résolution de la Galaxy Tab ou de l’iPad est différente de celle de l’iPhone ou du dernier smartphone sous Android – votre site apparaîtra merveilleusement beau, à condition que le Responsive Design ait été correctement exécuté.

Ce site a d’ailleurs été codé avec un design réactif.

Parallèlement au responsive design, il existe d’autres méthodes de création de sites internet pour mobiles :

  • Site alternatif dédié au mobile, qui sera développé uniquement pour les appareils mobiles et dont l’aspect visuel pourra être différent de celui du site pour écran d’ordinateurs
  • l’application native, par contre celle-ci sera dédiée à une plateforme et diffusée par les « store » (Apple, Google, Microsoft,…). La mise en œuvre d’une application native est plus couteuse qu’un développement web.

Avantages et inconvénient du Responsive Design :

  • Développement : avec le responsive design plus la peine de détecter les différents navigateur dont les mobiles pour faire une redirection vers la version mobile
  • La maintenance sur votre site est limitée, puisque le site « desktop » et pour appareils mobile est le même, vous avez peu de modifications à faire
  • Architecture de l’Information : avec une relation unique avec le site de base, le mobile imite le site complet, en réduisant le temps qu’il faut pour s’habituer à utiliser le site mobile.
  • L’expérience utilisateur (« UX » anglais pour User eXpereience) : Le site s’ajuste à n’importe quelle taille d’écran, ce qui en fait une bonne solution de long terme pour l’expérience utilisateur avec la pléthore actuelle d’appareils (dont les hybrides mobiles / tablettes). En cachant des éléments qui ne sont pas cruciaux pour les visiteurs mobile, il les aide à satisfaire leur recherche.
  • Statistiques : Vous aurez une vue globale sur les statistiques de fréquentation de votre site internet
  • Temps de chargement : lorsque un utilisateur sur mobile consulte votre site, il télécharge souvent inutilement du code HTML et CSS, prévu pour d’autres résolutions que la sienne, il convient donc de faire attention et d’optimiser le code et les images
  • Développement : la mise en place d’un design réactif va demander un peu plus de temps, il est parfois plus facile de créer la version Responsive en partant de zéro que de convertir un site déjà existant.
  • Design : dans la mesure ou le design réactif peut prendre en compte plusieurs résolution d’écrans, il est parfois difficile au designer d’interface de prévoir et de concevoir toutes les maquettes des différentes versions.

Comments (1)

  1. Pingback: Responsive Webdesign | webmaster - Nîmes Montpellier ... | Responsive Web Design & Media queries | Scoop.it

Leave a Comment