Le responsive webdesign utilise des techniques pour adapter un site web sur divers périphériques sans compromettre l'expérience utilisateur. Avec l'augmentation des visites sur smartphones, cette approche offre plusieurs avantages, notamment une gestion centralisée et une conformité avec les recommandations de Google et du W3C. La collaboration entre graphistes et intégrateurs est essentielle pour concevoir des sites qui s'ajustent visuellement tout en garantissant un accès optimal au contenu.

1. Responsive
Webdesign

2. Le Responsive Webdesign est une série de
techniques permettant de rendre compatible
un site web avec un maximum de
périphériques, sans sacrifier l'expérience
utilisateur.

3. En 2013, les smartphones
génèreront plus de visites que les PC

4. Avantages par rapport à un site .mobi :
- 1 seule interface de gestion
- 1 seul site à crawler
- 1 seule URL à partager et à liker
- recommandé par Google et le W3C
- des sites prêts pour le futur

5. Ce n'est pas grave si les internautes ne
voient pas le site sous la même forme.
L'essentiel est qu'il aient accès à son
contenu de façon optimale.

6. Les variations visuelles des sites
« responsive » sont déterminées par les
règles d'ergonomie.

7. Un site « responsive » prendra une
multitude de formes ; ce n'est pas pour
autant que chacune de ses apparences
doivent être soumises à la validation du
client.

8. Les clients doivent faire confiance à
notre expertise en ce qui concerne
les variations de design de sites
« responsive »

9. Le graphiste qui réalise la maquette d'un
site en « responsive » doit réfléchir aux
différentes apparences que celui-ci prendra.
C'est indispensable !
Il commence à déterminer grossièrement
des « points de rupture »

10. L'intégrateur code le site sur une base
« flexible » en utilisant uniquement des
valeurs en pourcentage et en em.
Il détermine avec le graphiste les
« points de rupture »
Il utilise ensuite des « media queries »
pour coder les variations du site.

11. Le graphiste, l'intégrateur et le chef de
projet doivent conclure la réalisation du
site en le testant sur de vrais
périphériques.

12. Attention aux mauvaises pratiques !

13. Ressources :
- Responsive Webdesign
- Mobile First
- L'ergonomie web
- le site http://mediaqueri.es