Qu'est-ce que le Responsive design ?

Qu'est-ce que le Responsive design ?

Un site internet, c'est du contenu HTML (textes, images, liens, logos, champs à remplir,...) et du CSS, autrement appelé feuille de style, qui donne la forme (couleurs, dispositions, réactions passage de souris,...etc). En webdesign, nous travaillons en construisant des blocs : En-tête contenant le logo, un Menu horizontal, un bloc de contenu, des blocs sur le côté droit ou gauche, Pied de page,...etc

Tout cela se dispose parfaitement sur un bel écran de PC (du 15" au 27"). Mais l'arrivée des smartphones a tout bouleversé. Car conserver ce même aspect n'était guère ergonomique pour l'utilisateur, il fallait zoomer/dezoomer pour pouvoir lire les textes ou voir les images, aller à droite puis à gauche. Pas pratique !

La mode des sites mobiles

Nous avons alors conçu des versions sites mobiles. Un petit script installé sur l'hébergement du site détectait la résolution de l'écran : un grand format, on affiche le site internet normal, un écran de téléphone, on affiche la version mobile. Un rendu conçu donc essentiellement pour les téléphones, avec une adresse en sous-domaine comme : mobile.mondomaine.com

Ok ! mais c'est pas le must pour le référencement, et biensûr aujourd'hui quid des tablettes ?

Responsive : tout dans le CSS

C'est là le plus interessant ! Nous sommes aujourd'hui sur un language HTML5 et feuilles de style CSS3, lus et interprêtés sans problème pas les navigateurs modernes : Firefox, Safari, Google Chrome, Internet Explorer 9,... Et les possibilités sont énormes.

Nous disposons de façon traditionnelle pour les grandes largeurs au-delà de 1024 pixels. Puis en créant un fichier CSS spécificique pour le comportement sur des résolutions plus petites avec des instructions de dispositions spécifiques :

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px)
img { margin: 10px 0 0 10px; float: right }
h1 {font-size : 21px;}
/* Only Phones (Portrait) */
@media (max-width: 479px) {
img { margin : 5px 5px 0 0; float: left}
h1 {font-size : 16px;}
}

Et c'est là que c'est formidable, car non seulement on peut définir des dispositions en fonctions des terminaux (PC, tablettes, smartphones) mais en plus suivant le sens de lecture (Paysage ou portrait). Le plus fort, c'est que sur des diaporamas, nous pouvons faire apparaitre des textes qui disparaitront sur les smartphones pour surtout laisser la place à l'image.

Comment vérifier qu'un site est en Responsive design sur son PC ?

Rien de plus simple ! Suivez les instructions en visitant le site www.laduchesseanne.fr ou www.affinitybyackerman.fr

et cliquez dans votre navigateur sur reduire

Puis jouez avec la largeur de votre fenêtre :

thumb essai responsive

Le Responsive design fera le reste

A propos de l'auteur

Zach ROUAULT

Zach ROUAULT

Issu d'une formation commerciale, webdesigner autodidacte, passionné par l'informatique, les nouvelles technologies et le marketing, j'ai débuté en freelance en 2010 et fondé l'agence Zach Communication en 2012. 

Co-fondateur de la société Pixim Communication en 2013.

  • Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

A propos de
Pixim Communication

Qui sommes-nous ?

pixim zach-rouault

Zach
Rouault

Directeur associé
pixim christophe gagneux

Christophe
Gagneux

Directeur associé

contact@pixim.fr

Tél : 09 80 940 199

Copyright 2013-2015 by All rights reserved

Pixim Communication