¿Como funciona Responsive Web Design y cuando utilizarlo?

Escrito por Ing. Pablo A Pico el . Posteado en Tutoriales y tips

Como les comentaba en la publicación anterior ¿Qué es responsive web design? nuestro sitio web ingenierodesistemas.co utiliza la característica Responsive Web Design que le permite maximizar la compatibilidad y amigabilidad con dispositivos de distinta resolución de pantalla como los smartphones y las tablets.

Ventajas de usar Responsive Web Design (Diseño Web Adaptativo)

  • Tu sitio web será sorprendentemente amigable con los móviles lo cual entre otras cosas puede incentivar un aumento en el tráfico
  • En el mediano y largo plazo tendrás menos costos de mantenimiento en comparación a otras técnicas del mismo propósito puesto que tienes que trabajar en una versión de HTML y CSS y aún así logras cubrir prácticamente todas las resoluciones de pantalla.
  • Tendrás una sola URL para todas las versiones (móvil y escritorio) lo cual supone una venta tu SEO (posicionamiento web) en comparación a otras técnicas donde las direcciones de móvil y escritorio son distintas.

Desventajas de Responsive Web Design

Necesariamente hay que cambiar el pensamiento para implementar Responsive. Se necesita ser algo minimalista, prescindir de diseños rígidos y/o reinventados.

Un ejemplo sencillo de como se implementa Responsive Web Design

Aquí les dejo un Ejemplo básico de Responsive Web Design. Al examinar el código fuente observen que contrario a lo que uno pudiera pensar no utiliza javascript.

Como funciona

La distribución se adapta gracias a el uso de media queries de CSS3. Estas son las encargadas de “saber” la resolución de pantalla del dispositivo y cambiar las reglas de los estilos respectivamente. Las imágenes por su parte utilizan tamaños flexibles; en el caso de este sitio web utilizo una regla de CSS que las forza a no ser más grande que su contenedor:

article img{max-width:100%; height:auto!important;}

La etiqueta img siempre que esté dentro de la etiqueta article (artículo en HTML5) tendrá un máximo ancho del 100% y una altura automática siempre. Esto último es para evitar que pierda las proporciones y se distorsione.

El diseño de la página se basa en un grid o grilla cuyas celdas utilizan tamaños en porcentajes en lugar de pixeles. Los elementos fluyen puesto que dependen del tamaño de su contenedor y en lugar de hacer overflow cambian de posición para acomodarse cuando no hay suficiente espacio. Así se ve la parte especial del CSS que se aplica las media queries que les hablaba.

Como vemos las reglas se definen por grupos donde algunas son comunes a varias resoluciones. Por otra parte se necesita la siguiente sintaxis en el head para que pueda funcionar:

Esta sintaxis le dice al dispositivo que no intente hacer zoom y en lugar de eso permita al CSS adaptar el sitio.

Se puede decir que esta técnica es la última revolución del diseño web y que una cantidad importante de sitios de nueva generación se están diseñando con Responsive Web Design.

Etiquetas:,

Ing. Pablo A Pico

Hola colegas y amigos. Los invito a seguir el blog a través del Fanpage en Facebook. En caso de que quieran contactarme lo pueden hacer por Twitter. A aquellos que sean Ingenieros de Sistemas y Desarrolladores de software los invito a formar parte de nuestro nuevo grupo en Facebook. Gracias por su visita, Ing Pablo A Pico

Comentarios

  1. Excelente blog. saludos.

  2. todo esta muy bien explicado, muchas gracias…

"Trackback" Enlace desde tu web.

¡Síguenos en Facebook con un me gusta!

Este sitio web está dedicado a los Ingenieros de Sistemas en Colombia. www.ingenierodesistemas.co