Diseño responsivo, web móvil y wireframes

Como estamos en fechas navideñas nuevamente va a incrementarse el número de personas que navegarán la web desde dispositivos móviles, sean teléfonos o tablets. Es lo que tienen estas fechas, se regalan más cosas ahora que casi en el resto del año, más gente se plantea acceder a cosas que el resto del año no se plantea. Total, que va a haber más gente el año que viene mirando webs en el metro, en el metro y en todas partes.

Esto también hará que el año que viene más responsables de webs se planteen, y si no definitivamente deberían plantearselo, qué estrategia móvil seguir para la difusión de su proyecto, información, soporte o ventas a través de la red. Ya hace unos años que todo el mundo profesional se dió cuenta que Internet era el camino a seguir y ahora, poco a poco, tras quizás muchas inversiones en esa dirección, todo el mundo empieza a estar de acuerdo en que la web móvil es el camino a seguir.

Hasta ahora eso no era fácil y quizá siga sin serlo, pero algunos elementos se han desarrollado para intentar abordar el camino de la web móvil más fácilmente. La problemática principal es servir contenidos a dispositivos de diversos tipos, formatos y capacidades. En la práctica eso quiere decir que si accedemos a la web desde un teléfono móvil nos encontraremos con que la "experiencia de usuario" es muy diferente. Para empezar todo es más pequeño y hay que manejarlo con el dedo. Solo ese cambio es tremendamente significativo desde la perspectiva de abordar el diseño de la web como un todo.

Mucha gente quiere vendernos la idea de que la "web responsiva" es la solución más económica para esta cuestión. La solución de la "web responsiva" es una idea genial que viene de la mano de la evolución de los estándares de código de marcas (html y css básicamente) que se usa para componer páginas. Esto es un poco técnico para profanos pero quiere venir a decir que como la web está cambiando poco a poco hacia nuevos estándares (que son el html5 y el css3) los navegadores actuales pueden hacer grandes maravillas en cuanto a interactividad y cambios de los elementos de la página en cualquier formato estructural. La web de mediaqueri.es nos da una lista muy interesante de webs que muchos diseñadores proponen por considerarlas un buen ejemplo de uso de la filosofía de web responsiva. Bien, podemos componer código que se adapte el sólito a, principalmente, 3 anchos de pantalla:

• el formato de PC es el ancho correspondiente a pantallas de más de 1024 píxels de ancho, un estándar bastante extendido en dispotivos con pantallas de más de 10" de ancho y que permite hoy en día cualquier tipo de dinamismo y que se manejan con un ratón
• el formato tablet es el ancho que podriamos entender entre 1024 y 600 píxels de ancho, es decir el correspondiente (a grosso modo) a tablets de entre 5" y 10" y que se manejan con un dedo
• el formato teléfono es el ancho que podriamos suponer menor siempre de 600 píxels de ancho y que corresponde a teléfonos con pantallas menores de un acho ancho de 5" y que también se manejan con un dedo
• no tardaremos mucho en tenernos que plantear un cuarto formato en el entorno "webTV" para pantallas de televisión donde cada vez la gente contecta sus dispositivos informáticos via HDMI y que tiene sus propias problemáticas que algún trataremos

Esto que parece una gran idea y nos lo venden como una forma más económica de tener una web que se adapta a PCs, tablets y teléfonos tiene sus puntualizaciones que bien vale la pena tener en cuenta. Tener un motor de presentación visual responsivo bien ajustado de base permite saber que el diseño que le pongamos (esa adaptación de nuestra imagen corporativa que los diseñadores nos elaborarán) se ajustará correctamente a los 3 anchos básicos. Es cierto, pero también es cierto que ahora no hay que pensar solo en un diseño, sinó en 3 diseños. Luego puede resultar que la versión responsiva de muchas webs puede parecerse mucho, por lo menos en la versión de teléfono ya que no hay tantas maneras de hacer una web que se maneja solo un el dedo.

Por otra parte y a pesar de que los estándares actuales siguen siendo poco a poco incorporados en todos los navegadores de PC nos podemos encontrar la sorpresa de que las versiones equivalentes de teléfonos y tablets no sean tan potentes y completas como nos esperábamos. Tampoco podemos dejar de lado que depurar errores o inconsistencias en esas plataformas a veces es un trabajo complejo que se hace un poco a ciegas ya que no disponemos en esos navegadores de las mismas herramientas que en sus contrapartidas de PC.

Al mismo tiempo hay que diagramar la web no una sola vez, sinó 3, ya que quizá en la versión de PC querremos ofrecer un máximo de información y en la versión de teléfono, y por mucho que nuestro diseño se adapte automáticamente, quizá no querremos mostrar todo ese contenido. Esto es muy fácil de entender si pensamos en la web de un periódico, es imposible mostrar todo eso, entero, al mismo tiempo en un PC y en un teléfono, por mucho que la capa visual se adapte solita. En el teléfono nos va a quedar un "scroll" vertical interminable y quizá en ese caso no es suficiente con un diseño responsivo, quizá se requiere una versión distinta para el teléfono. Esto nos llevaría a plantearnos otra disyuntiva: ¿versión de web para móvil o datos para móvil a través de una "app" descargable desde algún market? Esto ya es harina de otro costal, y su precio no será nunca económico pues obliga a un desarrollo de software generalmente en un mínimo de dos plataformas: Android i iOS de Apple. En resumen no toda web puede ser responsiva y desarrollar una version de "app" es algo muy costoso y complejo. El punto medio es crear una web paralela para el contenido móvil que dependa de la web principal quizá compartiendo la base de datos o actualizando los datos que presenta de la web principal vía webservices. En cualquier caso un proyecto interesante que puede tener sus intríngulis.

Otro aspecto en que cambia sustancialmente el desarrollo tanto de webs móviles como responsivas es la fase de conceptualización de la web. Por una parte hay muchos que dicen "la conceptualización tiene que empezar por la plataforma móvil". No se hasta que punto estar de acuerdo pues no se puede excluir ninguna plataforma especilmente la que es capaz de más interacción, que es la versión PC. Si el proyecto es responsivo creo más prudente empezar por la versión PC siempre preveyendo mantenernos en un línea "ligera" que nunca nos implique encontrarnos que la versión de teléfono está muy "cargada". Por eso el clásico planteamiento de definir la web en "wireframes", pantalla a pantalla, página a página, ya no es muy útil, porque nos puede llevar a un caos de wireframes, sobre todo teniendo en cuenta que en la versión de teléfono el aspecto de las secciones va a ser muy similar. Y es en este punto en el que no puedo estar de acuerdo con lo que simplican la web móvil a un diseño responsivo que permite unificar el marketing de todas las plataformas a un único esfuerzo. Creo que es un planteamiento un tanto naíf que puede hacer que algunos potenciales usuarios de web móviles tomen un camino demasiado simplificado. Pero, en fin, de todo hay en la viña del señor.

Este es un tema muy extenso que da para muchas entradas de blog abordando muy distinto aspectos sobre cómo enfocar nuestra estrategia móvil. Iremos tratando estos aspectos en siguientes entradas. Pero cabe concluir con la responsable postura de que la web responsiva es una gran y muy atractiva solución que no siempre es útil a no ser que simplemente tengamos un blog. Para cualquier web más grande es importante plantearse con un consultor experimentado un proyecto bien calculado. En Innodus es un tema que nos apasiona.