Por qué crear un diseño responsive

Inicio > Diseño Web > Por qué crear un diseño responsive

El smartphone es el principal dispositivo de acceso a internet. Para el 40 % de los usuarios de internet en España es el más usado, frente al 30 % que afirma que utilizan el ordenador (tanto portátil como el PC de sobremesa), como dispositivo para conectarse. A estos se añaden las tablets, las smart tv y otros.

El acceso a internet ya no es cosa del ordenador y eso ha obligado a los desarrolladores de las páginas web a modificar tanto diseño como tecnología, ya que no es lo mismo navegar en un ordenador con una pantalla de 21 pulgadas y con una conexión de fibra simétrica de 300 Mb que en un smartphone de 4 o 5 pulgadas con una conexión 3G.

Por esta razón tanto diseño como programación web han evolucionado y entre otras han dado lugar a una nueva manera de crear y diseñar webs, lo que se ha denominado diseño responsive.

Qué es el diseño ‘responsive’

Cuando se accede a una web desde el ordenador lo normal es que no la veamos igual que cuando lo hacemos desde el smartphone. El diseño cambia, la estructura de la información se modifica, los menús se ven de una manera diferente.

El diseño responsive se adapta a la pantalla desde la que se accede para ofrecer la información de la manera que mejor se adapte al dispositivo. Un ejemplo claro son los blogs y páginas web hechas con WordPress, cuando se accede desde el ordenador se ven a pantalla completa, con fotos, textos, formatos, etc.

Sin embargo cuando el acceso es desde el smartphone, el diseño es diferente. Lo habitual es que la página se ‘estire’ y se vea la información como una sucesión larguísima de contenido. Para visualizar la información se ha de hacer scroll y las imágenes y texto aparecen en la pantalla del dispositivo en una sucesión casi infinita.

Las webs que se visualizan en la pantalla de un smartphone, pero que se ven como en miniatura, no tienen diseño responsive. En realidad lo que hace la web es adaptarse al tamaño del dispositivo y reducir su visualización para que quepa en una pantalla de 4 pulgadas.

Por qué crear un diseño 'responsive'

Cómo funciona  el diseño ‘responsive’

Como se ha comentado anteriormente, un ejemplo de diseño responsive son los blogs creados con WordPress. Se estima que más de 50 % de las webs están hechas con esa tecnología, que incluye el diseño responsive entre sus opciones (lo cual es una razón más del porqué de su popularidad).

Cuando el usuario accede a la web, el servidor detecta con qué sistema operativo lo hace. Si accede con un sistema operativo web (Windows, Mac, etc.) le mostrará el que se puede llamar diseño estándar, el de toda la vida, el que se ha visto tradicionalmente en la web.

Pero si el servidor detecta que se está accediendo desde un sistema operativo móvil (principalmente iOS y Android), le mostrará la versión que se adapta a la pantalla de dicho dispositivo. El usuario no tiene que hacer nada, para él todo es transparente, simplemente ve en su dispositivo la web de la manera que mejor se adapta a las características de su smartphone, tablet, etc.

Pero además de la usabilidad movil y de qué dispositivos utilizamos para acceder a internet hay otras razones para implementar un diseño responsive, razones que tienen que ver con el SEO.

Razones SEO para tener una web con diseño web ‘responsive’

El algoritmo de búsqueda de Google evoluciona constantemente. El objetivo de todas las web es estar en el top 1, 2, 3 o, al menos, en la primera página de resultados. Estar en la segunda página o más allá es casi como no estar en internet, el porcentaje de usuarios que van más allá de la primera página de resultados es muy bajo.

Para “gustarle” a Google intervienen una serie de factores: cuál es la URL, cuáles son las palabras clave por las que los usuarios buscan, qué cantidad de contenido se incluye en la web, cada cuánto se actualiza, cuántos enlaces hay en otras webs hacia la propia, cuántos clics hacen los usuarios en la página de resultados de Google cuando, tras una búsqueda, aparece el enlace de la página web, etc.

Y con la irrupción de los smartphones y con el cambio del modo en que los internautas accedían a la web, Google incluyó el diseño responsive, como una opción más para posicionar las webs en su página de resultados.

Una de las filosofías de Google es primar la usabilidad, a aquellas páginas en las que el usuario encuentra la información fácilmente, en la que los contenidos están accesibles. Aquellas web que, como afirmaba el padre de la usabilidad, Jacob Nielsen, “don’t make me think”.

Y como el móvil se ha situado como dispositivo número uno para acceder a internet, Google entiende que el diseño tiene que adaptarse a las características de su pantalla, de tal manera que va a priorizar siempre a aquellas web que tengan diseño responsive, a aquellas en que los usuarios encuentran la información sin tener que pensar, de una forma fácil.

Se trata, pues, de premiar, de recompensar a aquellas web que son más amigables para el usuario. La fecha en que Google hizo el cambio fue el 21 de abril de 2015. Entonces el smartphone todavía no era el dispositivo número uno de acceso a internet, pero la proyección que arrastraba le dijo a los responsables del buscador que era cuestión de tiempo que llegar a ser la primera opción, como así ha sido.

Y entre las decisiones que se tomaron desde Mountain View estuvo la de penalizar a aquellas webs que no resultaran fáciles de usar para los usuarios. Se entiende con esta medida que aquellas webs a las que el usuario accede desde el smartphone y no tienen diseño responsive, serían penalizadas.

Esto ha obligado a los responsables de las webs a introducir los cambios que se han comentado, lo que al final ha redundado en que, independientemente del dispositivo que se utilice para acceder a la web, se tendrá la información fácilmente accesible: usabilidad móvil y diseño responsive.

Rating: 5.0. From 3 votes.
Please wait...
2017-06-20T07:58:11+00:00

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies