Círculo de Maquetadores

En este artículo os enseñaremos y aprenderéis como conseguir un Diseño Web 100% Móvil, se explicará paso a paso las distintas estrategias para lograr el objetivo de; diseñar una Web totalmente válida para la gran mayoría de dispositivos móviles, usando las técnicas y tecnologías que podrás ir viendo a continuación.

Imaginemos que tenemos que encagarnos de crear un diseño de un sitio web para móviles. Es probable que, a menos que estemos diseñando para un solo dispositivo, rápidamente nos vamos a encontrar con un problema común que experimentan todos los diseñadores que trabajan con dispositivos móviles, averiguar cuales son realmente las proporciones de pantalla de un dispositivo móvil.

Por ejemplo:

• El iPhone es de 320 píxeles de ancho por 480 píxeles de alto.
• Muchos dispositivos de Nokia N-Series son 240 píxeles de ancho por 320 píxeles de alto.
• Los dispositivos más nuevos a menudo apoyan un modo apaisado donde la anchura y la altura se invierte de forma espontánea.
• Los dispositivos de Nokia más populares disponen de pantallas que van de 176 por 208 píxeles hasta 352 por 416 píxeles.
• Las resoluciones de pantalla Blackberry variar desde 160 x 160 píxeles hasta a 324 x 352 píxeles.

Este artículo se destina a ayudar a desarrollar el diseño de estrategias eficaces para orientarlo a una amplia gama de dispositivos móviles y tamaños de pantalla. Con este fin, comenzamos con un esquema de dos cuestiones clave que se encontrará en el diseño para las pequeñas pantallas: la diversidad en la pantalla y el tamaño del píxel.

Esperar y gestión de la diversidad

En este punto, probablemente te estarás preguntando “… ¿es realmente necesario para el diseño de todos estos tamaños diferentes de pantalla?”, o “… es lo que realmente necesitamos para crear un diseño para cada dispositivo?”. Dependiendo de los requerimientos de negocio del proyecto, puede ser totalmente factible diseñar sólo para un tamaño de pantalla o dispositivo. Sin embargo, si los requisitos determinan que debe ser utilizado por la mayoría de los dispositivos, vamos a tener que encontrar la manera de hacer frente a esta diversidad.

Las cosas pueden no ser tan malas como parecen. Al diseñar para la web móvil, podemos suponer que las páginas se desplazan hacia arriba y hacia abajo como lo hacen los navegadores. Esto, de alguna forma elimina la necesidad de preocuparse por la altura de la pantalla, lo que nos permite centrar nuestros esfuerzos principalmente en tratar con la diversidad en anchos de pantalla del dispositivo. Afortunadamente DeviceAtlas Explorer nos proporciona un medio rápido para comprobar que el ancho de la pantalla en “se rompe” a través de los miles de dispositivos móviles conocidos.

Los gráficos anteriores indican, que la gran mayoría de los dispositivos comparten sólo tres anchos de pantalla, 128, 240 y 176 píxeles con muchos de los valores restantes, 120, 130, 160, 208 y 220 píxeles, no demasiado divergentes de estos tres valores centrales. Esto nos deja con unos cuantos dispositivos, tanto en los extremos altos y bajos, con una anchura de 96, 101, 320 y 320 + píxeles. Mientras que los dispositivos con un ancho de pantalla de menos de 128 píxeles pueden parecer un pequeño porcentaje de la totalidad, cuando se combina (96, 120, 101 y 84 píxeles) que suman hasta 469 dispositivos!. Más de la mitad del número de dispositivos de 240 píxeles o alrededor del 10% de todos los dispositivos conocidos.

Tambien debemos señalar que en este momento, menos del 5% de los dispositivos tienen resoluciones superiores a 320 píxeles de ancho. Esperamos que esto cambie en los próximos años, ahora estamos viendo las resoluciones de pantalla más pequeña (128, 176, etc), y dando paso a las más grandes (240 +), como se ilustra en el gráfico siguiente:

Teniendo en cuenta que el tamaño de pantalla es importante, también hay un parámetro adicional a considerar: la dimensión física de la pantalla.

El problema de los Píxeles

Durante años, los diseñadores han realizado principalmente plantillas Web para monitores comunes. El tamaño de pantalla medio es de 1024 x 768 pixels, y aunque el tamaño físico de las pantallas varían, las dimensiones totales normalmente son como resultado una densidad de píxeles de alrededor de 85 ppp (píxeles por pulgada). Últimamente, sin embargo, el panorama ha empezado a mostrar el cambio, sobre todo con los nuevos dispositivos portátiles:

• Netbooks, como el Asus Eee PC 900 tienen un rango de 9 pulgadas en diagonal con una resolución en torno a 1024 x 600 píxeles dándoles la densidad de píxeles de alrededor de 133 ppp.
• El iPhone de Apple tiene una resolución de pantalla de 320 x 480 píxeles que al combinarse con sus 3.6″ de diagonal de pantalla los resultados nos llevan a, una densidad de píxeles de 160 ppp.
• El E60 de Nokia tiene una resolución de pantalla de 416 x 352 píxeles y un minúsculo 2,2″ de diagonal de pantalla dándole una densidad de píxeles de más de 240 ppp!

