¿Qué es el diseño sensible?
Se llama diseño sensible a aquellos que se adaptan al distintos dispositivo que visitan el sitio web. Esto lo hace cambiando el tamaño de elementos, su posicion o eliminandolos, haciendo una version reducida mas sencilla.
De esta manera en vez de crear distintas plantillas o webs, hacemos que se adapte a los distintos dispositivos.
Un ejemplo de diseño sensible:
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 dos a una columnas, 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:
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).
En CSS2 con "media types"
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.style.css" media="print" />
En CSS3 con "media querys"
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="medium.style.css" />
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
Enlaces de interés
Soporte para navegadores antiguos. Como no todos los navegadores soportan las media querys CSS3, aquí tenemos un script al rescate.
CSS3 Media Querys pre-cocinadas. Un pre-cocinado válido para gran parte de proyectos por si no queremos reinventar la rueda.
Layout sensible en HTML5 con medias jquerys y js. Un artículo en Cristalab de como implemento diseño sensible en su web.