1485 sujets

Web Mobile et responsive web design

Bonjour,
voilà je cherche à mettre le visuels ci-dessous en mode responsive, mais comme il y a du texte, cela ne me semble pas adapté de l'intégrer comme une image. Du coup j'aimerai vos avis sur une solution envisageable.
J'ai pensé à positionner mes blocs textes, mais au redimensionnement forcément ils s'éloignent de leurs "points d'encrages" (les petits ronds) !
Voici les visuels desktop :
upload/1508486785-54293-alsa.png
et le visuels mobile
upload/1508486844-54293-alsa2.png

Merci de vos retours ^^
Salut Smiley smile

Dans ton cas l'idéal sera de faire l'image en svg Smiley smile

Il existe des sites en ligne ou des logiciels qui sont capables de transformer une image "normale" en svg.
Tu peux aussi faire toi même ton svg ce qui est le mieux Smiley cligne
L'avantage du svg est connu pour sa qualité quelque soit la taille de l'image Smiley smile

En revanche il te faudra quand même 2 images Smiley smile une horizontale et une verticale Smiley smile Ensuite les médiasQueries te permettront d'afficher l'image nécessaire à la visualisation
Merci pour ce retour,
Mais même avec le svg, mon texte va diminuer au redimensionnement, non ?
Ou alors il faudrait que je fasse le fond en SVG et que je positionne mes block texte par dessus ?
Modérateur
Oui ton texte sera redimensionné.

Sinon l'image en fond (en jpg/svg/ceqketuveux) et les textes par dessus en position absolute (avec des %):

https://codepen.io/anon/pen/rGRGap

Par contre le design a très peu d'espace donc ça casse vite en rapetissant, il va falloir pas mal de breakpoints pour gérer tout ça.
Ok j vais tester ça demain, et revisiter un peu le design pour ne pas avoir un breakpoint tous les 10 pixels !!!
Bon week
Modifié par urlien (20 Oct 2017 - 18:19)
Administrateur
urlien a écrit :
Merci pour ce retour,
Mais même avec le svg, mon texte va diminuer au redimensionnement, non ?

Hello,

Il est parfaitement possible d'intégrer des CSS Media Queries au sein de fichiers SVG, et donc de modifier leur aspect : https://codepen.io/machal/pen/vyMRPL
Meilleure solution
Avant de terminer l'année, je vous remercie pour vos réponse. J'ai tout passé en SVG et sans modifier les Media Queries je trouve bien lisible les contenus textuels.
La Bonne fin d'année souhaitée !!!