Si bien hace solo un par de años los smartphone y luego las tablets comenzaban a aparecer, y comenzaban a despegar las conexiones a Internet a través de estos dispositivos, hoy en día es cada vez más común estar navegando en Internet a través de alguno de estos dispositivos, es por esto que se hace necesario tener un sitio web que se vea en optimas condiciones en dichos dispositivos, con pantallas y resoluciones muchas veces inferior a las de un computador o un notebook.

Como señale en Diseño web móvil, las 3 formas para su implementación, existen distintas formas de implementar la optima visualización de un sitio web en diferentes dispositivos, el diseño web responsivo es una de estas formas de crear sitios web de manera que su visualización es optima en cualquier resolución de pantalla, sea la de un smartphone, tablet, portatiles o computadores de escritorio, utilizando la misma versión del contenido.

El diseño responsivo utiliza los media queries, propiedad incorporada en un comienzo en CSS 2.1, pero no es hasta los cambios realizados en CSS3, cuando es posible generar cambios en los estilos de los diferentes elementos del sitio web, creando diseños diferenciados entre limites de resolución, dependiendo de la resolución de pantalla de cada dispositivo y no solamente del tipo de dispositivo, pantalla, impresión, lector de pantalla, entre otros.

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”shetland.css” />

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px) and (resolution: 163dpi)” href=”shetland.css” />

Debido a la fluidez del uso del Diseño Responsivo, es habitual la utilización de de grillas fluidas, lo que permite “ir pasando” entre los diferentes puntos de corte, de una manera suave, adaptando el diseño web a las distintas resoluciones intermedias, sin la utilización de diferentes grillas para cada sección de resoluciones entre cada punto de corte. Unsemantic, es una de ellas, que a su vez es la sucesora de la grilla 960gs, con un manejo e implementacion muy similar.

Otro punto a considerar, junto al Diseño Responsivo y las Grillas Fluidas, es el Mobile First o el Diseño partiendo de los dispositivos moviles; la web ha de ser usable, funcional y atractiva en smartphones, sean de 4 a 5 pulgadas, luego ir escalando y agregando funcionalidad para los diferentes dispositivos con resoluciones mayores.

Un punto problemático a considerar, son los tamaños de las imágenes, las cuales muyas veces se escalan, disminuyendo su tamaño con css, pero esto genera la descarga, por parte del visitante móvil, de un archivo mucho más grande de lo que requiere, por el contrario, si posee un dispositivo con Retina Display, es necesario una imagen de una resolución mayor; para esto se puede echar mano a algunas librerías en javascript, así como también la utilización de imágenes vectoriales en el formato SVG.

Pin It on Pinterest

Shares