01 79 73 41 44 [email protected]

Aujourd’hui, Monsieur Lucien a décidé de vous parler de Responsive Web Design ! Au programme : KEZKEZAI ? À quoi ça sert ? Comment ça marche et surtout comment en faire ? 

 

Le Responsive Web Design KEZKEZAI ?

Alors concrètement, le Responsive Web Design, c’est une technique de réalisation de site web permettant de faire des sites qui s’adaptent automatiquement à n’importe quelle taille d’écran (ordinateur, tablette, smartphone…). Pratique n’est-ce pas ? 🤩

 

Mais à quoi ça sert ?

Aujourd’hui de plus en plus de personnes naviguent sur des sites web depuis leurs smartphones et tablettes. Les sites dit “Responsive” permettent de pouvoir naviguer rapidement grâce à des chargements de pages plus courts.

Un design Responsive est un réel atout pour un site Internet. En termes d’ergonomie, le site restera autant accessible sur un Smartphone que sur un écran d’ordinateur.

“Mais un site ne s’adapte pas tout seul aux écrans ?” 😱

Et non ! Malheureusement, si on conçoit un site pour ordinateur, il ne s’adaptera pas parfaitement aux autres tailles d’écrans.

C’est là que rentre en jeu le Responsive Web Design.

 

Petit historique des solutions

Avant l’apparition du Responsive Web Design, il existait des solutions pour que les sites s’adaptent aux écrans :

1. Les sites dédiés

Pour cela, il fallait alors créer 2 versions de son site web:

  • Le site principal, destiné aux ordinateurs
  • Un site mobile, destiné aux appareils mobiles

Le problème étant que 2 sites signifient deux fois plus de maintenance et de gestion. Donc une perte de temps et d’énergie. De plus, les moteurs de recherche (comme Google) n’apprécient pas la duplication de contenu, et pénalisera votre référencement.

Le plus gros problème ?

L’apparition des tablettes, des téléphones “grand écran” comme le Galaxy Note etc.. Vous vous voyez faire un troisième et quatrième sites pour s’adapter à ces résolutions d’écran ? 😬

Évidemment que non ! Ce que l’on souhaite, c’est un site qui s’adapte parfaitement à n’importe quel type d’écran !

2. Les applications natives 

Les applications natives (les “Apps” comme on dit !) sont des applications pour mobiles, conçues exclusivement pour un type de système d’exploitation (iOS, Android, Windows Phone etc.).  Les personnes peuvent les télécharger au sein des stores (Google Play Store, Appstore, Windows Phone Store…)

Le problème est que développer une application à un coût : achat de licences, développement en plusieurs langages ( iOS, Android…), maintenances et mises à jours… Bref tout un programme !

Les créateurs de sites web se sont alors penchés sur le problème et ils ont trouvé LA solution: le Responsive Web Design.

 

Alors, le Responsive Web Design comment ça marche ?

Le principe d’un site Responsive est en réalité assez simple. On se base sur la largeur de l’écran pour déterminer comment les éléments du site doivent s’afficher (ou non).

Voici un exemple:

Comme vous pouvez le voir, quand on dispose de moins de largeur comme sur mobile, il est difficile de faire apparaitre des blocs côte à côte (La navigation sur mobile se fait verticalement). Il est donc préférable de les afficher les uns en dessous des autres.

Chaque moment où vous devez réorganiser vos blocs s’appelle « des points de ruptures » !

 

 

 

 

 

 

 

 

Comme on peut le voir ci dessus, il y a 5 types d’écrans mais seulement 3 points de ruptures (Au niveau des parties vertes dans un premier temps, puis des parties bleutées dans un second et troisième temps). Le Responsive s’adapte en fonction des tailles d’écrans pour optimiser la navigation. 

 

Comment faire du Responsive ?

Voilà le principe du Responsive Web Design.

“Mais comment fait-on ?”
On préfère vous prévenir, si vous n’avez aucune compétence en codage, réaliser un site Responsive va s’avérer long et très compliqué…

Il faut connaître les techniques des “Media Queries CSS” (oui c’est un sacré nom …🙄). Pour faire simple, ce sont des techniques qui permettent d’adapter un design en fonction de différents critères (comme la largeur de l’écran)… et oui c’est pratique. 😃

Les Media Queries permettent d’écrire des règles qui ordonnent à l’ordinateur des tâches comme: « Si la largeur de l’écran est supérieure à X et inférieure à Y, alors placer ce bloc en dessous du précédent »

“Mais est-ce possible de faire un site Responsive avec mon site existant ?”

Oui, bien sur… mais c’est un travail de longue haleine parfois et il peut s’avérer difficile d’optimiser votre site pour qu’il devienne Responsive à 100%. En effet, vous allez perdre un temps fou et vous compliquer la vie. Le plus simple est de refaire une refonte complète de votre site et faire du Responsive Web Design.

 

Vous l’aurez compris le Responsive Web Design est devenu incontournable dans tous les projets web. Besoin de faire un site Responsive ? Monsieur Lucien est là pour vous.

Share This