Sí. Usamos un par de cookies, y una ni siquiera es nuestra. Deberá aceptarlas para evitar este mensaje que mostramos por imperativo legal

“Las medidas en ‘dip’ y el diseño web proporcional para nuevos dispositivos”, noticia en Interdixit

Diseño + Desarrollo. Multimedia. Web. Comunicación. Grafismo. Arte

Noticia: “Las medidas en ‘dip’ y el diseño web proporcional para nuevos dispositivos” de la sección Tendencias

Las medidas en ‘dip’ y el diseño web proporcional para nuevos dispositivos

El consorcio W3C ha establecido una nueva unidad como estándar para mediciones en pantalla. La nueva unidad es el píxel de referencia, que se contrapone al píxel físico utilizado hasta ahora por diseñadores y programadores web y por profesionales de la fotografía y la televisión. La nueva unidad mínima establecida por el consorcio que estandariza la tecnología web debería eliminar las alteraciones en tamaños de fuentes tipográficas e imágenes en los diferentes dispositivos posibles: pantallas de sobremesa, tablets y smartphones.

Hasta ahora el píxel era una unidad de hardware mínima e indivisible, lo que permitía su uso como instrumento de medida de la pantalla. Un píxel físico es un punto de luz que emite tres colores (rojo, verde y azul) con distinta intensidad para formar manchas de color en pantalla. Su utilización horizontal y vertical permite establecer medidas en la pantalla. Incluso las pantallas se definen por la densidad de píxeles por pulgada, partiendo de un estándar mínimo de 72 píxeles por pulgada, el equivalente al número de puntos tipográficos visibles sin ruido en la impresión tradicional en papel.

Cuando en pantalla se diseña una línea de 1,5 píxeles de grosor, el hardware se encarga de mostrar un píxel de color negro y el contiguo (en anchura) de color gris (negro al 50%), puesto que no puede subdividirse. Esta circunstancia de medio píxel produce un efecto borroso o desenfocado a la línea.

La nueva unidad de medida establecida por el W3C pretende combatir el problema suscitado con los nuevos dispositivos en los que, mediante software, se producen resoluciones altísimas de pantalla que no se ajustan a la resolución real. Por ejemplo, 960 píxeles de pantalla en un iPhone 4 son realmente 480 píxeles en otro dispositivo que no tenga pantalla Retina. Evidentemente, un diseño ajustado al píxel utilizando la medida real no coincidirá en un dispositivo que utilice la medida actual de referencia. Un píxel real es medio píxel de referencia en un iPhone 4.

El ‘dip’ de Android
El consorcio pretende que la nueva definición del píxel de referencia sea siempre la misma medida en cualquier contexto y dispositivo, definiéndolo como una medida independiente de la resolución.

En otras palabras, una letra de 24 píxeles tendrá exactamente el mismo tamaño en un teléfono móvil que en una pantalla de sobremesa de 21 pulgadas.

Desde la perspectiva web, estas medidas afectan a la programación de estilos CSS, que obligan a establecer filtros en función del pixel-ratio del dispositivo (relación entre el píxel real y el píxel de referencia) y de la orientación de la pantalla. Para cada caso, será necesario escribir nuevas instrucciones que aprovechen la altura, anchura y profundidad de la pantalla.

Para solventar el problema, los programadores de Android han establecido una nueva unidad de medida para los archivos CSS, el density independent pixel (dip), que podría definirse como el número de píxeles que caben en un punto tipográfico. De esta manera se puede utilizar px como unidad de medida de gráficos y dip como unidad tipográfica, mostrando siempre en todos los dispositivos las dimensiones exactas y reduciendo el trabajo de programación CSS.

Aún así, sólo funciona con dispositivos Android y no parece práctico, además de repercutir creando confusión en los ámbitos profesionales de los fotógrafos y grafistas.

Tamaños proporcionales
Antes del polémico establecimiento de la nueva unidad de medida, los diseñadores y programadores web podían utilizar trucos de accesibilidad que proporcionan siempre un excelente resultado de proporciones en pantalla, independientemente de la resolución del dispositivo.

El procedimiento es mucho más sencillo y eficiente. Sólo hay que utilizar la unidad de texto mínima del navegador del dispositivo y convertirla en un proporción de escala (em o ex), reasignando la proporción a toda la aplicación. Es decir, si un navegador tiene establecido su cuerpo de texto en 16 px, se establecerá la equivalencia a 1 em y, a partir de aquí, se irán asignando proporciones de em a cada elemento. Si la programación se visualiza desde otro dispositivo con un cuerpo de texto asignado a 33 px, por ejemplo, las proporciones de todos los elementos se mantendrán, puesto que se habrá establecido una equivalencia de 1 em igual a 33 px, y los porcentajes serán los mismos.

El diseño para pantallas reducidas, como los smartphones, tampoco resulta importante si la estructura de elementos-bloque es consistente. Tocando dos veces sobre uno de los bloques, debería ampliarse ocupando toda la pantalla, manteniendo las proporciones y permitiendo regresar a la apariencia original, de modo que la experiencia de usuario resulta práctica y eficiente sin requerir diseños específicos de páginas web para estos dispositivos.