mer 14 déc 2011 - Catégorie : Internet

Qu’est ce que le Responsive Web Design

 

Le principe de Responsive Design, que je traduirais par Design Adaptable, est le fait de construire un site web selon une grille fluide qui s’adapte à la résolution de l’écran sur lequel il est affiché.

 

Quelque soit le périphérique d’affichage, le site internet sera automatiquement adapté pour un affichage intelligent et lisible. Ainsi, l’internaute aura une expérience utilisateur toujours optimisée sans avoir besoin d’action de sa part (scroll, zoom et autres).

 


Par exemple :

 

 

 

 

 

L’exemple montre très bien la différence d’affichage suivant la largeur de l’écran et l’on imagine aisément l’adaptabilité du template pour s’afficher sur une tablette, un ordinateur, ou encore un smartphone.

 

Ce qui permet de se passer de versions dédiées au mobiles comme on le voit souvent avec des sous domaines tels que : mobile.lesite.com

 

Du fixe au fluide

 

Qu’elle est la différence entre un design « classique » et un design « responsive » ?

 

Jusqu’à présent, je construisais les sites internet avec une grille fixe avec comme impératif un affichage identique sur n’importe quel écran d’ordinateur et n’importe quel navigateur.

 

Cela signifie que j’utilisais des largeurs fixes qui déterminaient la taille des différents éléments de la grille.

 

Par exemple :

 

Un conteneur <div id=  »wrap »> avec une taille fixe en pixel : #wrap {width: 960px;} et cela quelque soit le navigateur ou l’écran qui l’affiche.

 

 

Mais l’explosion du nombres de périphériques connectés différant par leur taille et leur résolution a dégradé l’expérience utilisateur. En effet, les résolutions inférieures à 960px contraignent l’utilisateur à des actions de sa part pour naviguer dans le site internet.

 

Ce qui va à l’encontre de l’intention du webdesigner qui doit prévoir le parcours et la navigation dans le site de manière optimale et intelligente quelque soit le périphérique utilisé par l’internaute.

 

 

On utilisera des designs basés sur une base fluide qui s’organiseront suivant la résolution d’affichage utilisateur grâce à une nouvelle technique css appelée Media Query, doublée d’un design codé en pourcentage.

 

Je citerais en exemple le site du Boston Globe conçu par le designer Ethan Marcotte.

 

Vous remarquerez dans le css des deux captures suivantes que la construction est en pourcentage. Ainsi, le conteneur principal du site est d’une largeur de 61.2954% pour une résolution de plus de 790px et une largeur de 48% pour celles inférieures à 790px.

 

.p-more {
width: 61.2954%;
}

 

 

 

.p-more {
width: 48%;
}

 

 

Que sont les Media query ?

 

Si vous êtes familier de la langue de Shakespear je vous conseille de lire les recommandations W3C : http://www.w3.org/TR/css3-mediaqueries/

 

Les Media query permettent d’opérer une modification de l’affichage suivant la résolution du site internet sans toucher au contenu.

 

Ainsi on pourra apporter des modifications à la feuille de style sur la largeur (width), la taille de la police (font-size), mais aussi l’alignement par exemple !

 

Par exemple le menu du site responsivedesign.fr :

 

 

Et cela en quelques lignes de css.

Magique non ?

 

Media Query en exemple : Comment redimensionner une image suivant la résolution de l’écran.

 

Voici un exemple rapide pour comprendre comment s’articule le code.

 

Donc l’utilisation des MediaQuery nous permet d’adapter le css suivant la résolution de l’écran.

 

Pour se faire, nous créerons une classe css dédiée à une catégorie d’images de même hauteur et largeur, qui évoluera selon la résolution de l’écran :

 

.image-wrap {
max-height: 366px;
max-width: 500px;
}

@media only screen and (max-width: 479px) {
.image-wrap { max-width: 250px; max-height:183px }
}

 

Exemple :

 

Quelques exemples de sites Responsive que je vous propose de découvrir.

 

The boston Globe par Ethan Marcotte

 

Bureau

 

A flexible Grid

 

Quelques template premium WordPress Responsive

Super Skeleton

 

 

Re / Action

 

 

Beleved

 

Quelques template WordPress Responsive Gratuit

 

Skeleton

 

 

Yoko

 

 

Per Sandström

 

 

Responsivetwentyttheme

 

 

Conclusion

 

Voilà un premier article qui introduit le « responsive design », d’autres articles plus précis sur sa mise en œuvre sont à venir.

 

Si vous recherchez plus d’information, de liens et de templates, je vous propose de découvrir un site dédié:
http://responsivedesign.fr

 

En attendant, je vous recommande chaudement de lire les articles suivant !

 

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/
http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one
http://unstoppablerobotninja.com/
http://adactio.com/journal/1700/
http://cognition.happycog.com/
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/dao/
http://www.webdesignshock.com/responsive-web-design/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/