Densidad de pixel, tamaño de diseños para HTML, Android e iOS

por Omar Benyakhlef | Android, Diseño Web, HTML, Imágenes, iPhone, Mobile, Usabilidad

A la hora de diseñar para múltiples dispositivos, tanto en dispositivos iOS como Android, corremos el peligro de no tener en cuenta las a veces enormes diferencias entre estos y que lo que en un dispositivo se ve bien, en otro aparezca muy pequeño o muy grande. En este artículo, intento abordar de una manera global el diseño tanto en apps como en html para dispositivos móviles, dado que en ambos casos tenemos que tener en cuenta varios aspectos para que la experiencia usuario sea óptima. Para ello es fundamental conocer varios conceptos que vamos a tratar a continuación.

Para empezar, sabemos que un pixel es un punto que emite un único color o escala de grises en una pantalla. Es obvio que cuanto mayor sea el número de pixels, más detalle y nitidez tendrá la imagen que estemos viendo, aquí es donde entra en juego la densidad de pixel.

Las pantallas se miden en pulgadas (1 pulgada = 2,54 centímetros), y cuando damos la medida de una pantalla, lo hacemos tomando como referencia su diagonal, cuando nos dicen que una pantalla es de 25 pulgadas, nos están diciendo que su diagonal mide 25 pulgadas, es decir, 25×2,54 cm

La densidad de píxeles es la cantidad de pixels que hay en una pulgada de una pantalla. Cuanto mayor sea este número, más nítida será la imagen y con más detalle. Esta cantidad de pixels que hay en una pulgada, se mide en pixels por pulgada ppp o en ppi (pixels per inch) o dpi  (Dots per Inch). Con lo cual una pantalla de alta densidad será aquella que más ppp tenga, esto significa que si hablamos de tamaños, cuando hacemos un botón por ejemplo de 100x60px, se verá más grande en una pantalla de baja densidad que en una de alta densidad.
Para calcular la densidad de una pantalla; densidad de pantalla = anchura de la pantalla en pixels / anchura de la pantalla en pulgadas

En el siguiente gráfico, podéis ver dos botones, los dos con las mismas dimensiones, 10 x 4px. El de la izquierda sería el resultado de mostrarlo en una pantalla de más densidad que el de la derecha, concrétamente 4 veces más pixels por pulgada que la de la derecha.

DP, pixeles de densidad independiente para Android

Para evitar este problema y que cualquier gráfico o imagen se pueda ver igual en cualquier pantalla, tenemos los DP, pixels de densidad independiente.

Los píxeles de densidad independiente son una unidad de píxeles virtual, que nos permiten definir las dimensiones de disposición o posición, de una manera independiente a la densidad de pantalla.

Un pixel independiente equivale a un pixel en una pantalla de 160 ppp.

• px = dp * (dpi / 160)
• dp = (ancho en píxeles * 160) / densidad de la pantalla

Se toma una pantalla de densidad «media» 160 ppp. En tiempo de ejecución, el sistema escala las unidades dp, según sea necesario, en función de la densidad real de la pantalla en la que se esté mostrando el contenido.

• Para una pantalla de 160 dpi, 1 dp equivale a 1 px
• Para una pantalla de 240 dpi, 1 db equivale a 1,5 px  — px=dp * (240/160); dp=px/(240/160); dp= 1,5px
• 320 dpi, 1db=2px
• 480 dpi, 1db=3px

En esta imagen podemos ver cómo si queremos mantener el aspecto de un botón en la pantalla, deberemos de hacer varios tamaños aplicando el factor que acabamos de ver, de ese modo siempre se verá en igual proporción dentro de las distintas pantallas. La escala no es real, pero si nos creemos que el botón que he dibujado en la resolución de 160dpi mide 10x10px, este botón habrá que guardarlo en 15×15, 20×20, ….

@1x, @2x, @3x, factores de escala para iOS

Cuando se trata de un iphone, los múltiplos que utilizamos son @1x, @2x y @3x que corresponden a las siguientes resoluciones:

