px, dp, ... quelle unité de mesure

[Ter Rowan]

hello guys

On m'a parlé de http://www.google.com/design depuis peu

Même si je ne suis pas d'accord sur quelques points je trouve que google a créé là une vraie mine d'informations extrêmement intéressantes


j'en viens à ma question : google présente toutes ses mesures en dp / sp (android forcément) mais pour une application web, multisupport, doit on vraiment suivre cette recommandation ou rester sur px ?

qu'en pensez vous ?

[Xenos]

dp? sp? Je ne le trouve pas dans le standard.

Sinon, usuellement, 'on' se base sur em pour les tailles de polices, sur px pour les longueurs absolues, % pour les longueurs relatives, vh vw vmin vmax pour les longueurs relatives à l'écran et mm pour les dimensions réelles (papier).

Mieux vaut rester sur le standard que s'embringuer sur les propositions de google (toutes ne sont pas vaseuses, mais si on les pousse à faire des propositions de standards, on n'aura plus Internet, mais Googlenet), qui seront d'ailleurs plus adaptées à leurs produits qu'à tous les produits (utiliser des unités "spécial Android" n'est pas faire du multi-support).

J'éviterai donc de reproduire le "phénomène IE6", où c'était finalement l'entreprise créatrice du navigateur (IE) qui faisait son propre "standard". IE ne remonte la pente que depuis qu'il s'est conformé, justement, aux standards, et qu'on n'a plus des charrues de code à faire "spécial IE" (ok, certains sites gardent encore des brouettes de code IE, mais c'est plus léger).

Pour une appli web multisupport, rien ne vaut le W3C, mieux vaut rester sur du px (et voir quelles prochaines unités viendront avec les nouvelles versions de CSS).

[@lucard]

Tout est marqué dans ce document Google :

Because it's important that you design and implement your layouts for multiple densities, the guidelines below and throught the documentation refer to layout dimensions with dp measurements instead of pixels.

Space considerations
Devices vary in the amount of density-independent pixels (dp) they can display.

Que je traduirai par :

Parce qu'il est important que vous conceviez et implémentiez vos mises en page pour des densités multiples, les directives ci-dessous et durant la documentation se réfèrent aux dimensions de mise en page avec l'unité de mesure dp au lieu de pixels.

Exemples de taille
Les écrans varient en quantité de pixels indépendamment de la densité (dp) qu'ils peuvent afficher.

En gros, si un écran fait 680x540, mais qu'il affiche un site de 1024x850, il affichera les dp comme étant les pixels relatifs aux 1024x850.... >.<

Mais ça ne veux pas dire qu'il faut utiliser les "dp" comme unité standard pour faire ses sites.
comme Xenos, j'utilise les unités standards, mais le pixel reste la plus couramment utilisée (avec les %).

[Ter Rowan]

Mouais

cependant, ce n'est pas juste une conversion...

que veut dire "il faut penser aux densités multiples" ?

jusqu'à présent j avais des media queries basées sur des px

là je sens qu'il y a une différence (sinon on parlerait pas de dp) cependant j'arrive pas à mettre le doigt dessus

ok tout en px mais apres, si on laisse l'écran adapter l affichage on arrivera a de l'illisible

bref pas assez compris pour continuer en px sans me poser de question

[@lucard]

Tu as avec les médias queries la possibilité de distingué la densité pixel. J'l'ai pas en tête, du genre :
@media only screen and (-pixel-ratio: 2),

Je suis sur mobile là, et en train.de préparer à manger :-) au pire j'editerai ce poste demain matin.

[Xenos]

Le pixel px est une unité théorique informatique, qui n'implique strictement rien sur la taille réelle de ce qui est affiché en sortie.
A l'inverse, le mm / cm est une unité réelle, qui se fiche totalement de la notion informatique de pixel.

Le soucis de la mesure px, c'est qu'elle n'a pas de lien avec la taille réelle affichée (donc, plus l'appareil a une densité de pixels élevé, plus un objet de N pixels sera petit).
Le soucis de la mesure réelle, c'est qu'elle n'a pas de lien avec la distance de vue de l'appareil: un téléphone est de petite taille réelle, mais on le regarde de plus près qu'un PC, qui est évidemment de plus grande taille; et même une TV immense peut paraitre petite vue de loin.

L'em présente l'avantage d'être relatif à la taille du texte, et se trouve donc être une mesure idéale si on a un objectif de lisibilité.

Il faudrait presque une mesure angulaire, type milli-radians, qui permettrait alors de posséder une information sur la taille apparente de l'objet pour l'utilisateur (à taille réelle fixe, plus l'utilisateur est loin, plus la taille apparente diminue, la mesure angulaire permettrait de ne pas se préoccuper de la taille réelle affichée et de la distance de l'utilisateur à l'appareil).

[@lucard]

Après quelques recherches infructueuses, je suis tombé là dessus: http://www.nicolasaguenot.com/nicoandco/...es-Android
Il est dit que le dp se base sur la densité pixel de moyenne 160ppi (160. Pixel par pouce)
Il est aussi écrit que le dp ne s'applique qu'aux applications Android.
Donc pas d'applications web multi-supports. Je penses donc que seuls les devices sous Android peuvent vraiment interpréter cette unité de mesure.

[Xenos]

Cette unité (dp) est égale à 160 DPI (Points par pouce) par écran.

Donc, ce n'est ni plus ni moins que 1/160e de l'unité standard in, le pouce?

[@lucard]

c'est là où je trouve cela étrange. pourquoi faire une unité de mesure qui correspond à une autre...

déjà : DPI ne s'applique pas aux écrans (y'a pas de "points" sur un écran mais des pixels)... tout comme le ppi ne s'applique pas aux imprimantes (pas de pixels imprimés, mais des points).

ensuite, je pense qu'ils disent prendre 160ppi, mais cela doit correspondre à une moyenne. cependant sur smartphone, et tablette, on tourne généralement à 250ppi....

Il doit y avoir une nuance quelque part, reste maintenant à la trouver.

---

Ok je crois que je viens de trouver : 

Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). 
For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels.
 You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

plus d'infos

[Xenos]

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen

Donc, ni plus ni moins qu'1/160e de pouce O.o

Sachant que le nombre de pixels dans 1 inch est égal au dpi, dots/pixels per inch, alors
px = dpi * in ←→ dpi = px / in
px = dp*(dpi/160) → dp = px / (dpi/160) = px / ((px / in)/160) = px / (px / (in*160)) = px*(in*160) / px
→ dp = in*160

Donc, 1 dp est égal à la longueur en in * 160... Ou dit autrement, 1dp = 1/160e d'inch...

Franchement, pour moi, cela sent le pâté à la Google, qui cherche à poser son propre standard d'unité (totalement inutile puisque déjà existant) pour rendre captifs autant d'applications et sites que possible. Restons-en aux inch/mm si on veut des tailles réelles à l'écran, aux % pour les longueurs relatives, à l'em pour les longueurs ayant trait à la lisibilité (texte, images à texte) et aux px pour le reste.