Atrévete a crear el negocio de tus sueños

Diseño Web para Múltiples Plataformas

responsive design

El diseño web constituyó un gran salto desde el diseño gráfico tradicional, primero la interactividad y luego la revolución de los contenidos generados por los usuarios hicieron de esta área del diseño la más dinámica y cambiante de todas, con una evolución vertiginosa que exige una constante adaptación.

Hoy en día, los diseñadores de páginas web se enfrentan a un nuevo reto: el de crear diseños que resulten coherentes y funcionales a lo largo y ancho de una creciente variedad de plataformas, desde teléfonos celulares a pantallas de TV, pasando por todas las variaciones del iPad hasta una amplia variedad de pantallas de ordenador.

Por otro lado, algunos de los contenidos que se presentan en línea están destinados a acabar impresos en papel, de modo que tampoco se pueden descuidar los stylesheets de impresión, que garanticen que el contenido también resulte organizado y coherente en el papel.

Conoce a tu audiencia

Si lo que buscas es que tu sitio se vea impecable en todos los dispositivos sobre la faz de la Tierra, es posible que fracases. Sin embargo, si conoces la audiencia del sitio para el que estás diseñando, puedes centrarte en perfeccionar la experiencia del usuario para los principales dispositivos que este tipo de público más probablemente utilice. Asimismo, en términos de localización, si estás diseñando un sitio para usuarios en Asia o el Medio Oriente, deberás saber que tienes que centrarte en primer lugar en Symbian, ya que la plataforma de Nokia sigue siendo la norma allí.

Tanto Mobile Safari de Apple como Nokia, Google para Android y BlackBerry utilizan Webkit, lo cual establece algunas reglas básicas, que permiten una cierta consistencia, aunque, por supuesto, el contenido no se verá igual en todos los dispositivos.

Lo esencial aquí es enfocar la optimización de diseño web en las plataformas de los principales navegadores y dispositivos a través de los cuales piensas que los sitios que estás diseñando serán visualizados con mayor frecuencia.

Testeo con emuladores

Hay muchas herramientas que permiten a los diseñadores testear sus diseños de sitios web, emulando la experiencia de los usuarios que acceden a las páginas web en diferentes plataformas.

Hay aplicaciones específicas y plugins que permiten ver tu sitio tal y como aparecerá en una plataforma o dispositivo específico, como Android (Android SDK) o Symbian, por lo general estos programas se pueden encontrar en los sitios de los fabricantes de cada dispositivo.

Afortunadamente, hay otras herramientas más completas, que emulan las experiencias de múltiples plataformas. Por ejemplo, puedes utilizar DeviceAnywhere para probar sitios web a través de 2.000 dispositivos de navegación.

Tu trabajo nunca estará completo sin el testeo, por lo cual, esta etapa debe convertirse en un etapa clave del trabajo de diseño.

Utilización de stylesheets

Las stylesheets (literalmente “hojas de estilo”) móviles pueden configurar ciertos parámetros que permitirán a tu sitio web adaptarse en función del navegador y el dispositivo que se esté utilizando.

Básicamente, lo que se busca es maximizar el tamaño de la pantalla y hacer más confortable la lectura, mientras se mantiene un diseño consistente con la versión estándar para pantalla del ordenador.

Incluso en nuestro tiempo, el diseño se trata exclusivamente del mensaje. Si consigues transmitir el mensaje en una forma coherente y eficaz, entonces estás haciendo bien tu trabajo, más allá de los tamaños de la pantalla o los diferentes tipos de dispositivo de navegación.

Optimización para impresión

Muchas personas todavía prefieren leer ciertos tipos de contenidos, especialmente cuando se trata de largos pasajes de texto, impresos en papel. Aunque la mayoría de los diseñadores muchas veces no toman en cuenta este detalle, todos ellos deberían estar haciéndolo.

Aparte de los casos en los que los documentos que se presentan en línea han sido exclusivamente creados para ser impresos, como en el caso de las impresión de revistas, donde los usuarios compran o descargan las revistas en archivos PDF, los diseñadores y webmasters deben poseer la sensibilidad para identificar qué tipo de contenidos o secciones tienen más probabilidades de acabar en una página, y así crear versiones de impresión, que eliminan los datos de navegación y los íconos seleccionables, por ejemplo, y presentando diseños que permitan una lectura confortable.

La consistencia y el mensaje

Hay algunas formas sencillas para asegurar que tu mensaje sigue siendo compatible a través de las distintas plataformas. Siempre debes tener un diseño de referencia por defecto que marcará la pauta, que es el que vas a adaptar, creando variaciones del mismo para su uso en diferentes dispositivos.

Los diseños modernos deben tener una “mente” flexible, y también ayuda organizar los dispositivos en diferentes categorías, para evitar perderse en un mar de miles de ajustes de optimización. Los distintos dispositivos, navegadores y pantallas comparten entre ellos ciertos parámetros, y debes utilizar este hecho en tu beneficio.

He aquí hay una categorización útil de los anchos de pantalla:

  • diminuta: 84, 96, 101, 128, 130 y 132
  • pequeña: 160 y 176
  • mediana: 208, 220 y 240
  • grande: 320, 360, 480 (+)
  • desktop: más de 800

Por último, en todos los casos, siempre se debe hacer todo lo posible para lograr una funcionalidad similar para los sitios que diseñas en todas las plataformas, porque estos sitios están destinados a ser utilizados, no sólo visualizados, y los usuarios siempre estarán agradecidos por ello, tanto como tu cliente.

Imagen de Chaising Daisy

Autora

Autora: Verónica Pamoukaghilan
Web: thewanderlife.com

mi firma
Veronica Pamoukaghlian
Verónica vive en Montevideo, Uruguay. Es escritora y productora de cine y tiene un sitio de poesía bilingüe en Wordnectar y un blog de viajes en The Wander Life Twitter @verozoneuy

Comentarios

  • Federico
    Responder

    Muy buena la guia. La verdad muy util, y supone una metodologia que muchos desprecian a la hora de desarrollo web. Excelente pagina, ya te sigo por Twitter. Soy nuevo en esto y me sirve mucho lo que escribis. Saludos!


¿Y tú qué opinas? Deja un comentario...