Responsive design: Introducción al diseño adaptativo I

Sin duda alguna, un tema que ha estado de moda durante todo el año es el «Responsive Design», que al no tener una traducción mas apropiada se a tomado como diseño adaptativo, el cual trata sobre el diseño de paginas web que se adaptan de forma automática a cualquier tamaño de pantalla.

Y es por eso que hemos decidido realizar una serie de post en donde abordaremos de la forma mas amplia posible las técnicas y modelos de este diseño.

El diseño adaptativo economiza esfuerzos, ya que ahora no tenemos que diseñar la versión móvil y la versión PC de un sitio web, lo cual nos resultaba en una seria penalización por parte de los motores de búsqueda, principalmente Google, con sus algoritmos panda y pingüino, que penalizan a aquellas paginas que duplican su información.

Como el principal objetivo de esto es que el sitio se adapte a cualquier pantalla en tiempo real, debemos tener presente que una pagina web puede ser visualizada en:

• Computadoras
• Tablets
• Smartphones
• Televisiones y pantallas HD y Full HD
• Pantallas retina display.

El problema principal es que las resoluciones no son estándar, sobre todo en el caso de los smartphones, que lo mismo podemos encontrar un equipo con pantalla de 4 pulgadas y resolución de 320 x 240, que uno con pantallas menores y calidad retina display.

Una resolución a la que el responsive design debera responder durante el próximo año será la 4K, que incorporarán las smart TVáq

Como se construye el responsive design

El responsive design está basado principalmente en los siguientes elementos:

1. Capas de HTML: Que nos permiten mover los elementos de nuestra pagina de un lugar a otro
2. Hojas de estilo CSS: las reglas de las hojas de estilo construyen la forma en como se presentará nuestra pagina, en ellas todo debe estar basado en porcentajes.
3. Media Query: verifican los cambios en el tamaño de la pantalla o su orientación, para cambiar las reglas de los CSS según se requiera, aplicando otras ya establecidas.

Como podemos ver, no es muy complicado, pero si debemos aclarar que es algo que se debe aplicar desde un principio, ya que no es viable la modificación del sitio completo, una pagina debe estar diseñada desde un principio en responsive desig

Lo principal en el responsive design es crear la maqueta de nuestro sitio, para decidir que pasara con los elemento a medida que la resolución de la pantalla sube o baja. Se comienza diseñando para la pantalla de una PC en 1024 x 768, pero esta de moda que un sitio no ocupe toda la pantalla, sino que deje un margen de espacio, tal y como usan todos los blog, por lo que se toma como tamaño inicial 800 x 600.

El responsive aplicara a a partir del tamaño estándar reglas que se disparán con  un CSS