Le responsive design en 4 questions (2/2)

Suite et fin du dossier sur le responsive design. Accéder à la première partie.

3. A quoi ressemble le responsive design ?

Le plus simple est de faire un test en direct sur cette page. Attrapez le bord droit de votre navigateur avec le curseur de la souris. Lorsque le curseur se transforme en double flèche, faites le glisser vers la gauche et vous verrez le site se redimensionner progressivement jusqu’à attendre la largeur minimale qui est celle de l’affichage sur un smartphone.

Voici également un aperçu en images du redimensionnement d’un site sur quatre périphériques : ordinateur, tablette tactile, Blackberry, iPhone :

Enfin, vous pouvez faire le test sur les sites suivants qui sont tous développés en responsive design:

http://www.barackobama.com/ : le site de campagne du Président américain pour la présidentielle est entièrement conçu en responsive design. Quand on le redimensionne en largeur “smartphone”, on constate que le plus gros des informations de fond disparait pour ne conserver que les actualités les plus importantes ou les plus urgentes et les actions de mobilisation des citoyens.

http://www.smashingmagazine.com/ : ce magazine consacré au web, au webdesign, à l’ergonomie etc. est un des meilleurs exemples de site en responsive design. Sur votre navigateur en plein écran, il utilise la totalité de la largeur de l’écran, ce qui est rare ! Et plus vous réduisez, plus il se redimensionne et modifie l’agencement des blocs avec précisions. Dans ce cas, il utilise jusqu’à 12 breakpoints, c’est à dire qu’il effectue des redimensionnements à 12 niveaux de largeur différents !

http://leditrice.fr/ : il s’agit d’une boutique en ligne, conçue sous Prestashop en responsive design. Parce que même pour le commerce en ligne, le responsive design est un atout majeur. En effet, L’editrice permet d’aller jusqu’au bout du processus d’achat depuis un smartphone ou une tablette !

4. Combien ça coûte ?

Le dernier atout du responsive design c’est son faible coût. S’il est prévu dès la conception initiale du site, il ne génère qu’un surcoût mineur par rapport à la création d’un site “classique”.

En revanche, si le design responsive n’a pas été pensé dès le départ, la tâche peut être beaucoup plus longue et donc coûteuse. Il est même parfois moins complexe de repartir de zéro plutôt que d’adapter un site en responsive.

En conclusion

On constate qu’en moyenne déjà 10% des visites des sites de nos clients sont effectuées depuis un smartphone ou un iPad et que ce chiffre est en augmentation permanente. Le responsive design est la solution la plus efficace et la moins couteuse pour rendre vos sites accessibles et compatibles avec tous les écrans, alors pourquoi s’en priver ?

Quelques réalisations récentes de Parteja en responsive design.