Se llama Responsive Design a aquellos diseños que se adaptan a los distintos dispositivos que visitan el sitio web. Esto lo hace cambiando el tamaño de elementos, su posicion o eliminandolos, haciendo una version reducida mas sencilla, etc. De esta manera en vez de crear distintas plantillas o webs, hacemos sólo una que se adapte a los distintos dispositivos.
Un ejemplo de diseño flexible:
En el se puede ver como cambia el layout, tamaño y area visible de imágenes.
En la vista tableta las imágenes se han reducido en comparación al escritorio.
En la vista móvil, además de reducirse más el tamaño de las imágenes la composición ha cambiado de tres a una columna, haciendo que los bloques laterales se intercalen con el contenido.
Técnicas
Para lograr un diseño sensible se combinan diferentes técnicas, como los grid fluidos, imágenes flexibles, CSS3 media querys y modificaciones en el contenido.
Grid Fluidos.
A través del uso de valores proporcionales (porcentajes y ems), y de las propiedades max-width o max-height en nuestro css, hacemos que los distintos elementos se adapten al tamaño del navegador.
Imágenes flexibles.
Hay varias técnicas que podemos usar para que nuestras imágenes se puedan adapten a un diseño sensible:
- Recortar parte de la imagen
- Creando composiciones con capas
- Imágenes de fondo que se escalan
CSS3 media querys.
Con CSS2 ya podíamos seleccionar que hojas de estilo usar dependiendo del tipo del medio (print, screen...). Ahora con CSS3 además podemos seleccionar propiedades de estos medios, como la anchura del dispositivo, su resolución u orientación (horizontal o vertical).
Moficaciones en la disposicion del contenido.
Para las versiones más pequeñas, en la que solo queremos una columna podemos eliminar un bloque (a través de la propiedad “display:none”) O mostralo intercalándolo con el contenido. Así podemos mostrar los menús encima del contenido y otros enlaces menos relevantes al final.
Twittear