Cuando se combina con la necesidad de apoyar muchos dispositivos, esta gran variación en la densidad de píxeles introduce un nuevo problema, el impacto del tamaño de píxels en el diseño.

La siguiente ilustración simula la misma imagen de 100 x 100 píxeles en dispositivos con la densidad de píxeles de 72, 144 y 240 píxeles por pulgada. Observemos cómo el tipo y los detalles finos se pierden como se representa en las imágenes más pequeñas.

Esto significa que debemos de dar solución a una amplia gama de píxeles. Sin embargo, es importante tener en cuenta que no todos los píxeles son creados iguales, y cuando sea posible:

• Determinar la gama completa de densidades de píxeles, necesitará ser soportada.
• Revisa tus diseños para estos dispositivos, para garantizar su visualización en todos ellos.
• Diseñar y definir los elementos de la maquetación en unidades relativas, como el em y en porcentajes.

Con un desarrollo y estrategia teniendo en cuenta los tamaños de pantalla, conseguiremos construir sitios Web escalables para una amplia gama de dispositivos móviles.

A continuación definiremos las diferentes estrategias para conseguir una Web para múltiples pantallas. No solo para dispositivos móviles sino también para pantallas de escritorio:

Estrategias de diseño de sitios Web para móviles

Estrategia 1: Definición de grupos de dispositivos

Como hemos comentado antes, puede haber miles de modelos de dispositivos, la diversidad no es tan mala como parece a simple vista. De hecho, es completamente posible agrupar muchos dispositivos con un ancho de pantalla similar y acabar con cinco grupos con diferentes anchos de pantalla:

• tiny: 84px, 96px, 101px, 128px, 130px, 132px
• pequeña: 160px, 176px
• medio: 208px, 220px, 240px
• grande: 320px, 360px, 480px +
• escritorio: 800px +

Estas agrupaciones son, por supuesto, totalmente arbitrarias y los requisitos de un proyecto pueden dictar un conjunto totalmente diferente. Por ejemplo, 320 píxeles para el iPhone y, poco más de 240 píxeles para navegadores móviles más recientes y 128 píxeles para dispositivos más antiguos. Al final, la definición de las agrupaciones de dispositivos realmente se reduce a los objetivos y la necesidad del proyecto. Con este fin, es una buena idea visitar DeviceAtlas de forma regular con el fin de ver las estadísticas y volver a evaluar la relevancia de sus agrupaciones.

Tambien debemos tener en cuentas las capacidades de cada dispositivo no todos soportan CSS avanzado, manipulación del DOM y JavaScript. Antes de hacer las agrupaciones comentadas anteriormente, debemos asegurarnos que los dispositivos móviles son compatibles con las tecnologías que ofrecerá el proyecto Web.

Estrategia 2: Crear un diseño de referencia por defecto

Después de haber definido los grupos de dispositivos, ahora debemos seleccionar el dispositivo de referencia. Este es el dispositivo que se usara como base durante el proceso de diseño y en última instancia, dará lugar a la creación de un diseño de referencia. Dependiendo de las necesidades de negocio que desee, se diseñará una versión de referencia para un ancho medio de pantalal de (240px). Esto mantiene el diseño suficientemente simple para adaptarse a pantallas más pequeñas, permitiendo al mismo tiempo la libertad de crear un diseño que se adaptará a los dispositivos con pantallas más grandes. También alguna vez crearemos 2 diseños de referencia, pero solo cuando sea necesario. Todo esto nos permite lo siguiente:

• Progresivamente mejorar el diseño de los dispositivos más avanzados (por ejemplo: para aprovechar el GPS o el apoyo a CSS3).
• Adaptarse a los multiples dispositivos de contacto (móviles, PDA, etc).
• Ajustar el diseño para compensar las actuales limitaciones graves en los dispositivos más restringidos.

Estrategia 3: Definir las normas para el contenido y la adaptación de diseño

Una vez que hayamos completado un diseño de referencia, también debemos proporcionar una dirección específica para la adaptación de este diseño a otros tamaños de pantalla. Similares a los contenidos de un documento de diseño visual. Estas normas y directrices deben ayudar al equipo de maquetación Web a adaptar el diseño sacando partido al código XHTML y CSS. Por ejemplo:

• El logotipo del sitio debe estar adaptado para cada agrupación de dispositivos para garantizar la visualización de dicha imagen.
• Las cabeceras deberían estirarse al 100% del ancho de la pantalla utilizando una imagen de fondo repetitiva siempre que sea posible.
• Las imágenes de contenido no deben ser mayor de 200 píxeles de ancho para el grupo por defecto, (o el 80% de la anchura de la pantalla del dispositivo).
• Las imágenes de contenido debe ser automáticamente optimizadas para escalar, independientemente del ancho de pantalla.
• Siempre que sea posible, las listas de iconos o gráficos decorativos deben de ser eliminados, y así conseguir el mayor espacio disponible para el contenido.
• Una hoja de estilo dinámica se utilizará con el fin de establecer los valores para cada dispositivo.

