Tailles d'écran

Bonjour à tous

Quand on fait le design d'un site, il faut rendre en compte la variabilité des tailles d'écran disponibles sur le marché. Compte tenu de la variabilité des matériels, il me semble préférable de définir quelques tailles "de référence" pour lesquelles on peut tenter d'avoir une présentation optimale, quitte ensuite à faire des ajustements à l'aide de media queries quand on sort de ces dimensions.

Je m'occupe de sites qui sont essentiellement en consultation, c'est à dire que les utilisateurs effectuent très peu d'interactions. Ces sites sont le plus souvent consultés sur des tablettes qui offrent un confort de lecture optimal par rapport à un ordinateur, plus encombrant, ou à un téléphone, plus petit et moins facile à lire.

J'aimerais avoir vos avis sur les tailles d'écran à utiliser comme référence dans l'état actuel du marché des tablettes.

Question liée: pensez vous qu'il faille favoriser la lecture en mode paysage ou en mode portrait?
Merci de vos avis
Modifié par PapyJP (10 Jan 2016 - 10:48)

Salut Papy,

Le mobile first c'est toujours pas ton truc hein ? C'est dommage, ça t'éviterait de devoir te poser ce type de question à longueur de temps...

Dans l'idéal, il faudrait toujours définir les break points en fonction du design de son site, et non à partir de tel ou telle définition d'écran qui ne sera plus d'actualité dans 6 mois.

Bonjour,

Je n'ai qu'une seule "taille de référence" : 320px de large. Une fois que le site marche dans cette taille, j'améliore certains points (par exemple : passer à un affichage sur plusieurs colonnes) dès que le contenu du site et une taille de fenêtre le permettent, sans me soucier de savoir à quel véritable écran ça pourrait correspondre (pour tester, je me contente en première approche de faire varier la largeur de la fenêtre dans laquelle j'affiche le site sur un écran d'ordinateur de bureau). Éventuellement, je teste aussi des largeurs de fenêtre de moins de 320px pour obtenir un affichage acceptable à défaut d'être optimal (mais je le fais de plus en plus rarement).

Parallèlement à ça, je teste le site en faisant varier la taille de la police de caractère (par exemple avec l'option "zoom texte seulement" sur firefox). Il faut pouvoir augmenter la taille de la police plusieurs fois (minimum 3 ou 4 fois fois, idéalement le maximum de fois) sans dégradation de l'affichage.

Avec ces deux lignes de conduites, on a ensuite peu de mauvaise surprises quelques soit les tailles écrans et les tailles de polices utilisées par l'internaute.

Par exemple, le site d'alsacréations supporte un zoom "texte seulement" assez fort quelque soit la largeur de la fenêtre (le menu "profil aide recherche concours" et le logo du bas de page pourraient cependant être améliorés avec me semble-t-il assez peu d'efforts pour des "zooms texte seulement" supérieurs à 2).

Amicalement,
Modifié par parsimonhi (10 Jan 2016 - 12:14)

Ah oui tiens, à propos du zoom ça me fait penser qu'il vaux mieux mettre les valeurs des media queries en unités relatives, sinon gare au bugs d'affichage si zoom.

Olivier C a écrit :
... il vaux mieux mettre les valeurs des media queries en unités relatives, sinon gare au bugs d'affichage si zoom.

Il faut tout mettre en unités relatives, pas seulement les media queries !

Amicalement,

Merci à tous pour vos réponses.

Les sites que je gère sont tous antérieurs à l'invention des tablettes et smartphones. Ce qui est "first", c'est l'existant, et l'existant n'est pas "mobile". Nous en sommes à aménager l'existant, pas à tout refaire de zéro. Disons que ce que nous arrivons à faire est correct sur tablette et acceptable sur téléphone.

Olivier C a écrit :
Ah oui tiens, à propos du zoom ça me fait penser qu'il vaux mieux mettre les valeurs des media queries en unités relatives, sinon gare au bugs d'affichage si zoom.

Voici le genre de choses que je mets dans la feuille de style:

html {
    font-size:17px;
}
@media screen and (max-width:1024px) {
	html {font-size:1.7vw;}
}
@media screen and (max-width:705px) {
	html {font-size:12px;}
}

L'objectif est que le texte reste lisible.
- les 17px sont là pour les écrans très larges, car j'ai mis un conteneur qui fait au plus 1100px, je ne tiens pas à ce que le texte devienne trop gros quand l'écran est très large, car le conteneur ne croît plus en taille
- entre 705px et 1024px les caractères sont proportionnels à la taille de l'écran
- au dessous de 705px, les caractères ne diminuent plus pour rester lisibles
Les tailles de caractère des autres balises sont exprimées en rem ou em.

Je ne vois pas comment éviter de mettre des valeurs absolues dans ce genre de définitions.

Bonjour,

Pourquoi veux-tu absolument définir une taille de caractères globale (et en px en plus) ?

Si c'est de l'existant, admettons.

Mais sur du nouveau, on peut très bien ne rien faire de spécial et laisser le navigateur se débrouiller.

Amicalement,

parsimonhi a écrit :
Bonjour,

Pourquoi veux-tu absolument définir une taille de caractères globale (et en px en plus) ?

Si c'est de l'existant, admettons.

Mais sur du nouveau, on peut très bien ne rien faire de spécial et laisser le navigateur se débrouiller.

Amicalement,

Merci de ta répoonse
Je ne tiens pas du tout à laisser le navigateur se débrouiller.
Je ne fais aucune confiance aux navigateurs en ce qui concerne la présentation de quoi que ce quoi. Il y a tout une section dans ma feuille de style pour remettre à zéro les paramètres de présentations "par défaut" qui ne sont pas les mêmes entre les navigateurs et sèment le souk dans le CSS.

Voici ce que je fais:
La taille des caractères, selon les niveaux de balises, est exprimée à partir de la taille de caractères globale, laquelle dépend de la largeur du conteneur, lequel est limité à une taille maxi pour les grands écrans. Donner la taille de caractères globale en % de la largeur de l'écran donne des caractères trop gros pour les grands écrans, d'où les 17px qui correspondent à ce que je veux pour un conteneur maximum.
Quand la taille diminue, cette valeur est exprimée en vw, car dans ce cas le conteneur diminue proportionnellement. Mais si le conteneur continue à rétrécir avec la largeur de l'écran, il ne faut pas que le texte suive au dessous d'une certaine taille, sinon il devient illisible.

J'ai donc une taille de caractères globale qui évolue entre 17px et 12px et chaque type de balise a une taille de caractères fonction de cette taille globale. Je me sers également de cette taille globale pour la plupart des mesures, par exemple les margin et padding.

Je ne prétends pas que ce que j'ai fait est la meilleure façon de traiter ce genre de problème dit "responsive", et je suis bien entendu prêt à lire avec intérêt d'autres façons de faire.

PapyJP a écrit :
Merci à tous pour vos réponses.
Les sites que je gère sont tous antérieurs à l'invention des tablettes et smartphones.

Exactement mon cas avec mes 50 sites débutés pour certains en 1998
Alors je n'y ai pas fait grand chose pour qu'ils soient déclarés responsives par google.
Pour cela j'ais utilisé comme toi:

@media screen and (max-width:1024px) {
html {font-size:1.7vw;} etc....
}
@media screen and (max-width:705px) {
body, element1, element2 {width : auto;margin : 0;padding : 0;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 100%;}
img {height : auto;width : auto;box-sizing : border-box;}
img.fade {width : 90%;position : absolute;}
div.centre0X {width : 90%;margin : auto;height : 375px;}
textarea, pre, samp {overflow-wrap : break-word;hyphens : auto;}
pre, samp {white-space : pre-wrap;}
element1, element2 {float : none;width : auto;}
.hide_mobile {display : none !important ;} // ETC...
}

Mais n'oublies pas que le portables n'ont pas de taille écran,puisque un geste de deux doigts zoom ta page sur n'importe quel morceau de la page !
Bien sur en META tu as

<meta name=viewport content="width=device-width, initial-scale=1">

(le meilleur choix)