Avec l’avènement des smartphones et autres tablettes, le responsive design est de plus en plus utilisé. Vous trouverez ci-après différents liens qui pourront vous permettre de faire ou refaire votre site sans vous prendre la tête !
The Goldilocks Approach est une bonne base pour démarrer le développement de responsive webdesign.
Il propose un boilerplate HTML / CSS contenant les bonnes pratiques à utiliser pour avoir un design réactif suivant les résolutions écran. Cette approche permet de viser toutes les résolutions et ne pas cibler que les plus courantes.
Il s’agit d’un subtil mélange de Ems, max-width, medias queries et pattern translation.
Il permet de gérer trois états de largeur:
- Design à multi colonnes (Quand trop large)
- Design à colonne restreinte (Quand trop serré)
- Design à colonne simple (Comme il faut)
Il suffit d’implémenter ces trois états pour avoir un design compatible sur toutes les résolutions et périphériques.
MQFramework utilise la propriété @ media pour vous permettre de concevoir vos sites pour les navigateurs de toutes tailles. Basé sur une grille de 12 colonnes, MQFramework se dégrade parfaitement vers le bas pour des tailles d’écran mobile.
Tutoriel Vidéo HTML-CSS : Design « Responsive ». Dans ce tutoriel vidéo vous apprendrez comment utiliser les media queries dans vos fichiers CSS pour adapter vos designs aux différents médias qui peuvent être utilisé pour naviguer sur votre site.
Responsive design : définition, fonctionnement, ressources et tutoriels
Responsive Web Design : What It Is and How To Use It (EN)