Blog Flux RSS WebTV
Accès réservé
Mot de passe oublié?

Vous êtes dans : Accueil > Lettres d'informations > Articles > Lettre d'infos EPN - fév 2013 > Qu'est-ce que le "responsive design" ?

Qu'est-ce que le "responsive design" ?

La prolifération de nouveaux supports et périphériques (grands et petits écrans, smartphones, tablettes...) oblige les designers web à prendre en considération de nombreuses contraintes, la première étant la dimension différente de l’écran de tous ces supports.
Le principe du responsive design est simple : un même site doit pouvoir s'adapter aux différentes résolutions d'écrans qui composent désormais notre quotidien, du smartphone à la télévision connectée, en passant par l'écran d'ordinateur.

Le responsive design est une méthode qui consiste à concevoir les pages d’un site de façon à ce qu’elles s’affichent automatiquement de façon adaptée en fonction du terminal, de la résolution de l’écran, et du navigateur sur lequel elles sont appelées, sans qu’il soit nécessaire de développer plusieurs versions différentes d’un même site.

Même sans être développeur, il peut être intéressant de voir à quoi ressemble votre site internet sur différents terminaux. Si l'on n'a pas la chance d'avoir sous la main un smartphone, une tablette... il existe des émulateurs qui permettent de tester un site sur plusieurs terminaux.

Quelques sites web permettant de tester des sites :

  • Quirktools : grand choix de tailles d'écrans, de type de téléphones ou de tablettes,
  • Responsinator : propose aussi d’insérer un raccourci dans sa barre de favoris pour tester rapidement des sites à la volée.
  • Mattkersley : interface basique, mais présente l'avantage de montrer plusieurs tailles d'écrans en même temps.

Bien entendu, ces services ne reproduisent pas à 100 % l'expérience utilisateur, mais donnent quand même un bon aperçu dont on peut tenir compte lors de la création d'un site web.

 

Un bon exemple : Smashing Magazine

Faites l'expérience ! Cliquez sur cette image, puis réduisez la taille de la fenêtre avec votre souris. Vous vous apercevrez qu'au fur et à mesure, le site s'adapte à la taille de l'écran. Pour les plus petites tailles, seuls les contenus les plus intéressants restent affichés sur la page. Si vous visionnez cette technologie pour la première fois, c’est assez bluffant. En tout cas, cela l’a été pour moi en découvrant cette technologie. Dans les versions mobiles, vous découvrirez également qu’il n’est plus nécessaire de zoomer pour lire le contenu.