Introducción al Diseño Web Adaptativo

Bueno, me disponía a hacer una plantilla de html con un Diseño Web Adaptivo para publicar en mi siguiente post, pero creo que antes debería de explicar un poco el tema de los diseño “Adaptativos”.
El Diseño Web Adaptativo o Responsive Web Design, como se le denomina en inglés, es una tendencia de diseño que está surgiendo debido a la enorme cantidad de resoluciones diferentes en los dispositivos que pueden consumir sitios web. El concepto del Diseño Adaptivo sugiere que un solo sitio web sirva para ser visualizado en cualquier resolución o por lo menos en la mayoría de las resoluciones más comunes.

En resumidas cuentas se trata de htmls que se modifican en al momento de ser presentados para ajustarse al tamaño de pantalla del dispositivo.
Hacer un Diseño Adaptivo se lleva a cabo en tres etapas:

1. Diseño gráfico
2. Construcción del html
3. Aplicación de los Estilos CSS

El diseño gráfico

Para que el html pueda adaptarse a diferentes resoluciones es necesario que desde la concepción del diseño, se planee cómo los elementos se ajustarán a las diferentes resoluciones, esto implica estiramientos, cambios de localización, ocultación de elementos, entre otras cosas.
Esto puede implicar elaborar bocetos sobre cómo se debe visualizar el diseño en cuatro resoluciones diferentes, estas pueden ser:

• 1024x768 (monitor o tableta en posición horizontal)
• 768x1024 (tabletas en posición vertical)
• 800x600 (baja resolución)
• 320x480 (celulares)

El conocimiento del comportamiento del HTML y el CSS pueden ayudarte mucho en la toma de decisiones sobre cómo planeas que se adapte el diseño, aunque también es importante que no te limites sobre lo que sabes sobre html, recuerda que la tecnología se debe adaptar a la creatividad y no al revés.

Etapa de construcción del html

La estructura de etiquetas html con la que se construye una página debe simplificarse en gran medida, esto nos permitirá manipular con mayor facilidad los elementos al momento de aplicar las adaptaciones.
Un factor importante a tener en cuenta es mantener agrupados los elementos de acuerdo a la coherencia del contenido, lo cual va a brindar a tu sitio de una buena estructura de información que trae muchos beneficios tanto para la construcción como para el indexado de la página en buscadores.
Es importante que evites el uso de tablas para la estructuración del contenido ya que estas pueden obstaculizar en gran medida la adaptación de los elementos al momento del cambio de resoluciones, yo sugiero elaborar el html sin pensar en absoluto en el diseño gráfico y enfocarse en la coherencia de los contenidos, un HTML bien formado se debe poder leer sin problemas aun sin tener estilos aplicados, sólo con el uso de las etiquetas base aplicando las mismas de forma adecuada.

Aplicación de estilos mediante CSS

Tal vez la etapa más complicada es la construcción de los estilos de la página, ya que es mediante CSS que el diseño se presenta como lo planeamos en la etapa de diseño y es aquí donde se designa el comportamiento de los elementos al momento de ser presentados.
Hay dos técnicas que ayudan mucho al momento de estructurar páginas con diseños adaptivos, la primera es el uso de medidas con porcentajes en lugar de pixeles, ya que no importa el tamaño del contenedor puesto que los elementos conservarán la proporción; la segunda es el uso de los denominados “media_querys”, que fueron agregados a la tecnología del CSS recientemente, los media query permiten aplicar estilos solo cuando se cumplan ciertas condiciones, esto nos permitirá aplicar cambios al diseño más radicales cuando se cumplan condiciones específicas.

Para muestra...

Para que se hagan una mejor idea sobre qué es un Diseño Web Adaptivo prefiero poner algunos ejemplos de buenos sitios web que usan diseños adaptivos, prueben ajustar el tamaño de la pantalla de su navegador para que experimenten el poder de las media querys

• http://www.smashingmagazine.com/

Espero les agrade el ejemplos, dejaré para otro post la profundización de los temas expuestos.