Diseño web adaptable: la resolución universal

Imagine tener un rompecabezas que se adapte a cualquier superficie, desde una humilde mesa de café hasta una gran mesa de comedor de mármol. Esto es, en esencia, el diseño web adaptable. La multitud de nuevas plataformas de dispositivos y sus respectivas resoluciones nos dan la oportunidad de llegar a nuestros visitantes web y clientes potenciales en muchos lugares distintos; ya no estamos limitados a la pantalla de la oficina o a las conexiones a Internet por cable. Disponer de tantas opciones nos da la posibilidad de llegar a cualquiera, en cualquier lugar y en cualquier momento. Sin embargo, estas opciones también pueden complicar el trabajo de un diseñador que históricamente sólo ha tenido que diseñar para una o un número muy limitado de plataformas.

En el último blog de Alex Castillo, definía el diseño web responsive como una técnica que utiliza Media Queries, CSS3, diseños fluidos e imágenes flexibles para mostrar el mismo contenido de la misma manera en muchas resoluciones de pantalla diferentes. Este artículo pretende arrojar luz sobre el diseño web responsivo desde el punto de vista del diseñador y cómo utilizar mejor esta técnica para ofrecer una experiencia uniforme y fácil de usar a los visitantes de su sitio, independientemente del dispositivo que elijan.

Una resolución: Una mentalidad anticuada

Las resoluciones de pantalla están entre nosotros y la mentalidad de “talla única” sólo sigue siendo válida para las gorras de béisbol y los monos de pijama con el logotipo I love NY de Glaser. Cada mes salen al mercado multitud de nuevos dispositivos y el número de resoluciones de pantalla diferentes ha aumentado a un ritmo constante. Además, el usuario medio interactúa con dos o más dispositivos distintos a diario. Por ejemplo, yo puedo utilizar un smartphone, una tableta, un ordenador de sobremesa de gran tamaño y un portátil en un día normal en la oficina de DOOR3, todos ellos con resoluciones diferentes.

Una de las cuestiones más importantes que hay que resolver antes de embarcarse en un proyecto web es definir la resolución a la que se va a diseñar. Como diseñadores, hemos intentado buscar respuestas en los análisis y las estadísticas, en los gráficos que muestran el tráfico de nuestros sitios y en qué resoluciones los usuarios veían nuestro sitio. Estamos obligados a analizar y clasificar, a señalar la resolución ideal para cualquier proyecto, y nos encanta la segmentación del mercado y la creación de personas por una buena razón. En pocas palabras, necesitamos saber adónde vamos.

Diseño para múltiples plataformas

Los tradicionalistas te pedirán que asignes presupuestos distintos a sistemas de diseño empresarial y al desarrollo para cada plataforma, por ejemplo, versiones separadas para ordenadores de sobremesa, tabletas y smartphones. Aunque este enfoque tiene sus ventajas, también significa que el coste de desarrollo aumentará exponencialmente. Dado el enorme volumen de dispositivos existentes, es posible que acabes pagando por 4 o 5 proyectos diferentes desde el principio.

Recomiendo un enfoque diferente: Mantén bajos los costes de desarrollo y apuesta por una experiencia de usuario y un diseño inteligentes. Este método tiene en cuenta una amplia gama de resoluciones y proporciona a los usuarios una experiencia fluida estén donde estén. Esto, a su vez, puede traducirse en un mayor número de impresiones y conversiones en su sitio web, mejorando así su negocio.

El diseño web adaptable permite reducir en un 70% los costes de desarrollo de cada versión. Aunque algunos podrían argumentar que el diseño web adaptable no es compatible con los navegadores más antiguos, lo que históricamente era cierto, la utilización de tecnologías modernas como Java Script y Media Queries nos permite evitar este problema para todos los navegadores.

Reconstruyendo el puzzle

El diseño web con capacidad de respuesta es una forma inteligente de mantener su sitio web eficiente y eficaz en un mundo de innumerables resoluciones de pantalla. Para crear un sitio web que se adapte a todas las resoluciones, se necesita la experiencia de un equipo de diseño y experiencia de usuario que tenga en cuenta cómo se mostrará el contenido en las distintas pantallas. A continuación, los desarrolladores harán su magia y, en función de la plataforma del usuario final, el sistema adaptará el diseño mediante diseños fluidos, CSS3 y Media Queries. Utilizando este método se conservan los valiosos recursos de la empresa (es decir, el dinero) sin sacrificar la usabilidad, la estética y, lo que es igual de importante, sin excomulgar a los usuarios en el proceso. En otras palabras, el diseño web responsivo es realmente la mejor solución disponible en la actualidad para desarrolladores, diseñadores y clientes por igual.

*Para ver un buen ejemplo de diseño web responsivo, consulte http://foodsense.is/, que contiene un conjunto de controles que permiten a los usuarios cambiar la anchura de la ventana del navegador y ver cómo se adapta el diseño a distintas resoluciones. Si accedes al sitio desde una tableta o un teléfono, puedes estar seguro de que hay otro diseño para ti