No pretendo más que hacer un fácil juego de palabras con “Responsive Design” y su traducción al castellano como “Diseño Sensible”, término muy extendido, aunque creo que se debería denominar “diseño web adaptable”. Fue Ethan Marcotte  quién definió y sentó las reglas del Responsive Design en su artículo A List Apart.  ¿Pero qué es el diseño web sensible?. Si lo resumimos, es el diseño que se adapta a los diferentes dispositivos que usamos para visitar sitios web, como un tablet, un smartphone, un ordenador, etc…

Adaptación de diseño sensible para Reveal theme

Hace años no existían la diversidad de dispositivos que usamos ahora para navegar, nos limitábamos a visitar las páginas web desde nuestros ordenadores, y a parte del trabajo duro de adaptar el código para los diferentes navegadores, la web se veía en todas partes igual o casi idénticas. Desde la llegada de los diferentes dispositivos, la web debe ser flexible, debe evolucionar, y es aquí donde diseñadores y desarrolladores trabajan para que un diseño se adapte. Actualmente diseñar una web pensando en 1024 pixels de ancho es un error, dado que podemos visitar una web en otras pantallas y con tamaños diferentes. Por eso en vez de crear diferentes plantillas o webs, lo más adecuado es realizar un diseño sensible, mediante el uso de algunas técnicas, como grid fluidos, imágenes flexibles y CSS3 media querys

Las técnicas para desarrollar diseño web sensible, y a modo muy esquemático son:

• CSS3 media querys
  Actualmente con CSS3 podemos seleccionar diferentes propiedades, como la anchura del dispositivo, la resolución u orientación (horizontal o vertical).
• Grid Fluidos
  Gracias a los valores proporcionales (porcentajes y ems), y de las propiedades max-width o max-height en nuestro CSS, hacemos que los diferentes elementos se adapten al tamaño del navegador y del dispositivo.
• Imágenes Flexibles
  Mediante diferentes técnicas podemos hacer que nuestras imágenes se adapten a un diseño sensible. Las imágenes se escalan, cambian su posición, en función de los atributos HTML de altura y anchura para crear más espacio.

El diseño web sensible se adapta a diferentes dispositivos

Por lo tanto, para hacer diseño web sensible se requiere de un amplio conocimiento de HTML y de CSS3. Os dejo este enlace responsivewebdesign.com/robot para que observeis un trabajo de Responsive Design. Visitadlo con vuestro iPhone o vuestra tablet, girarlo, veries como se va adaptando, es sensible

Espero haber aportado un poco de luz e información básica al diseño web sensible con estas nociones. Y como estamos en un mundo lleno de información, yo también quiero aportar lo que sé con vosotros. Ya sabéis que en godigital.es nos gusta compartir.

¿Te ha gustado el artículo? ¿Te ha aportado algo?. Si es así, ya sabes que puedes hacer algún comentario y compartirlo con quien tu desees

Si deseis más información sobre Responsive Design o Diseño sensible:
blog.ictea.com  |  diseno-sensible-responsive-design  |  disenos-web-sensibles-responsive-web-design  |  responsive-design-overview  | Plugins jQuery Diseño Sensible