Responsive Design V: Layout Shifter


LAYOUT-SHIFTER.001

Este modelo de diseño adapatativo es creación de Luke Wroblewski, este modelo no es tan popular como los que hemos mostrado en anteriores ocasiones pero es un diseño diferente y muy fresco. La idea principal de este modelo es tener una pagina divida en dos columnas, en donde la segunda columna se divide en dos filas, quedando como vemos en la parte izquierda de la imagen superior y que al reducirse la pantalla esta se acomode en una sola colma, tal y como vemos en la parte derecha de la imagen.

Como primer punto, veremos que nuestra pagina clásica no ha cambiado mucho, siguen siendo 3 capas, que están encerradas dentro de una que servirá de referencia, y lo único que agregamos fue la etiqueta HR para separar el texto de los títulos.

html.002

Como en los otras ocasiones, vamos al CSS, que es el que se encarga del trabajo en si.

css-layout-shifter.003

Como podemos observar, el media query se ejecutara cuando la pantalla mida 640 pixeles como mínimo, en ese momento, la primer capa(principal) ocupara el 30% de la pantalla (width : 30%) y las otras dos capas (.segunda .tercera) ocuparan el 70% ( witdh: 70%).

Al ser las dos ultimas capas del mismo ancho se acomodaron una encima de la otra, quedando tal y como vemos a continuación

Captura de pantalla 2012-12-08 a la(s) 20.48.43

Pero al hacerse mas pequeña la pantalla, queda de la siguiente forma

Captura de pantalla 2012-12-08 a la(s) 21.05.44

 

A continuación el enlace para descargar el modelo que hemos presentado

http://db.tt/mDB47tFM

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , , . Guarda el enlace permanente.

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s