taille d'une page web

[Criptus]

Bonjour

Je fais appelle à votre expérience dans les jeux par navigateur pour une petite question.
A votre avis une page web doit faire combien de px en largeur afin que sa ne soit pas trop large pour les petits écran et d'un autre coté trop petit pour pouvoir accueillir la maps plus tard?

A et j'en profite: vous connaissez un site (si sa existe) qui propose des images libres de vaisseau?

je vous remercie

[Sephi-Chan]

Si tu as un plateau de jeu ou une carte, un plein écran peut être une bonne option.
Si ça se passe dans l'espace, ça s'y prête bien. Si la résolution est trop basse (genre inférieure à 800px de large), tu as juste à emballer tout ça dans un bloc en overflow.

[Criptus]

merci pour ta réponse.
je n'ai pas tout compris mais je vais me diriger vers 1000px de large je pense.

[Kaoji]

En France, la résolution moyenne est 1280px, mais les sites visent généralement 1000px de large.
http://www.reuni-web.com/statistiques-internet/

Ensuite tu peux t'orienter vers le responsive pour adapter ton site à chaque résolution.

[Argorate]

Tien ce qui me donne envie d'ouvrir le débat sur: comment gérer l'adaptation automatique de l'interface et des graphismes en général de son jeu web si on fait justement du plein écran ou du proportionnel?

Étirer les images n'est pas une technique viable, et faire autant de combinaison que de nombre de résolution d'écran existant et ceux pour chaque images du jeu, c'est juste de la folie (et en plus ce n'est pas dynamique, le jour où une plus grosse résolution apparait, elle n'est pas gérer)

Donc comment faire ça dynamiquement?!

[Xenos]

Je dirai: avec un peu de javascript, en rognant le coté le plus court.
Par exemple, on base son site sur un 16x9 (peut importe la résolution si on travaille en proportionnel, d'ailleurs, la résolution perso, je l'associe à la finesse de l'image affichée, et non pas à la quantité d'images affichées, autrement dit, afficher un élément de "100px" de large, pour moi, ca nbe veut rien dire, car 100px peuvent très bien ne faire qu'1mm de large si l'écran est extrèmement "précis", aka, a une résolution extrème). Ensuite, via un javascript, on doit pouvoir récupérer la largeur & la hauteur de l'écran, et en faire le ratio. Alors, on positionne un 16/9e sur cet écran, en se basant sur la longueur de coté la plus longue (on autorise alors l'image à déborder de l'écran, si c'est une carte de jeu, ca peut ne pas poser de problème de ne pas avoir les bords extrèmes). Si on ne veut pas déborder, on se base sur la longueur du coté le plus court.

Exemple:
Je me base sur un ratio 16/9 (=1.777), et j'ai donc une carte qui occupe 100%x100% de l'espace.
L'écran du client est un 4/3 (=1.333), proportionnellement plus haut que large par rapport au 16/9e. Si j'autorise le fait que l'image puisse dépasser de l'écran (overflow hidden ou non), je me base sur hauteur de l'écran: l'image va déborder à droite et à gauche, mais c'est volontaire. Le ratio est alors préservé. Mais je peux aussi choisir de me baser sur la largeur de l'écran. En ce cas, l'image va entièrement rentrer dans l'écran, mais une partie de cet écran ne sera pas utilisé.

Après, c'est mon point de vue, d'autres n'aimeront peut-être pas. Il n'empèche que cela permet de préserver les ratios des éléments du site, tout en restant parfaitement adaptable sur des écrans très haute ou très basse résolution. Si la résolution est trop basse, il peut être interressant de supprimer les éléments les moins utiles de la page, pour l'encombrer le moins possible.

[Criptus]

oula sa commence à être compliqué tout sa...

Pour afficher l'image d'arriere plan moi j'étire cette image.

Code :

body
{
    background: url(images/background.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

Mais pourquoi se n'est pas bien d'étirer une image? si elle a une résolution de base élevé je ne pense pas qu'il ai de problèmes.

Sinon à l'interieur de la page elle même c'est vrai que j'ai tendance à utiliser les pixels plut^t que le pourcentage... Sinon Xenos ta façon est de faire est intéressante (mais si galère à mettre en place je trouve)...

[Murthy]

En deux mots : Media Queries. Et quelques exemples : Exemples

[Xenos]

Intéressant le Media Queries, je ne connaissait pas.
Le défaut d'étirer une image, c'est que l'étirement doit conserver le ratio, et ne doit pas dépasser, autant que possible, la résolution originale.
Le ratio est le rapport entre la largeur et la hauteur de l'écran. Si le ratio de l'image est, admettons, 1 (1000x1000px ou 100x100px, ce sont les mêmes ratios, 1/1), alors l'étirer en 4/3 la déformera (si l'image représentait un rond, étirée en 4/3, le rond paraitra elliptique, comme un oeuf).
Pour le second point, la résolution, c'est uniquement lié à la finesse de l'image affichée, et non à sa déformation de ratio du à l'étirement sur l'écran.

Media Queries est effectivement une bonne solution, bien que je préfère essayer de garder la même interface sur tous les terminaux, c'est plus homogène (mais parfois pas possible).

[Criptus]

a merci pour le lien et pour l'explication !
je vais voir sa.