comparte el articulo 

Diseño web multiplataforma

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: Se calcula que en 2013, el número de personas que utilizarán ordenadores para acceder a Internet será inferior al de personas que lo hagan a través de dispositivos móviles. Hay que pensar en dispositivos en lugar de en resoluciones.

El diseño web ha evolucionado desde sus inicios a pasos agigantados, convirtiéndose en el ambiente dinámico y cambiante en el que nos movemos hoy en día, el cual nos exige una rápida adaptación y flexibilidad como diseñadores.

Se estima que para el año 2013, el número de personas que utilizarán ordenadores para acceder a Internet serán superado por el de las que acceden a través de sus dispositivos móviles.

El reto al que nos enfrentamos hoy tiene que ver con la creación de diseños consistentes y funcionales, que se adapten a la compleja variedad de plataformas que los usuarios utilizan hoy en día para acceder a la web, desde teléfonos móviles con pantallas táctiles a televisores LCD gigantes, tablets, laptops y desktops. Por ejemplo, actualmente, 1 de cada 5 usuarios utiliza su teléfono para acceder a Internet.

Cómo si esto fuese poco, parte de los contenidos que creamos no sólo serán vistos en una pantalla, sino que serán impresos en papel, lo cual exige que incluyamos hojas de estilo con diseño de impresión, que le aseguren al usuario que los contenidos serán coherentes y fáciles de leer en el papel.

diseño web multiplataforma

Saber para quién diseñas

Si buscas que tus diseños funcionen perfectamente en cada uno de los dispositivos que existen, es muy probable que no lo consigas. En cambio, si conoces muy bien la audiencia que tiene la aplicación o webpara la que diseñas, tendrás la capacidad de concentrarte más que nada en los dispositivos que los usuarios del sitio utilizarán con mayor frecuencia.

El lugar geógrafico de donde provienen la mayoría de los usuarios también importa. Por ejemplo, si el sitio es visitado desde Asia o el Oriente Medio, Symbian será la plataforma que sea utilizada con más frecuencia, ya que Nokia continúa siendo líder en esa área.

Por otro lado, si se trata de un sitio de finanzas, es muy probable que el público al que apunta el sitio tenga iPads, iPhones y Blackberries, y deberás aplicar este tipo de razonamiento y análisis de patrones de consumo de la audiencia para cada uno de los sitios que diseñes.

Ya que los browsers Mobile Safari (Apple) Nokia, el Google Chrome para Android y BlackBerry usan Webkit, hay ciertos parámetros básicos que facilitan el logro de una consistencia entre la visualización en estas plataformas, si bien siempre habrá variantes entre los diferentes dispositivos.

Lo más importante es optimizar nuestros diseños para las plataformas de los browsers y dispositivos en los cuales estimamos que éstos serán visualizados más comúnmente, de acuerdo al tipo y localización de la audiencia de cada sitio.

Actualmente, debido a la enorme cantidad de resoluciones diferentes que existe, resulta casi imposible hacer un diseño para todas, o peoraún un diseño para cada una… la idea es hacer un diseño capaz de adaptarse a cualquier dispositivo en base a rangos de resolución.

Hay que dejar de pensar en resoluciones y empezar a pensar más en la experiencia de usuario en sí de cada tipo de dispositivo (móviles, tablets, pcs, ebooks..)

Prueba tus sitios con emuladores

Existe una gran cantidad de herramientas para que los diseñadores puedan testear sus diseños, las cuales ofrecen una reproducción fidedigna de la experiencia de los usuarios que visitan la web utilizando diferentes plataformas.

Por un lado están los programas y plugins que ofrecen la posibilidad de experimentar el sitio que diseñamos de la misma manera en que se verá un determinado dispositivo, por ejemplo Android (Android SDK) o Symbian.

Este tipo de programas se encuentran generalmente a disposición en las webs de los fabricantes de cada dispositivo. He aquí algunos de los más útiles:

Por otra parte, existen herramientas más complejas capaces de simular las experiencias de usuario  en una variedad de plataformas. DeviceAnywhere es una de las más populares, ya que permite testear nuestros diseños webs en más de 2.000 dispositivos diferentes.

Sin un testeo a través de las plataformas más usuales, el trabajo de diseño no está completo, y con el tiempo, esta etapa se está volviendo cada vez más crucial. Los diseños flexibles y adaptables sobreviven, mientras que los que no se adaptan ya son cosa del pasado.

Forma y contenido

Las hojas de estilo permiten configurar algunos parámetros básicos, los cuales harán que el sitio se adpate según el navegador y el dispositivo en el cual se está visualizando.

La idea central es utilizar efectivamente el tamaño y formato de la pantalla y lograr una lectura confortable, al mismo tiempo que diseño permanece consistente con el concepto original desarrollado para pantallas estándar de laptop o desktop.

No debemos olvidar que, aún cuando el formato y el medio toman tanta relevancia, lo más importante sigue siendo el MENSAJE. Si logras transmitir el mensaje de manera eficaz, tu trabajo ha sido exitoso, independientemente de los tamaños de las pantallas o los tipos de dispositivo de navegación.

Optimizando la impresión de una web

Hay algunos tipos de contenidos, en especial cuando se trata de textos muy largos, que algunos usuarios prefieren imprimir para leer luego en papel. Si bien muchos diseñadores olvidan este pequeño  detalle, es importante tenerlo en cuenta.

Más allá de los documentos creados especialmente para ser leídos en papel, por ejemplo en lo que se refiere a la impresión de revistas que los usuarios descargan en forma de PDF, tanto los diseñadores como los webmasters necesitan desarrollar la sensibilidad para ser capaces de identificar cuáles serán los contenidos que más probablemente acabarán siendo impresos, para así ofrecer stylesheets y versiones especiales para impresión, donde los datos de navegación y los botones de navegación no aparecen, mientras que la lectura se vuelve mucho más confortable.

Un mensaje consistente

Hay maneras bien simples de asegurar que su mensaje se mantiene en el caso de una gran variedad de plataformas. Es importante que exista un diseño de referencia que es el que marca las pautas, el cual luego adaptaremos para las diferentes plataformas y dispositivos.

Los trabajos del diseñador moderno necesitan tener una “mente” extremadamente flexible, para lo cual es muy útil clasificar los dispositivos en distintas categorías, con el fin de no perdernos en una maraña de cientos, incluso miles de opciones de optimización.

Una de las categorizaciones más útiles es la que podemos hacer de acuerdo al ancho de las pantallas:

  • Muy pequeña: 84, 96, 101, 128, 130 y 132
  • Pequeña: 160 y 176
  • Tamaño medio: 208, 220 y 240
  • Grande: 320, 360, 480 (+)
  • Desktop o dispositivos de escritorio: más de 800

Finalmente, es esencial intentar que la totalidad de las funciones de los sitios que diseñamos se mantenga a través de las distintas plataformas, porque además de ser visualizados, estos sitios están hechos para ser utilizados, y los usuarios estarán tan agradecidos por esto como nuestros clientes.

Imagen por VFS Digital Design

Publicado el 12/07/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es y su autora. Prohibida su copia

Autor: Veronica P.

URL: The Wander Life

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras