Diseño web multiplataforma

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.
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:
iBBDemo2 Simuladores para iPad y iPhone
Android SDK Simulador para Android
Blackberry Web Development Page Simuladores y consejos de
diseño para Blackberry
Symbian S60 SDK Información sobre simuladores para NOKIA
Opera Mini Emulator Simuladores para Opera y recursos ú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