Responsive Web Desing

Responsive web design o "diseño web de respuesta" es un término relacionado con el concepto de desarrollo de sitios web de una manera, que permite que la estructura sea cambiada de acuerdo a la resolución de la pantalla del dispositivo desde el que se esté visualizando.

En simples palabras es un diseño que hace que tu web se adapte al tamaño de la ventana del navegador que estés usando. Es algo muy útil y que gráficamente queda muy visual.

A continuacion se muestra una diapositiva para comprender mas a fondo este emocionante tema que hemos abordado.

-Eplicación de que es Responsive web design-

-Lenguajes usados-

Responsive web design funciona utilizando una técnica basada en el lenguaje de programación HTML y los códigos CSS y CSS3 cuyo funcionamiento son los siguientes:

Se programa sobre  HTML o  HTML5, lo que permite añadir etiquetas del tipo  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> ycolocarlas sobre los encabezados y otros títulos. De esta forma, se logra que el aspecto se ajuste automáticamente al tamaño de las pantallas de cada dispositivo.

 Luego se aplican las modificaciones correspondientes en las hojas de estilo de CSS o CSS3 y, cuando un usuario navegue, por ejemplo, en su smartphone se cargarán automáticamente las reglas correspondientes al tamaño reducido de la pantalla, garantizando una óptima visualización y navegación.

-Ventajas y Desventajas-

Ventajas-

• En el caso más perfeccionista el diseño responsive puede contar con 7 versiones diferentes:

1.        Pantalla de ordenador

2.     Pantalla de tablet de 10 pulgadas en horizontal

3.      Pantalla de tablet de 10 pulgadas en vertical

4.      Pantalla de tablet de 7 pulgadas en horizontal

5.      Pantalla de tablet de 7 pulgadas en vertical

6.      Pantalla de móvil en vertical

7.      Pantalla de móvil en horizontal

• Otra ventaja es la mejora de accesibilidad y la experiencia del usuario, siempre es mejor si la web se adapta perfectamente y el usuario no tiene que hacer nada para que eso funcione.

• Puedes compartir a través del móvil el enlace a esa pagina con diseño responsive sin preocuparte de que el que reciba ese link lo este mirando en un móvil, tablet u ordenador. Ya que no tendrá ningún problema de visualizarla perfectamente la pagina.

• Por una parte mejora el posicionamiento del SEO (aunque luego veremos que no del todo) ya que no se hace necesario tener varios diseños y con ellos subdominios que harían que nuestro SEO fuera peor.

Desventajas-

El tiempo de desarrollo es mayor que con otros modos, ya que no lleva mucho tiempo y aun no se a estandarizado al 100%, si necesitamos algo rápido lo mejor seria buscar algún otro plan secundario.

Uno de los mayores por no decir el mayor problema son los costes, hay menos empresas especializadas y por ello son bastante mas caras, además de que es mas complicado lo que hace que se encare aún más el precio por usar el diseño responsive.

El tiempo de carga es otro gran problema, se tarda mucho más en acceder a una web con diseño responsive que una que no lo tenga, ya que las imágenes al pasar de verla de una pantalla de ordenador a una pantalla de móvil o tablet se reescala simplemente, pero mantiene el mismo peso que tenía lo que hace que el tiempo de carga aumente en gran medida.

Como he hablado antes eso hace que la colocación en el SEO sea peor ya que los tiempos de carga serán mayores y los buscadores te posicionaran por ello mucho más abajo que una web con el mismo nombre que no tenga diseño responsive. A parte el peso de la web es mayor ya que las imágenes y demás archivos solo se reescalan para adaptarse al tamaño de la pantalla.

  

Los costes de actualización y de mantenimiento también son mayores debido a lo que he explicado antes, es más complicado de actualizar, con lo cual muchas veces es mejor tener varios diseños en lugar de uno solo responsive. Esto hará que ahorres algo de dinero.