Aunque no es una recomendación formal, resume las estrategias comunes para adaptar y mejorar el diseño, manteniendo los tamaños de archivos al mínimo. Siempre debemos tomar decisiones de diseño pensando en la mayoría de usuarios, y en lo objetivos del proyecto.

Estrategia 4: Opta por los estándares web y un diseño flexible

Con las normas del diseño de referencia y la adaptación en su lugar, la estrategia final se basa en la flexibilidad de marcado a través de la reutilización de un código genérico, basados en estándares XHTML y CSS. En la práctica significa, la creación de un código XHTML y CSS genérico, que podemos usar mayormente en cualquiera de los futuros proyectos para dispositivos móviles, esto nos aportará beneficio, tiempo y productividad en los siguientes proyectos. Dado el gran número de dispositivos móviles, este beneficio no puede ser subestimado, ya que garantiza que su contenido será accesible a un gran número de usuarios, sin complicar el trabajo a los desarrolladores. A continuación, se presenta una serie de indicaciones para aumentar progresivamente el diseño de las agrupaciones dispositivo diferentes, a través del uso de navegador y/o el dispositivo específico. CSS, gráficos y marcado HTML.

A medida que vamos leyendo aprendemos que realmente para conseguir un diseño accesible para cualquier dispositivo móvil es, crear diseños líquidos partiendo de un diseño de referencia y maximizar el uso de CSS y XHTML. Todo esto incluye tomar como referencia las siguientes inidicaciones:

• No especificar un ancho de documento específico, permitiendo así que el diseño pueda expandirse y contraerse, y así pueda llenar la pantalla del navegador del dispositivo.
• Aprovechar los elementos de bloque que también se expanden y se contraen de forma nativa.
• Usar la hoja de estilos para dsitribuir los elementos de contenido de forma accesible para el usuario.
• Especificar el tamaño de los elementos de diseño utilizando los porcentajes de modo que, naturalmente se expandan y se contraigan adaptandose al ancho de página.

Poniendo todo junto

Para minimizar al máximo el tiempo de carga de la página, debemos simplificar y agrupar el código a una sola línea. Tambien tenemos que cumplir con los estándares XHTML y CSS. Por ejemplo el marcado y diseño de la web de la BBC para móviles es bastante simple y con un contenido básico:

Como podemos comprobar es un diseño totalmente fluido y escalable, que ocupa todo el ancho de la pantalla, independientemente del dispositivo que se use. El resto de los estilos y contenidos son especialmente adaptados en la siguiente imagen, que satisfacen el producto o familia de dispositivos más usados actualmente:

• El logotipo cambia de tamaño o es sustituido para adaptarse a la anchura de la pantalla del dispositivo.
• La cabecera y otros elementos utilizan una textura como fondo y un color, en dispositivos más antiguos dicha textura no se muestra, perso si se muestra el color de fondo.
• La BBC, parerce que a optado por adaptar el contenido a diferentes grupos de dispositivos, como podemos comprobar en la imagen las diferencias que hay entre el iPhone y el resto de dispositivos. También podemos ver que en el iPhone se muestran más contenidos y gráficos aprovechando al máximo su gran pantalla.
• Las imágenes son escalables y se adaptan a cualquiera de los dispotivios.
• En los dispositivos más grandes, los iconos asociados a cada elemento de la lista se pueden ver. Mientras que en los dispositivos más pequeños se elimina para garantizar una longitud de línea cómoda, para la visualización correcta del contenido.

El sitio Web de la BBC, es un ejemplo ideal, ya que muestra de forma simple que se puede combinar un marcado y estilos para llevar a acabo la visualización correcta de un amplio grupo de dispotitivos móviles. Su diseño, adaptación, redacción y funcionalidad esta totalmente orientado a los múltiples dispositivos que usan los usuarios. Con una rápida carga del sitio, una buena optimización y equilibrio etre diseño y accesibilidad.

User Agent Switcher

Por último quiero incluir un práctico complemento para firefox, su nombre es User Agent Switcher, nos permite visualizar una Web en diferentes dispositivos. La extensión User Agent Switcher añade un menú y un botón de la barra de herramientas para cambiar el agente de usuario del navegador. Está diseñado para Firefox, Flock, Songbird y Thunderbird, y se ejecutarán en cualquier plataforma que soporte estos navegadores, incluyendo Windows, Mac OS X y Linux. Creo que es la herramienta más apropiada para testear nuestra maquetas en cualquier dispositivo. Tambien os añado un fichero xml para integrarlo en la herramienta, con el que nos añadira los agentes de usuario de los distintos dispositivos móviles más populares y usados actualmente:

Descargar pack de agentes de usuario

Concluyendo, espero que todo lo que hemos comentado os sirva de gran ayuda para vuestros proyectos para dispositivos móviles, ya que son el futuro de la Web.