AccueilIdentité VisuelleResponsive Web Design

Identité Visuelle - Responsive Web Design Annecy

Responsive Web Design, ou autrement dit conception adaptative des sites, est un concept qui permet d’adapter automatiquement un site selon la taille de l’écran qui le lit. Sur un ordinateur, la taille de l’écran étant plus grande (généralement en 1000px), le site sera affiché différemment que sur un iPad ou encore un téléphone portable.

Pourquoi L’utiliser

Identité Visuelle - Responsive Web Design Annecy

Tous les appareils de lecture de contenu (ou terminaux de lecture) ont une utilisation différente ; les ordinateur dans les bureaux, les smartphones dans les transports en commun, les tablettes et reader dans des lieux de repos. Tous ces appareil ont aussi des contraintes d’utilisation, comme le tactile, la taille de l’écran, le débit de l’appareil. Tant de facteurs à prendre en compte afin d’adapter votre site web à ces différents terminaux.

Ces contraintes posent donc une remise en question de l’ergonomie du site. Une seule version de site s’adaptant à tous les appareils est irréalisable. Un site de taille convenable sur ordinateur sera tout petit et illisible sur Smartphones, l’utilisateur serait obligé de zoomer pour voir le contenu et quitterait le site très rapidement.

Deux solutions s’offrent alors à vous :

La première serait de créer une version du site pour chaque support en faisant des sites mobile.monsite.com, ipad.monsite.com… Cette première solution étant plus difficilement maintenable due au nombre de versions du site, le coût en serait bien plus élevé. En effet, mettre en place diverses versions implique que tout changement sur un support devra impliquer une modification sur les autres supports.

 La seconde solution serait d’utiliser les technologies actuelles, notamment l’utilisation de feuilles de style pour les différentes pages. Ainsi selon la taille de l’écran et les différents autres facteurs, certains éléments (tels que des images ou groupes d’éléments) ne seront pas affichés et amélioreront ainsi l’utilisation et la rapidité du site.

Que faire ?

Pour vous rien de spécial. L’agence web StraWeb vous proposera avant tout la seconde solution.
Vos sites seront compatible divers terminaux en restant à un coût raisonnable. 

Une analyse sera donc faite au début de votre projet afin de déterminer combien de terminaux vous souhaitez viser.

Cependant, selon la complexité de votre site et l’envie d’utilisation que vous souhaitez la première solution pourra être préconisée moyennant alors un coût plus élevé de mise en place et de maintenance.

Exemple d’utilisation

Exemple de Site non adaptable : Si vous regardez dans l’exemple ci-dessous vous verrez que sur téléphone l’utilisation est impossible : http://www.information-developpement-durable.fr/

Exemple de site adaptable : dans ce site par exemple chaque appareil à son propre mode d’affichage : http://quizz.made-for.us/

Vidéo exemple site Responsive Web Design http://vimeo.com/41847386