1485 sujets

Web Mobile et responsive web design

Dans ces conditions, la question est : quelle largeur on prend pour faire sa maquette sur Photoshop ? Si la taille d'écran est la même mais seulement la résolution différente, faut-il concevoir la largeur d'un site web mobile pour iPhone en 640 ou en 320 (en position portrait, s'entend) ? Si c'est 640, ça va mal s'afficher sur un iPhone 3 et si c'est en 320, ça va pas être ultra-net sur un écran Retina d'iPhone 4 ? Je m'y perds un peu.

Bref, comment vous résolvez ce problème ?
Tu fais ta maquette pour ton site avec la plus grande résolution d'écran et t'utilises les media queries pour les ajustements sur les autres devices.. Smiley cligne
Modifié par jmlapam (28 Aug 2011 - 23:22)
Bonsoir,

Pour les mobiles il ne faut plus résonner en terme de pixel mais en pourcentage en largeur et en 'em' pour la hauteur.

Ceci dit il n'y a pas que des iphones sur le marché, car même s'il reste le portable le plus vendu, il ne représente pas du tout la majorité des terminaux mobile.

Edit : http://en.wikipedia.org/wiki/Comparison_of_smartphones
Modifié par rs459 (29 Aug 2011 - 00:11)
Administrateur
Attention, au final, l'iphone 3 et l'iphone 4 sont à traiter de la même manière :
- l'iphone 3 a une largeur physique de 320px, un device-width de 320px et un viewport de 980px
- l'iphone 4 a une largeur physique de 640px, un device-width de 320px et un viewport de 980px

Au final, la largeur à prendre en compte sera la même :
- soit le viewport de 980px si tu n'y touches pas
- soit la valeur de device-width si tu indiques une meta viewport dans le HTML

Et dans tous les cas, il faut faire un site de largeur fluide puisque chaque mobile a une largeur différente... il n'y a pas que l'iphone dans la vie :
http://gs.statcounter.com/#mobile_browser-ww-monthly-201107-201108-bar
Administrateur
Yop,

il faut pas forcément se précipiter sur Photoshop à moins que ce ne soit une adaptation très particulière du site desktop. Smiley cligne
Une feuille de styles de base pour le Web mobile te permet d'avoir en 1H une base de travail plus que correcte et ensuite tu peux en 1-2 jours affiner les particularités de ton site.
@jmlapam : Les media queries, ok, bien que je ne crois guère, finalement, au site élastique parfait qui va s'adapter de manière "responsive" à tous les devices. Je crois plutôt que le multi-écran, ça consiste à penser contenus et design différents pour des contextes d'usage différents, plutôt que de rêver au site web idéal en le pensant comme la pâte à mâcher élastique qui sait tout faire et notamment s'adapter à tous les écrans. L'avenir nous le dira.

@rs459 : je comprends bien pour le traitement de la largeur en pourcentage, mais je comprends pas de quelle hauteur tu parles (on s'amuse à définir la hauteur maintenant, on ne scrolle plus vers le bas sur le web mobile ??) et pourquoi en 'em', me semblait que les 'em' s'utilisaient surtout pour la typo.

@Raphael : pour le traitement identique de l'iPhone 3 et de l'iPhone 4, merci, ça répond à ma question : j'en déduis que la différence sera juste une plus grande netteté sur l'iPhone 4, mais du coup, si je veux une image pleine largeur sur un iPhone, vaut mieux que je la crée en 640px pour qu'elle soit bien nette sur Retina, sauf qu'elle va pas passer sur l'écran 320px de l'iPhone 3 ?? J'arrive pas à piger ce problème, dans l'hypothèse d'un élément de contenu à largeur fixe comme une image, même si, j'ai bien compris, la notion de largeur fixe n'a pas de sens sur les mobiles. Mais une image est quand même à largeur fixe.

@Raphael : en outre, pour cette histoire de viewport, je suis pas sûr de tout suivre, j'ai lu pas mal de trucs sur le sujet, notamment que le viewport était un tag introduit par Apple. Mais au fond, je comprends pas ce tag, à quoi il sert vraiment et ce qu'il apporte. D'ailleurs, puisqu'il n'y a pas que l'iPhone dans la vie, je me demande : ce tag est-il pris en compte dans les autres devices que ceux de Apple ? Parce que, si je fais ce que recommande Apple, je dois utiliser une "constante " pour la viewport width, de la forme :
<meta name="viewport" content="width=device-width" />

Alors si je dois prendre en compte "la valeur de device-width si tu indiques une meta viewport dans le HTML", comme tu dis, qu'est-ce que ça veut dire si le meta viewport que j'ai indiqué ne précise pas de witdh fixe ? À quoi sert de "toucher" au viewport ?

@Raphael : pour la largeur fluide, bien entendu. Ce que je comprends du coup, c'est qu'on ne peut plus vraiment maquetter sur Photoshop, puisqu'il faut penser fluide. C'est peut-être pas plus mal, mais ça complique la conception visuelle.

@Felipe : merci pour le lien
Modifié par piffeo (01 Sep 2011 - 18:44)
piffeo a écrit :

@rs459 : je comprends bien pour le traitement de la largeur en pourcentage, mais je comprends pas de quelle hauteur tu parles (on s'amuse à définir la hauteur maintenant, on ne scrolle plus vers le bas sur le web mobile ??) et pourquoi en 'em', me semblait que les 'em' s'utilisaient surtout pour la typo.


Tout est question de maintenabilité, lorsque tu utiliseras les media queries pour t'adapter aux différentes largeurs (ne serait-ce que pour la gestion du mode portrait ou paysage sur quelques smartphones), si tu raisonnes en pixel, dans chaque régles spécifiques à un ou plusieurs critères (portrait, paysage, width max et min) tu devras adapter toutes tes marges hautes et basses, alors qu'en 'em' il te suffira de changer la valeur du font-size du body pour que toutes tes marges inférieures et supérieures de tous tes elements (div, images, etc comprises) s'adaptent à ta typo.

Et en pourcentage c'est trop inconsistant, quel hauteur va prendre ton contenu s'il s'adapte à plusieurs viewport de largeur différents, des marges hautes et basses en % seront énormes sur un petit viewport et trés faible sur un viewport large.
Modifié par rs459 (01 Sep 2011 - 20:24)
@rs459 : merci, je crois que je vais vite comprendre ce problème en essayant Smiley smile

@Felipe : merci pour le lien (cf. ci-dessous).

@Raphael : désolé, j'avais pas lu ton super article sur "Une feuille de styles de base pour le Web mobile", qui explique très bien ce qu'est le Viewport et pose des bases vraiment géniales pour aborder ce travail. En revanche, je n'arrive pas à savoir si le tag viewport est un tag Apple uniquement ou s'il est reconnu par les autres devices mobiles ?

Quelqu'un est au courant ?

Merci.
rs459 a écrit :
Le meta tag viewport est pris en compte par la plupart des navigateurs mobiles/tablettes.


Les versions desktop également… Smiley smile
piffeo a écrit :
Dans ces conditions, la question est : quelle largeur on prend pour faire sa maquette sur Photoshop ? Si la taille d'écran est la même mais seulement la résolution différente, faut-il concevoir la largeur d'un site web mobile pour iPhone en 640 ou en 320 (en position portrait, s'entend) ? Si c'est 640, ça va mal s'afficher sur un iPhone 3 et si c'est en 320, ça va pas être ultra-net sur un écran Retina d'iPhone 4 ? Je m'y perds un peu.

Bref, comment vous résolvez ce problème ?



Je suis un peu dans la même interrogation...

Je ne sais pas si je dois partir sur une largeur de 640px ( Iphone 4), 320px (Iphone3), ou sur la largeur du viewport de 980px ( valeur qui reste vague encore pour moi) .

A première vue je serai parti sur la largeur la plus large de l' Iphone: 640px, car ayant beaucoup de visuels sur mon site, il me semble plus logique de les réduire dans le css quand on visualise sur l'iphone 3 que l'inverse: ( les agrandire pour les voir sur un Iphone4 et perdre la qualité.)

Seulement cette question reste assez vague, pour moi tout le monde ne semble pas du même avis.

Même si mon site sera de largeur fluide pour tous les éléments autres que les images, il faut que je fixe une largeur à ma maquette de départ, pour les découpes des éléments etc...

Quelle est donc la taille conseillée pour une maquette de site Iphone 4 et 3 ?