Responsive web design

responsive
Bonjour à tous.
Nous allons donc aborder aujourd’hui le responsive web design. Ce dernier est de plus en plus utilisé pour la création de sites internet « adaptables » à tous les terminaux mobiles ainsi qu’à nos bonnes vieilles machines.

J’ai pu lire le livre d’Ethan Marcotte « responsive web design » et j’ai ainsi appris de nombreuses choses sur le design et l’intégration de sites fluides.
Nous allons procéder dans l’ordre pour survoler l’ensemble des points importants. Je vous conseille toutefois de vous procurer ce bouquin pour aller plus loin.

1. Creer une grille flexible

Pour obtenir un responsive web design il faut avant tout non plus réfléchir en design fixe, figé avec des pixels mais en pourcentage.
Ethan Marcotte nous parle à de nombreuses reprises dans le bouquin de la formule magique :

cible ÷ contexte = resultat

Il s’agit donc de calculer les tailles des fonts, les padding, margin, width etc en pourcentages.
Pour cela il suffit de prendre la taille d’un élément et celle de son conteneur sur sa maquette par exemple.
L’élément est la cible, le conteneur est le contexte et la division des deux est le résultat.

Exemple: Une div1 de 900px contient une autre div2 de 500px. Pour calculer la largeur de div2 en pourcentage il suffit de faire 500 ÷ 900 = 0,55555556 soit width : 55,555556%

Rien de plus simple.
En suivant cette méthode vous obtiendrez une grille flexible c’est à dire une structure fluide pour votre site.

2. Les images flexibles

Ce passage est bien moins long et il s’avère que deux méthodes s’offrent à nous :
- Appliquer max-width:100% à nos images
- Ou bien overflow:hidden

La première méthode contraindra vos images à ne jamais sortir de leur contenant (en prenant au maximum la totalité de la largeur de son contenant). Tandis que la deuxième méthode va elle permettre de cacher le contenu de l’image qui serait en dehors de son contenant.

3. Les media queries

Les media queries sont apparus avec l’arrivée des règles CSS3. Elles ont pour but de pouvoir contraindre certaines règles css à n’être effectives que pour une certaines plages de résolutions. Voici comment cela se rédige dans le fichier css :

@media screen and (min-width:1024px) {
       body {
               font-size: 100%;
       }
}

Dans cet exemple, on applique une font-size de 100% au body lorsque l’on est sur écran et que la fenêtre du navigateur est supérieure à 1024px.
Ensuite il vous suffit de créer vos propre règles en connaissant les résolutions des différents terminaux (iphone, ipad, netbook, ordi de bureaux, etc…)

Et pour finir voici un tableau qui récapitule les caractéristiques qui peuvent avoir un préfixe min- ou max- :

media_queries

Voilà un bon début pour se lancer dans le responsive web design.

Je vous donne quelques liens qui peuvent s’avérer utiles pour le développement en responsive design :
Responsinator qui permet de tester des sites au responsive design sur toutes les résolutions.
responsive slides un slideshow responsive

Ainsi que 2 exemples de sites au design flexible :
starbucks
build with momentum

responsive_book_small
Cet article est un extrait de du livre « Responsive web design » des éditions Eyrolles avec la préface de Jeremy Keith. Vous trouverez dans ce livre une super base pour démarrer les sites responsive. En s’aidant de recherches internet vous pourrez même aller assez loin. Je vous conseille donc vivement de le lire, il est vraiment intéressant et vous apprendrez beaucoup de choses.
Mots clés : / / / /

4 Commentaires pour Responsive web design

  1. Boris Gacon dit :

    Super article, merci Strat !

  2. webmaster dit :

    Merci pour cet article, pleins de bonne techniques que j’utiliserais surement pour de futur projets avec l’utilisation en constante augmentation du responsive webdesign

  3. Melvin dit :

    Merci pour cette article =D !

  4. Guido dit :

    Comment adapter ce code a wordpress ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>