C'est quoi le Responsive Design ?

 

Le Responsive webdesign

Le responsive design est la réponse à tous les nouveaux supports permettant d’accéder au web qui ont fait leur apparition ces dernières années.

Le web est aujourd’hui consommé depuis des smartphones, des tablettes et bien d’autres appareils. Il est donc impératif de concevoir des sites web adaptés à tous ces nouveaux supports.

Le responsive design est une manière de concevoir des sites web adaptés à tous types d'écran.

Le responsive web design c’est quoi ?

Parmi les traductions en français du mot responsive on trouve entre autres “qui réagit bien” et “prêt à répondre” ce qui traduit bien le sens que prend le mot responsive lorsqu’on parle de responsive design. Une traduction plus adaptée et communément utilisée serait “conception de sites web adaptifs”.

Adaptif, oui, car un site web responsive s’adapte à la taille de votre écran ou au type de terminal que vous utilisez pour afficher le site web (ordinateur, smartphone, TV, ou autre).

 

 

Naissance du responsive design.

Ces denières années notre façon de naviguer sur le web a radicalement changée. On se connecte aujourd’hui via une multitude d’appareils mobiles comme les smartphones ou les tablettes mais aussi depuis sa télé via des consoles de salon (ex : Playstation, Xbox) ou avec la TV par internet. Vous l’aurez compris les ordinateurs n’ont plus le monopole !

Disons le clairement, ce qui a le plus contribué à la naissance du responsive design tel qu’on le connaît c’est l’avènement des smartphones.

En effet, naviguer sur le web avec un smartphone ce n’est plus du tout la même chose. L’écran est plus petit, l’affichage peut se faire en format portrait et en format paysage. D’autant plus qu’interagir avec un site web initalement prévu pour un ordinateur depuis un smartphone n’est pas chose évidente, et pour cause, on clique avec ses doigts et pas avec une souris, on fait défiler une page avec son doigt et j’en passe...

 

 

Site mobile VS site responsive : quelles différences ?

Un site responsive qui s’adapte aux smartphones et un site mobile sont deux choses bien distinctes.

Un site mobile n’a pour visée que les mobiles : c’est un site à part entière. Son affichage se restreint donc aux smartphones et autres appareils mobiles et il ne pourra, en principe, pas être consulté depuis un ordinateur. Si tel était quand même le cas, son affichage ne serait pas adapté ce qui rendrait sa navigation et la lecture de son contenu très difficile.

“Mais comment faire pour se retrouver sur un site dédié aux mobiles depuis mon ordinateur puisqu’une version dédiée à l’ordinateur existe ?”

Pour répondre à cette question prenons un exemple concret :

Imaginons que, depuis votre mobile, vous lisiez un article sur un blog quelconque en version mobile, que cet article vous plaise et que décidiez de le partager sur les réseaux sociaux. Les utilisateurs qui vont tenter d’accéder depuis un ordinateur au lien que vous avez partagé sur les réseaux sociaux verront un site mobile affiché sur ordinateur. Croyez moi c’est très, très, désagréable à lire.

 

Site mobile affiché sur PC

 

Un site responsive, en revanche, aura pour visée différents types d’affichages. Un site responsive aura donc un affichage dédié aux smartphones mais également aux ordinateurs.

En résumé le responsive c’est un seul site avec différents types d’affichages.

Il est donc possible, grâce au responsive web design, d’adapter un seul et unique site web pour autant de types d’affichages que nous le souhaitons. Généralement un site responsive est rendu accessible pour trois types d’affichages. Dans l’ordre décroissant ces types d’affichage sont : les ordinateurs, les tablettes et les smartphones.

Pour en revenir à l’exemple donné précédemment, le même scénario mais avec un blog responsive ne pose aucun problème et permet une bonne lecture sur mobile tout comme sur ordinateur.

L’avantage principal d’un site responsive par rapport à une version spécifique dédiée aux mobiles c’est que le contenu reste unique. Il n’est donc pas nécessaire de créer deux versions du même contenu. Ce principe est d’ailleurs bien vu par Google notamment au niveau du référencement naturel des sites web.

 

 

Principes d’un site web responsive

Les points de rupture

Comme je l’ai déjà dit, c’est en se basant sur la largeur de l’écran que l’on va adapter la mise en page des sites responsive. Ainsi, on peut décliner à notre guise les versions d’un site web. Pour définir à partir de quel point un site devra passer d’une version PC à une version tablette on définit un point de rupture. C’est à partir du point de rupture que la mise en page va s’adapter. Par exemple, pour un point de rupture à 700px de largeur : au delà la mise en page sera adaptée à un PC et en dessous elle sera adaptée à une tablette.

On peut ainsi définir de nombreux points de ruptures pour un seul et même site. Pour un site qui s’adapte aux PC, tablettes et smartphones on pourrait avoir les points de rupture suivants :
PC > 768px > tablette > 320px > smartphones

Les points de rupture en responsive design

 

 

Une grille flexible

Les points de ruptures ont beau être importants dans l’adaptation de la mise en page mais entre chaque point de rupture il y a une grande plage de tailles qu’il faut savoir compenser.
Tous les écrans n’ont pas la même taille. Que ce soient les smartphones, les tablettes ou les écrans d’ordinateurs une multitude de modèles existent et il n’y a pas de norme en terme de format d’écran.
Il est donc tout bonnement impossible de baser un responsive design uniquement sur quelques points de rupture.

Un bon responsive design est un savant mélange entre points de ruptures et flexibilité.


Un site est construit selon des colonnes et des blocs de différentes tailles et de différentes formes. Ces éléments forment la grille de composition d’un site web.
Cette grille est considérée comme flexible à partir du moment où les éléments qui la composent n’ont pas de taille figée. On doit pouvoir les étirer et les resserrer sans qu’ils ne se destructurent.

 

 

Ergonomie et interaction site/utilisateur

Sur un ordinateur on utilise une souris mais sur un smartphone ou une tablette on utilise nos doigts !

Ce simple fait remet en cause la manière de naviguer sur un site web. La souris permet beaucoup plus de précision que les doigts pour cliquer. Les zones cliquables doivent donc être plus étendues sur les appareils tactiles que sur PC. Un lien par exemple prendra généralement la forme d’un bouton plutôt qu’une ligne de texte.

Un écran tactile nécessite une autre approche, c’est pour cette raison qu’aujourd’hui des standards de navigation comme faire glisser son doigt sur l’écran de bas haut, de gauche à droite et vice versa on fait leur appartition.

 

 

De nos jours avec la croissance du traffic web mobile, les sites web se doivent d'être responsive pour rester accessibles, une simple version d'ordinateur n'est plus suffisante.

Et vous votre site, il est responsive ?

 

Vous voulez en parler ? Contactez nous !