Desde hace un año se ha puesto de moda el término Responsive Web Design y mucha gente se hace eco de él. Para las personas que no conozcan qué significa comentar brevemente que hace referencia al diseño web adaptativo, no al diseño responsable, como ya he escuchado en algún momento. ¿Y qué es el diseño web adaptativo? El diseño web adaptativo o responsive web design es una técnica de diseño y maquetación que permite que la experiencia del usuario (User Experience o UX) no resulte afectada (o lo haga lo menos posible) cuando una persona navega por una interfaz, independientemente del dispositivo desde el que se conecte.
¿Y por qué surge este término ahora y está tan de moda?, ¿por qué no ha surgido antes?…
La respuesta, visualmente, es esta:
- Antes de 2008:
Fuente de las imágenes: Brad Frost, Ichibod, Josep Ma. Rosell
- Después de 2008:
Fuente de las imágenes: Brad Frost
Desde hace unos años los usuarios utilizan multitud de dispositivos móviles y tablets, y este uso tiene un crecimiento exponencial. De hecho, ya hay informes que indican que en 2014 (si, el año que viene) las personas navegarán más por los móviles y las tablets que por los ordenadores pc y portátiles.
Vamos a ver algunos datos, para tener conciencia de la situación, actual y futura:
- Google Trends: para conocer las tendencias de búsqueda en la web para determinados términos. Buscando “responsive design” nos sale este gráfico.
Fuente: Google Trends
- Statista: Web donde podemos cotejar estadísticas y tendencias de los mercados. Y veamos algunos datos interesantes:
- Ya hay muchos más smartphones y tablets que ordenadores en el mercado mundial.
- La tendencia es que cada año se venderán menos ordenadores y si más smartphones y tablets (sobretodo estas).
Fuente: Statista
- Y la bola extra: Google advierte, “El 60% de tus usuarios se irá de tu sitio web si no está adaptado a movilidad”. Ahí queda eso. Fuente: Google
Así que la pregunta no es ¿tengo que adaptar mi sitio a Responsive Design? La pregunta es, ¿cuándo tengo que hacerlo?, y la respuesta es sencilla…cuanto antes!!, ya que cada cliente que accede a tu sitio web y éste no está adaptado está provocando que lo pierdas (que no consuma tu contenido o que no compre si tienes una página de venta o contratación), y una revelación que tengo que hacerte, lo peor no es esto, lo peor es que se irá a tu competencia si esta está adaptada a responsive, y no volverá a tu sitio web.
¿Y qué tiene que ver esto con la Experiencia de Usuario?
Bien, vayamos al meollo de la cuestión, después de explicar lo que significa Responsive Design y de ponerlo en contexto, la pregunta crucial, si quiero realizar la adaptación de mi sitio web, ¿qué tengo que hacer?, ¿qué pasos tengo que dar? Bien, aquí empiezan los momentos críticos, porque creo que existe mucha confusión al respecto.
Muchas personas siguen pensando que aplicar la técnica de Responsive Design a la web es decirle a un maquetador web experto en HTML, CSS y JavaScript que haga que su web se adapte a la resolución de pantalla desde la que se conecte el usuario. ¿Es esto cierto? Sí, lo es, pero…¿es lo único que hay que hacer? Bueno, aquí mi respuesta es siempre, ¿cómo quieres hacerlo, bien o mal?
- Hacerlo mal: Implica decirle directamente al maquetador web que rehaga el código de la página para que se adapte a las resoluciones de los dispositivos. Con esta decisión no estamos haciéndole ningún favor ni al maquetador, ni al negocio de la empresa. ¿Por qué? Muy sencillo, cuando el maquetador tenga que decidir los puntos a partir de los cuales la página se irá adaptando a la resolución de pantalla, va a tener que tomar decisiones sobre negocio, marketing, contenidos, posicionamiento seo, usabilidad y experiencia de usuario, modelos de navegación, forma de mostrar o resolver funcionalidades, etc, y seamos sinceros, no es su trabajo. Llegados a este punto de la solicitud el maquetador puede tomar dos decisiones:
- Decir que lo hace, y asumir todas estas decisiones, con las consecuencias que puede conllevar, o
- Decir que no lo hace, sin un análisis previo de otros profesionales que trabajan en estas disciplinas. Y no es fácil decir que no, lo sé (he tenido que hacerlo en muchas ocasiones como consultor), pero es preferible explicar por qué no se debe hacer así y abrir los ojos a las personas que solicitan la aplicación de un Responsive Design, ya que no estaremos haciendo un favor ni a la empresa ni a su negocio cuando el usuario entre a través de su móvil o tablet a la web y su experiencia de uso no sea adecuada.
- Hacerlo bien: Perfecto, vamos por el buen camino. Aquí el proceso de trabajo a seguir es:
- Analizar el sitio web, en todas sus páginas y funcionalidades y decidir qué hacer con dichas funcionalidades. ¿Se van a mantener?, ¿tendrán sentido cuando alguien se conecte con su smartphone por su contexto de uso?, según el peso de carga de estas funcionalidades ¿tendrá sentido mantenerlas si sabemos que el usuario que se conecte con su smartphone lo estará haciendo probablemente sin una wifi?, ¿las funcionalidades necesitan complementos que en un smartphone o tablet van a seguir funcionando?, etc.
- Analizar el contenido concreto de cada página y decidir si se quiere mostrar en determinadas resoluciones de pantalla o no, así como qué contenido se considera más o menos importante. (aquí hay que tener en cuenta consideraciones de SEO, marketing, negocio, etc)
- Crear modelos de navegación adecuados, para smartphones y tablets, en horizontal y en vertical, es decir, cuando miramos el smartphone o tablet de forma normal o lo tumbamos.
- Auditar el número de plantillas (que no páginas finales) distintas del portal web.
- Plantear prototipos (wireframes) de estas plantillas, tanto para smartphone como para tablet, en vertical y en horizontal (no hace falta hacerlo de todas.
- Validar estos prototipos, antes de realizar el diseño gráfico de estas plantillas.
- Diseñar las plantillas, en base a la línea gráfica del sitio web. Aquí posiblemente no haya que hacer diseños gráficos de todos los prototipos, ya que el diseño no debería cambiar en base a la resolución de la pantalla, o por lo menos no excesivamente.
- Maquetar en HTML, CSS y JavaScript las plantillas.
En un post posterior mencionaré un ejercicio práctico de adaptación a Responsive Design, para meternos en harina, y que no sea todo tan teórico, de forma que se termine de ver este proceso de forma clara, e incluyendo en el proceso a la Experiencia de Usuario. Espero que con esta primera parte haya dejado una noción del estado de situación y de cómo abordar un proyecto de Responsive Design correctamente.
tienda online tarragona dice
No habia regresado tu blog por un tiempo, porque me pareció que era aburrido, pero los últimos articulos son de buena calidad, así que supongo que voy a añadirte a mi lista de blogs cotidiana. Te lo mereces amigo. 🙂
Saludos
admin dice
Gracias por tus ánimos!