Tamaños mínimos

Teniendo en cuenta que deberemos adaptar nuestras imágenes a los distintos, o al menos, a las pantallas más habituales, otro factor a tener en cuenta es el tamaño mínimo que debe tener un elemento en pantalla, con el que el usuario vaya a interactuar, como por ejemplo un botón.

Cuando colocamos un enlace en un texto, el interlineado e incluso el tamaño del texto, hace en ocasiones muy difícil accionarlo, lo más aconsejable siempre es colocar botones, y estos botones también deben ser lo suficientemente grandes como para que cualquier usuario pueda accionarlo sin dificultad con el dedo. Para ello se establece que todo botón debe al menos ser 42 px y no más de 72px. Diversos estudios han dado como resultado, que el tamaño preferido por los usuarios es de 60px

Cuando tenemos varios botones en una página, en ocasiones hay que priorizar o dar más importancia entre unos y otros, esta prioridad se establece también con estos tres tamaños, baja prioridad para un 42x42px, prioridad media para un 60x60px y alta prioridad para un 72x72px.

NOTA: Estas medidas son aplicables a botones rectangulares, siendo estas medias la altura mínima de dichos botones.

Los espacios entre botones, también están estandarizados, se ha comprobado que cuando los botones estaban demasiado separados, los usuarios se movían al objetivo táctil mucho más lentamente, y cuando los botones estaban demasiado juntos, los usuarios tenían menor precisión a la hora de pulsarlos, así pues se establece o se recomienda, que el espacio entre botones sea el siguiente:

• Separación entre botones de 42px: entre 36 y 48px
• Separación entre botones de 60px: entre 24 y 36px
• Separación entre botones de 72px: entre 12 y 24px

Encontraréis varias referencias y opiniones en cuanto a los tamaños, después de consultar varios estudios, creo que estos son los más aceptados, Android por ejemplo, recomienda que los objetivos táctiles sean al menos 48 x 48dp, con al menos 8dp (o más) entre ellos.

¿Cómo establecer en tu CSS las distintas imágenes-tamaño según la resolución de pantalla?

No voy a entrar en programación iOS y Android, porque no tengo ni idea 😉 Pero si os dejo a continuación el cómo abordar este tema en HTML. Lo que hacemos, es indicarle al navegador, mediante nuestra CSS que muestre una u otra imágen según sea la pantalla del dispositivo en el que se está mostrando nuestro diseño. Para ello usamos los llamados breakpoints o puntos de corte.

Según densidad:

@media
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
.miclase {}
}

Según ancho de pantalla:

@media 
only screen and (min-width: 320px) {  
.miclase {} 
}

Podemos ser incluso más específicos a la hora de determinar un punto corte en la CSS. En este caso, definimos ancho tanto mínimo como máximo, densidad e incluso orientación del dispositivo:

@media 
only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) { 
.miclase {}
}

Los breakpoints más comunes son:

• @media all and (min-width:1200px){ … }

• @media all and (min-width: 960px) and (max-width: 1199px) { … }

• @media all and (min-width: 768px) and (max-width: 959px) { … }

• @media all and (min-width: 480px) and (max-width: 767px){ … }

• @media all and (max-width: 479px) { … }

Salvar nuestro diseño en distintos tamaños lleva tiempo, además del tiempo de programación, por eso, antes de volverse loco y empezar a hacer todo tipo de versiones, lo recomendable es considerar nuestro proyecto, incluso si se trata de una actualización de un diseño viejo, consultar Analytics y ver qué especificaciones de pantalla son las  más habituales entre nuestros usuarios, y en función de eso, determinar qué puntos de corte tenemos en cuenta.

Hoy en día ya es imposible pensar en un diseño online y no tener en cuenta que será visto en dispositivos móviles, tablets, etc. Los diseñadores debemos estar preparados para asumir este desafío y seguir siempre las innovaciones, pero siempre teniendo en cuenta la usabilidad de nuestros diseños. ¡Innova con sentido común!