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

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

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:

Dispositivo Factor de escala
iPhone XS Max (1242x2688px)  – 458 dpi @3x
iPhone XS (1125 x 2436px)  – 458 dpi @3x
iPhone XR (828x1792px)  – 326 dpi @2x
iPhone X (375x812px) @3x
iPhone 7 Plus (414x736px) – 401 dpi @3x
iPhone 7 (375x667px) – 326 dpi @2x
iPhone 6s Plus, 8 Plus (414x736px) – 401 dpi @3x
iPhone 6s, 8 (375x667px) – 326 dpi @2x
iPhone SE (320x568px) – 326 dpi @2x
iPhone 4 (320x480px) – 326 dpi @1x

 

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!

Share and Enjoy !

Shares
Densidad de píxeles. Diseñando para móviles.

Densidad de píxeles. Diseñando para móviles.

Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de pí­xeles de su pantalla. La densidad de pí­xeles es una unidad que se mide en pí­xeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.

Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.

(más…)

Share and Enjoy !

Shares
Guía tipográfica para el diseño web móvil

Guía tipográfica para el diseño web móvil

El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017.  Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio.  España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.

Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas.  Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.

El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles. (más…)

Share and Enjoy !

Shares

Guía gratuita Google para la creación de webs móviles

Guía Google para optimizar web mobile

Guía Google para optimizar web mobile

Si estás pensando en diseñar una web para smartphone, Google pone a tu disposición una guía gratuita con todo tipo de consejos, trucos y código para optimizarla y obtener los mejores resultados.

Para empezar, lo primero que Google te recomienda es realizar un diseño web receptivo, es decir, utilizar el mismo HTML para todos los dispositivos, independientemente de su resolución, y utilizar CSS para decidir los cambios según estas resoluciones.

Esta guía, te ofrece además, la posibilidad de consultar la compatibilidad entre smartphones o recomendaciones para el uso de javascript en tu sitio.

En definitiva, se trata de una guía realizada por Google, eso significa que si quieres tener contento a Googlebot, léete esta guía y síguela al pie de la letra 😉

 

 

VER LA GUÍA GOOGLE PARA WEB MOBILE

Share and Enjoy !

Shares

¿Cómo diseñar una web mobile?

Diseño de Web para Móviles

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

(más…)

Share and Enjoy !

Shares

Iconos gestuales para presentaciones de iPhone GRATIS !!!

Ante todo, mil disculpas por la caída de la web este fin de semana, afortunadamente ya está todo subsanado.

Hoy traemos unos iconos muy útiles para realizar presentaciones o storyboards de aplicaciones iPhone. Se trata de iconos gestuales para poder explicar la funcionalidad de nuestras apps o incluso de nuestras web para iPhone. Son 12 iconos en formato AI de uso libre.

Iconos gestuales para iPhone

Iconos gestuales para iPhone

 

 

DESCARGAR VECTORES GRATIS

Share and Enjoy !

Shares