1485 sujets

Web Mobile et responsive web design

bonjour

je souhaite adapter mon site aux tablettes et smartphone

j'ai de jolie image que je préfèrerais conserver intacte pour les PC, leur largeur est de 850 px, bien sur ces images passent mal sur les tablettes car il faut slider sur les cotés pour voir leur partie non affichée à l'écran

plutot que d'abandonner mes image adaptées aux écran de PC, je préfère les conserver et en proposer d'autres exprès pour les tablettes qui auront par exemple une largeur de 410 px

je ne souhaite pas diviser par deux la taille des images adpatées aux PC mais proposer des images diférentes plus simples aussi explicite mais avec moins de décoration car ces images sont des shemas explicatif

il ne me semble pas que cela soit possible, mais je pose quand même la question au cas où, en effet il ne me semble pas qu'il y ait de telle ligne de code possible en HTML5 avec les MediaQuerie :

IF Media1 THEN affiche Image1 ELSE affiche Image2

bien sur j'ai shématisé le code sans les acolade parenthèse point virgule ... ni indiqué la syntaxe exacte HREF ... c'est juste pour donner une idée

avec CSS3 je vois bien comment comment adapter les DIV selon le media mais il ne me semble pas qu'il soit possible de proposer l'affichage d'une image plutôt que d'une autre selon le media, j'espère me tromper

merci d'avance de vos reponses
Modifié par RR7008 (17 May 2013 - 18:52)
Si ce sont des schemas tu pourrais créer des images vectorielles et les exporter au format SVG. Le problème de la taille des images ne se poserait pas.
et non ce ne sont pas uniquement des shema qui pourait réaliser avec des vecteurs car ils sont décorés et contiennent des pastilles < photo >

a la rigeur ces même image refaite pour les tablettes pouraient êtres des shema réalisé avec des vecteur mais là aussi je préfère des images png ou jpeg et non d'image vectorielle car je souhaite suprimer la décoration pour les image version-tablette mais je souhaite conserver à l'intérieur des pastilles < photo >
Administrateur
Bonjour,

C'est un vaste sujet et une multitude de pseudo-solutions existent actuellement.

Adaptative-images.com en est une parmi d'autres.

En voici quelques autres :
- balise noscript + JS : https://github.com/sashasklar/Responsive-Images-Noscript
- balise HTML5 picture + polyfill : https://github.com/scottjehl/picturefill
- RESS (Responsive côté serveur) : http://www.netmagazine.com/tutorials/getting-started-ress
- Compressive images : http://filamentgroup.com/lab/rwd_img_compression/

Aucune de ces solutions n'est magique, aucune ne fonctionne dans 100% des cas, et aucune n'est très simple à mettre en oeuvre Smiley ohwell

Bonne chance Smiley cligne
Modifié par Raphael (18 May 2013 - 14:17)
merci pour tout ces liens, je vais étudier tout cela avant de me décider pour une de ses solutions
Que pensez vous de la solution "matchMedia" en JS ?

http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html


On peut charger par défaut l'image la plus lègère ou bien une image de type "loader" et remplacer cette image par l'image de taille adéquate en JS.


Je n'ai pas testé cette solution, mais j'aimerai avoir vos avis ?

Il faut savoir que matchMedia ne fonctionne pas sur IE > 10, mais il existe (apparement) un polyfill.



Dans le futur il y aura la solution ultime : <picture>

http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/

(restera à assurer une compatibilité avec les anciens navigateurs)
Modifié par Gyzm0 (21 May 2013 - 16:41)