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.
/* Todos excepto las pantallas grandes */
@media (max-width: 1220px) { }
/* Tables y smartphones */
@media (max-width: 1023px), (max-device-width: 1024px) { }
/* Tables y smartphones en modo portaretrato */
@media (max-width: 959px) { }
/* Solo Tablets en portaretrato */
@media (min-width: 768px) and (max-width: 959px) { }
/* Solo Tablets (en portaretrato) y smartphones (modo paisaje) */
@media (min-width: 480px) and (max-width: 959px) { }
/* Solo smartphones */
@media (max-width: 767px) { }
/* Solo smartphones (Modo paisaje) */
@media (min-width: 480px) and (max-width: 767px) { }
/* Solo smartphones en modo portaretrato */
@media (max-width: 479px) { }
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:
<meta name="viewport" content="width=device-width, initial-scale=1" />
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.
Diseño web Responsive Web Design
Last modified: 4 junio, 2013
Excelente blog. saludos.
todo esta muy bien explicado, muchas gracias…