Responsive Design – Optimisation des sites pour mobiles

Google différencie maintenant les sites adaptés ou non aux mobiles et tablettes, ce que l’on appelle le Responsive Design. Même si nous pouvons voir un site non responsive sur un mobile ou une tablette, la navigation est plus difficile et les internautes sont souvent obligés de zoomer pour voir le texte et les images.

Comme Google peut reconnaître sur quel appareil l’internaute se trouve, Google référencie les sites responsives plus avant qu’un site non responsive si l’internaute se trouve sur un appareil de type mobile ou tablette.

Les différents sites que j’ai mis en responsive sont des sites surtout en E-majine réalisés dans l’agence Schuller Graphic.

Réalisation :

A l’arrivée de Google Mobile le 21 Avril 2015, l’agence Schuller Graphic a envoyé une Newsletter à ses clients pour leur proposer de mettre leur site en responsive dont certains clients ont répondu à cette offre.

Tout d’abord, pour ne pas déranger le bon fonctionnement des sites web, j’ai dupliqué chaque site sur un autre serveur. Ensuite, j’ai choisi de prendre la technologie Foundation pour le responsive car j’avais déjà travaillé avec. Même pour le site Sanchez Industrie, qui est un Prestashop, j’ai préféré prendre Foundation que la grille Bootstrap de Prestashop.

J’ai donc téléchargé la grille Foundation en css et les jQuery associés pour divers fonctions que j’ai envoyées et intégré sur chaque site. Ensuite, j’ai construit mes colonnes sur chaque template de chaque site. En effet, la grille foundation est composée de 12 colonnes. Donc, nous avons de multiples choix pour découper une page suivant si nous avons une leftbar ou non, si nous voulons montrer les produits en 2, 3 ou 4 colonnes, si nous souhaitons couper le footer du site en 2 ou 3 colonnes.

Par conséquent, voici les sites web passés en Responsive Design et validés par Google.