Diseño web adaptativo (Responsive Web Design)

El diseño web adaptativo, o el diseño Responsive, es algo que ando muy de moda en estos tiempos, a un que la idea viene por hay del 2008.

La idea y el propósito del diseño web adaptativo fue previamente discutida y descrita por el consorcio W3C en julio de 2008 en su recomendación “Mobile Web Best Practices” bajo el subtítulo “One Web”.2

Y a un que nuestro cliente no tenga ni idea de esto, el lo unico que pide es que su pagina web se vea de maravilla en smartphone, tablets, laptops, pc etc.

 

Y claro para nosotros no será muy rentable hacer un diseño para cada dispositivo y cada resolución (nunca terminaríamos), ahora bien la solución mas viable es hacer un diseño adaptativo, el cual ara que nuestra pagina web se adapte a cualquier resolución. Para esto tenemos dos pociones, no la aventamos como los machos y hacemos todo desde cero o somos un poco mas humildes y hacemos uso de algún framework que nos ayude con lo que requerimos.

Como no queremos inventar el hilo negro lo mejor será usar algún framework, con la ventaja que este esta ya mas que probado.

Antes de empezar debemos tener dos cosas claras la diferencia entre layout fluid y responsive.

El primero se refiere a que los layauts se expandan a todo el ancho posible, comúnmente establecido mediante porcentajes, y un ancho mínimo (y es posible que un ancho maximo). de esta manera garantizamos que ocuparemos el mayor espacio posible.

El segundo “resposivle”, se refiere a que un layaut tendrá un estilo diferente para cada resolución (en realidad establecemos el rango de las resoluciones), incluso las imágenes y videos incrustados tendrán que cambiar de tamaño para adaptarse a esa resolución.

Ejemplo de diseño responsivo.

 

En el siguiente ejemplo veremos como se comporta la pagina del framework foundation

  1. Para la primera imagen se observa el menú de manera horizontal y el botón de donwload.
  2. Al hacer mas pequeña la ventana del navegador observamos como el menú se oculta (con un estilo de DropDownList).
  3. En la tercera imagen el tenemos todas las opciones del menú pero con otros estilo.

image image image

 

Existen diversos framework que nos proporcionan estilos para los componentes (combos, inputtext, botones, alertas, grid) con un diseño responsivo.

entre los cuales se encuentran.

Foundation

Gumby

Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *