Tras este titular tan poético se esconde toda una filosofía de trabajo en el diseño web que un buen diseñador no puede obviar; lo que conocemos como Responsive Web Design o Adaptive Web Design.
Pero tranquilos, porque no vamos a meternos a nivel técnico en este asunto. Eso será en otro artículo, antes; vamos a conocer qué es esto del diseño web adaptativo.
Y como no podía ser de otra manera, nosotros -como desarrolladores web- nos hemos convertidos en unos fans absolutos de estas técnicas que os vamos a contar ahora mismo 😉
Esta forma de trabajo toma como esencia el hecho innegable de que en la actualidad la forma en la que navegamos es distinta a cómo lo hacíamos años atrás, gracias a la aparición de dispositivos como los teléfonos inteligentes (smartphones) o las tabletas (tablets).
No creo que sea necesario ofrecer datos sobre los porcentajes de uso de estos dispositivos para acceder a internet y visitar nuestras páginas web favoritas o –incluso- realizar compras, simplemente tienes que echar un vistazo a tu alrededor y comprobarlo por ti mismo.
Por esto mismo, a través del concepto Mobile First, este conjunto de técnicas permiten un desarrollo web dinámico, fluido (donde las imágenes y el texto fluyen y se adaptan al contenido en función de su disposición en el entorno) y “orgánico”, alejado del formato estático de antaño, que a través del lenguaje HTML5, las hojas de estilo CSS3 y el lenguaje de programación JavaScrip, adaptan el entorno y permiten una navegación óptima con nuestro teléfono móvil, aumentando la experiencia de usuario notablemente.
Obviamente, si atendemos a esta tendencia, aquellos sitios web dedicados a la venta online o quienes hayan decidido no dejar escapar ni una sola de las visitas, están obligados a adaptarse.
Aquellas webs que no sean perfectamente visibles desde un móvil tienen los días contados. Pero esto no lo digo yo, sino una de las puntas de lanza de este movimiento; el diseñador Ethan Marcotte, que fue quién recopiló y unificó toda la información sobre este tipo de desarrollo y las publicó en A list apart, una publicación online especializada en diseño web, y que después desarrolló en el libro; Responsive Web Design (puedes echar un vistazo del libro aquí).
Captura de pantalla de la web de Adobe. Se puede apreciar que el tamaño de letra es tan pequeño que cuesta leer el texto de debajo del menú. Es un claro ejemplo de web que necesita un diseño adaptativo.
En este ámbito, cuando hablamos de Mobile First, estamos tomando la primera decisión importante a nivel técnico para poder desarrollar este tipo de webs. Esto consiste en establecer el diseño inicial de la web en su versión para móvil.
Pero ¿Por qué deberíamos diseñar las páginas web de pensando en los móviles ante todo? Existen varios motivos, pero fundamentalmente este concepto atiende a al cambio mencionado anteriormente en la forma de navegar, ya que se estima que en un periodo de unos cinco años, la navegación a través de los dispositivos móviles superará a la navegación desde un ordenador convencional.
Si lo piensas un poco, seguro que te has topado infinidad de veces con webs en las que para leer un artículo desde el móvil has tenido que hacer malabarismos e ingeniería dactilar para poder hacerlo; zoom para los textos más pequeños, minimizar los titulares, links que no te llevan a ninguna página porque no aciertas en el sitio adecuado con esos dedazos y esos botones minúsculos que Dios nos ha dado .
Resulta desesperante navegar así, ¿no?
Sin embargo, alguien estará pensando ¿Qué ocurre con aquellas páginas que ya han sido creadas sin tener en cuenta este concepto de Mobile First?¿Hay que crear la web de nuevo? Bueno, la respuesta es sí y no. Para solucionar esto, existe lo que se denomina degradación elegante. Este concepto es el opuesto al Mobile First, pero en ocasiones resulta una opción a tener en cuenta si no quieres volver a pagar por el desarrollo de la web completa.
A través de la degradación elegante, partiendo de una web ya creada, comenzamos a adaptarla a los distntos tamaños que presentan los diferentes dispositivos, utilizando unos elementos pertenecientes a CSS3, que se denominan media queries (ojo, no confundir con JQuery, que es un framework de JavaScript). Utilizando estas media queries vamos a ir adaptando el contenido de la web, haciéndolo fluir, en función de los diferentes tamaños de pantalla que nos encontremos. Esta es una manera de salir del paso y convertir tu web estática en una página responsive.
Por tanto, como hemos visto, este tipo de responsive design, trata de paliar todos estos problemas y hacer que la experiencia de navegar con estos dispositivos, lejos de ser una tortura, se convierta en algo sencillo y convencional.
Pero lo mejor es que veáis algunos ejemplos de estas webs (he escogido algunas de las que conozco que me han parecido más creativas) para que podáis apreciar todas esas maravillas de las que hablo 🙂
Podéis encontrar muchos más ejemplos de diseños de web adaptativa en la página de Desigmodo.
Y hasta aquí esta pequeña introducción al responsive web design.
Si te ha gustado este artículo, no dudes en comentar y darle difusión en las redes sociales, te estaremos muy agradecidos 😉
Sed felices 😉
Misedades
RESPONSIVE WEB DESIGN | ILUSTRACIÓN | COMUNICACIÓN
Síguenos en Facebook y Twitter. También tenemos Pinterest e Instagram 😉
¿Quieres ver nuestros trabajos: puedes hacerlo a través de la web y la shop?
misedades.wordpress.com 