13
Dic 2012

Entendiendo el diseño
web responsivo – PARTE 3

En las entradas previas (PARTE 1 y PARTE2) explicamos las bases para generar un sitio con una estructura responsiva y fluida. El conocimiento de CSS y su aplicación es solo una parte de la solución, lo demás corresponde al diseño que tendrá finalmente nuestra creación. Para finalizar con el tema del diseño responsivo, ahora mencionaremos puntos importantes a considerar.

¿Cuál es la mejor forma de presentar la información?

Primer necesitamos conocer el tipo de usuario al que estará enfocado nuestro sitio, esto nos permitirá definir la importancia que tendrá la información que mostremos, creando una jerarquía del contenido. Lo que posteriormente nos ayuda a crear perfiles para cada dispositivo. Es decir, en cada dispositivo tenemos determinado espacio para mostrar información, ¿pero cómo lo aprovecharemos? ¿Es necesario mostrar una imagen que en monitores le da una gran apariencia a nuestro sitio pero en tabletas y Smartphones ocupan mucho espacio? Desplegar lo que realmente es necesario y de importancia para el usuario nos ayuda a optimizar la manera de mostrar los elementos. Qué es lo que el usuario necesita ver hasta arriba del sitio, la razón por la que regresa a nuestro sitio.

Optmizar el espacio que poseemos para desplegar contenido.

Dicho lo anterior, tenemos que recordar que el diseño se trata de buscar soluciones, por lo cual lo ideal es conseguir la adaptabilidad del contenido para comodidad del usuario, que es nuestro cliente potencial. De preferencia hay que pensar a futuro en los puntos de cambio en los estilos en CSS, ya que la salida de nuevos dispositivos con otras características pueda afectar nuestra página. Un ejemplo reciente de ello es la salida de equipos de Apple con retina display,lo que sucede con ellos es que las pantallas poseen una mayor densidad de pixeles, pixeles tan pequeños imperceptibles al ojo humano, esto ofrece la capacidad a una pantalla de proporcionar una calidad visual similar a material impreso a 300 DPI. Pero, esta característica ocasiono un pequeño problema, sitios diseñados anteriormente a la salida de esta tecnología lucían bien en cualquier equipo, pero al desplegarse en equipos nuevos, las imágenes perdían calidad, irónicamente haciendo evidentes los pixeles en ellas; esto sucedía específicamente con iconos de 16×16 pixeles e imágenes de baja resolución.

Mayor densidad de pixeles afecta imagenes de poca resolución

¿La solución? Agregar un estilo específico para dispositivos con retina display, si, doble trabajo, con una media querysimilar a la siguiente:

@mediaonly screen and (-webkit-min-device-pixel-ratio: 2),

only screen and ( min--moz-device-pixel-ratio: 2),

only screen and ( -o-min-device-pixel-ratio: 2/1),

only screen and ( min-device-pixel-ratio: 2),

only screen and ( min-resolution: 192dpi),

only screen and ( min-resolution: 2dppx) {

/* Estilos para retina */

}

Con lo anterior se detecta la densidad de pixeles del dispositivo, y si este es mayor al normal se aplicaran los estilos necesarios para mejorar la visualización de la página. El punto fuerte de que el diseño sea hecho con CSS es que permita una rápida actualización de ser necesaria. El uso de ancho de banda es también importante, uno de los principales objetivos de un buen diseño no solo es que se vea bien, sino que  el sitio cargue rápido en diferentes dispositivos. Parte de conocer a los usuarios es saber desde que dispositivos nos visitan frecuentemente, esta información es fácil de obtener usando herramientas como Google Analytics, y con ello podemos tener una idea de lo que el usuario puedo visualizar. Por ejemplo, una computadora de escritorio conectada a internet posee una conexión, que por mínimo actualmente, tendría una velocidad de 3 MB, esto nos indica que no debería tener problemas en cargar una considerable cantidad de imágenes en pocos segundos.

¿Pero que sucede con las tabletas  y dispositivos móviles? Estos no necesariamente tendrán acceso a internet vía WIFI, quizás se utilicen en zonas donde no haya acceso a conexiones inalámbricas y accedan usando planes de datos de su proveedor de telefonía. Estas pueden estar limitadas por dos cosas, un plan de datos con un límite de navegación y una conexión lenta a comparación de ordenadores de sobre mesa. Lo que a su vez ocasiona dos problemas, uno para el usuario y otro para nuestra página, visitar nuestro sitio con gran cantidad de imágenes ocasionaría mas petición de datos por parte del dispositivo y el usuario podría quedarse sin navegación por lo cual no frecuentaría nuestra página mientras no disponga de señal WIFI; y nuestra página se desplegaría lentamente en caso de que su conexión así lo sea.

El usuario pierde la comodidad de visitarnos y nosotros a él. En estos casos, es recomendable que en el diseño para pantallas más pequeñas, tratemos de mostrar solo lo esencial, manteniendo al mínimo la cantidad de imágenes desplegadas y de poco peso. Enfocándonos en mostrar texto de una manera clara y limpia, y solo en caso de ser necesario para el contexto de la información, mostrar imágenes.

Otra técnica recomendable para salvar ancho de banda, es utilizar sprites (en la siguiente publicación explicaremos el uso de sprites), esta consiste en utilizar una sola imagen que contenga todos nuestros iconos e imágenes recurrentes en el sitio, y mostrar solo una fracción de ella donde se requiera. De este modo ahorramos peticiones al servidor para que el sitio cargue de manera más rápida. No es lo mismo que el navegador pida 20 imágenes por separado que sumarian quizás un 70% más que solicitar una sola imagen que contenga todos nuestros iconos y logos.

Además, lo más importante, probar y probar una y otra vez nuestro sitio en los dispositivos que estén a nuestro alcance. O usar herramientas que nos permitan simular la visualización en otros dispositivos. De eso modo podemos encontrar pequeños errores e irlos corrigiendo poco a poco para tener un resultado final optimo. El resultado final es decisión de cada diseñador, pero hay que tener siempre en cuenta que se diseña para personas que quizás no tengan idea de lo que uno pretende mostrarles y ellos solo quieren algo que les sea fácil de acceder.

Por: Arturo Tadeo / Uncategorized

Comments are closed.

DOTTO