1479 sujets

Web Mobile et responsive web design

Bonjour,

Je travaille chez un annonceur e-commerçant et je suis responsable de l'interface utilisateur et de l'expérience utilisateur. Je suis en train de finaliser le cahier des charges pour passer notre site actuel en version responsive (moi je m'occupe de tout ce qui est CSS et d'intégration, notre agence de développement va s'occuper de toutes les modifications nécessaires du code, des templates et du JavaScript).

Pour adapter le site en mobile, j'ai créé une feuille de style dédiée aux écrans de petite taille et j'utilise les media queries pour savoir quand elle doit être utilisée par le navigateur. Ça fonctionne très bien. Le site a été testé sur six tablettes Android, quatre Smartphones Android, plusieurs iPhones et nous avons vraiment le rendu que nous voulions... Mais il reste encore un point capital et à mon sens très complexe : la gestion des images.

J'avais déjà lu il y a quelques mois l'article sur le srcset sur le site et j'ai vu ce matin qu'il y en avait un nouveau http://www.alsacreations.com/article/lire/1669-images-responsive-et-attribut-sizes-amstramgram-pic.html

Je voudrais savoir si cette technique est la meilleure disponible actuellement, si elle est compatible avec la très grande majorité des navigateurs mobiles et si c'est bien la plus pérenne. Comme beaucoup d'entre nous, je dois résoudre le problème complexe suivant : avoir des images de grande qualité pour les écrans de type Retina, ne charger que les images et résolutions nécessaires sur les écrans de petite taille (sauver un maximum la bande passante) et avoir un affichage correct sur les navigateurs desktop standards.

Puis-je sereinement partir sur cette solution ? Sinon, quelles solutions recommandez vous, même si elle doit faire usage du JS ?
J'ajoute une difficulté : je suis également SEO et je voudrais donc si possible utiliser une solution qui soit interprétable par Google car le trafic apporté par Google images n'est pas négligeable. En ce sens, la solution srcset me paraît attractive.

Que penser de ceci ?
<picture>


Un grand merci d'avance

François

(Désolé pour les éventuelles fautes d'orthographe ou de grammaire, ce texte a été dicté un logiciel de reconnaissance vocale)