Le blog d'Eenov, solutions eenovantes !

Responsive Webdesign, la nouvelle tendance du web

Si vous vous intéressez au webdesign, vous n’avez certainement pas pu échapper à cette nouvelle tendance qui envahit nos sites et qui est le responsive webdesign. Et même plus qu’une tendance, cela devient une véritable philosophie.

Qu’est-ce que c’est ? Et pourquoi ?

responsive webdesignAvec pas moins de 400 résolutions d’écrans d’appareils sur le marché, nous observons un besoin grandissant de la part de nos clients qui est celui d’avoir une version mobile de leur site web. Le problème est bien sûr qu’il n’est pas possible de créer 400 versions différentes d’un même site ! C’est alors que nous vient la solution du responsive webdesign.

Le principe est simple : un site et son contenu doivent s’adapter aux nombreuses résolutions d’écrans. Les colonnes doivent s’ajuster ou se déplacer, les images doivent se redimensionner voire disparaître… Le design doit être flexible. Là où cela devient une vraie philosophie, c’est qu’un site n’est pas consulté de la même façon sur ordinateur ou sur mobile…

Comment faire ?

C’est une véritable évolution des techniques de webdesign et de développement qui s’amène, notamment avec l’arrivée du HTML5 et du CSS3. Le CSS3 nous offre, par exemple, l’utilisation des media queries, avec lesquels on peut détecter la résolution de l’écran de notre internaute, et afficher notre site en conséquence en faisant appel à un style particulier : un site en deux colonnes plutôt que trois, une image qui prenait toute la largeur de l’écran va alors disparaître etc…

Vous aurez donc divers facteurs à prendre en compte pour votre design flexible : grille de colonnes, disposition des blocs, redimensionnement des images (attention au poids), taille de la typo, couche Javascript, souris VS doigt…

Là où c’est moins intéressant…

Forcément, le développement d’un site va devenir beaucoup beaucoup plus long qu’avant… et forcément va coûter plus cher et les devis risquent de s’alourdir.

Forcément, il vous faudra avoir un poil plus de connaissances et de techniques (notamment Javascript, mais aussi couche iPhone par exemple…). Et forcément votre créativité s’en verra limitée puisque beaucoup plus de contraintes de mise en page et techniques…

Et puis, il y a bien évidemment le fait que les navigateurs n’interprètent pas le HTML/CSS de la même façon, les plus anciens ne sont même pas compatibles avec le CSS3… Et des fois, il vous apparaîtra bien plus simple de créer une version mobile plutôt qu’une version responsive.

A quoi ça ressemble ?

Pour terminer, voici une petite sélection de responsive design. Amusez-vous à redimensionner la taille de votre navigateur pour voir ce que ça donne ;)

 Smashing magazine

responsive webdesign

Gravitate

responsive webdesign

Think Vitamine

responsive webdesign

Food sense

responsive webdesign

Naomi Atkinson

responsive webdesign

Andersson

responsive webdesign

El sandero del cacao

responsive webdesign

Alsacréations

responsive webdesign

Illy Issimo

responsive webdesign

 

Posté par : Jérôme le 01/02/2012
Design, Développement / Open Source
Tags : , , , ,

2 commentaires

  • [...] un article avec des liens de site « responsive », à vos PC, tablettes, smartphones et [...]

  • [...] Ce Framework embarque un grand nombre de fonctionnalités et de styles, il est très complet et de plus, il permet  de créer des sites responsives. [...]

  • Poster un commentaire

    Vous voulez donner votre avis ?
    Laissez un commentaire !