Media queries : des exemples de sites web responsive

De beaux exemples de sites en responsive webdesign

Le responsive webdesign (RWD) permet au design d’un site de s’adapter à la taille de l’écran qui l’affiche grâce à plusieurs technique de conception graphique et de développement pour proposer un confort d’utilisation maximal à l’internaute, quelque soit l’appareil qu’il utilise pour afficher le site. Mediaqueri.es, qui rassemble plusieurs centaines de ces sites, est une excellente source d’inspiration.

Un site responsive, c’est quoi ?

Les modes de connexion à internet évoluent et se multiplient. L’époque où tout le monde se connectait avec un ordinateur de bureau est révolue. Téléphones, tablettes, netbooks, télévisions, tous les écrans permettent maintenant d’accéder au web. Les créateurs de sites internet doivent donc s’adapter à ces nouvelles modalités de connexion, une des solutions les plus en vogue actuellement étant le responsive webdesign (RWD), qui permet au design d’un site de s’adapter à la taille de l’écran qui l’affiche. Cela est rendu possible grâce à plusieurs technique de conception graphique et de développement ; les Media queries de CSS 3 par exemple, qui permettent d’appliquer des styles CSS différents en fonction de la taille de l’écran qui affiche le site. Le confort d’utilisation pour l’internaute est ainsi conservé quelque soit l’appareil qu’il utilise pour afficher le site, mais le boulot est un peu plus complexe pour les concepteurs.

Quelques exemples de sites qui utilisent le responsive webdesign

Pour avoir une bonne idée de ce que ça donne visuellement, il y a le site mediaqueri.es qui rassemble plusieurs centaines de sites « responsive«  et propose, pour chacun, quatre copies d’écrans de différentes tailles : 320 pixels (smartphones), 768 pixels (tablettes), 1024 (netbooks) et 1600 pixels (ordinateurs de bureau). Tous ces exemples permettent de comprendre en un clin d’oeil la notion de responsive design, mais ils sont surtout une excellente source d’inspiration si vous souhaitez vous lancer dans l’aventure « responsive » pour votre propre site !

Tester un site responsive

Si vous avez créé un site responsive, vous aurez certainement besoin de le tester. Plusieurs sites permettent cela en affichant votre site à différentes largeur pour simuler les différentes tailles d’écrans disponibles sur le marché. En voici un qui est simple d’utilisation et efficace : responsive-viewer.ml. Attention, ça n’est pas un émulateur, mais plutôt un simulateur. Ça permet donc d’avoir une bonne idée de ce à quoi ressemble votre site à différentes tailles d’affichage mais le rendu et le comportement peuvent varier en fonction des appareils et des navigateurs utilisés.

 

Laisser un commentaire

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