Responsive Design

Jean-Marc Lecarpentier

 

Responsive Design

Après avoir utilisé les feuilles de styles pendant plusieurs semaines, il est désormais temps d'approfondir quelques techniques et de réaliser des CSS pour divers médias. Les feuilles de style peuvent permettre de différencier l'affichage selon le tyoe de média (écren, impression, oral par exemple), mais aussi en fonction de la taille de l'écran en utilisant les media queries de CSS. Ce procédé, devenu à la mode sous le terme de Responsive Design, est aujourd'hui un incoutournable du design web pour écran, tablettes et autres smartphones.

Travail personnel

Exercice 1 : colonnes et Responsive Design

Reprendre une page réalisée en 3 colonnes lors du TP précédent, et y ajouter des Media queries pour avoir les 4 types d'affichages suivants :

Affichage extra large Affichage large
Affichage medium Affichage petit

Exercice 2 : Responsive Design et contenu

Reprendre l'exemple du tutoriel Responsive Designdu site A List Apart pour obtenir ce résultat.

On pourra partir du HTML et CSS de base donné en exemple pour démarrer. Les images sont dans cette archive.

Exercice 3 : une page complète

Prendre une page Responsive Design de votre choix et refaire le codage HTML et CSS pour arriver à un résultat proche.

On pourra prendre une page donnée en exemple sur cette galerie de site responsive ou bien prendre par exemple cet article tiré du site TheNextWeb

 
Tim Berners Lee, créateur de HTTP et HTML. A l'origine du Web, il dirige maintenant le W3C C'est avec Mosaic, premier navigateur graphique que le web pris réellement son essor en 1993 CSS Zen Garden, démonstration de la puissance de CSS Firebug, l'outil indispensable du développeur web
 
Fermer