Layouts adaptables

Objetivo:

-Probar distintas técnicas para modificar el diseño de una página, según en cuál tamaño de pantalla está siendo visualizada.

Unidad 2

Enfoque de Breakpoints “content-out”

(y no “device-in”)

Antes: Device-in

1) Se hacía una lista de 5 o 6 aparatos más usados

2) Se hacía una lista con la resolución en px de cada uno

3) Se definían los breakpoints con una media querie en pixeles para cada dispositivo.

No es sostenible!!

Ejemplo (¡obsoleto!) p/iPhone y iPad (no Retina) <link rel="stylesheet" media="screen and (max-width: 480px)" href="iphone.css">

<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 1024px) and (orientation:portrait)" href=“ipad.css">

<link rel="stylesheet" media="screen and (min-width:481px) and (max-width: 1024px) and (orientation:landscape)" href="ipad-horizontal.css">

Paul Lloyd

“Recomiendo usar breakpoints que dependan de los contenidos [...] un diseño no se adapta porque la ventana se ha angostado, sino debido a que el ancho de determinado renglón es excesivo, o a que un encabezado largo ocupa demasiados renglones.”

http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/#comment-61334

Ahora: Content-out

Se evalúan los anchos de renglón.

Se hace una lista de anchos de ventana del navegador a los que el contenido debería reajustarse

Se hace una media querie en función de cada uno de esos anchos (convertidos a EMs)

Sostenible!!

@media screen and (min-width: 47.5em) {

.columnas {

width: 45%;

float:left;

}

}

Si 16px ~= 1em → 760px = 47.5em

Ejercicio 1

- Modificar rangos de media queries del último ejercicio, aplicando em en vez de pixeles

Seamos future friendly Preveamos pantallas más grandes, con más

resolución

Ultimo breakpoint sin max-width:

@media screen and (min-width:100em){/* ideal ancho fijo, centrado (contenedor en

em), para que no se estiren renglones) */

}

Ejercicio 2

- En el último rango, definir un ancho máximo al contenedor igual al valor del breakpoint, en ems, y centrarlo.

Zoe Gillenwater

“No creo que debamos ignorar totalmente los anchos de dispositivos más comunes cuando decidimos dónde hacer los breakpoints. Por ejemplo, si sabemos que tendremos una gran parte de nuestra audiencia usando iPhones, asegurémosnos de que el diseño luce bien prolijo a 320px y 480px.

¡Pero dejemos los breakpoints en Ems!”

Tipos de Layout y reacomodamientos

“Flotar o no flotar, that's the question”

#columna1, #columna2 {

float:none; /* Una debajo de la otra */

width:100%;

}

@media screen and (min-width:40em) {

#columna1, #columna2 {

float:left; /* Flotan */

width:45%; }

}

Anchos siempre en porcentaje

Si se apilan, ancho del 100% (considerar padding, margin y border, también en porcentajes).

Si flotan, reducir ancho (a la mitad, a un tercio, etc.).

Ejercicio 3

- Modificar layout por defecto de 1 columna apilada (celulares) a 2 columnas flotadas para cuando el renglón sea mayor a 50em de ancho

Patrones de layoutshttp://www.thismanslife.co.uk/projects/lab/responsivewireframes/#mobile

Contenedor envolviendo bloques a flotar en conjunto (B, C, D, E), y contenedor

para nueva franja formada por ese conjunto más lo que vaya a su costado

(F)

Patrones básicos de Luke W.

http://www.lukew.com/ff/entry.asp?1514

Líquido con flotadosDrop de columnas

Absoluto o fijo

Off-canvas

Ejercicio 4

- Implementar un drop de columnas

(la 2da flota primera, y la 3ra queda última en misma fila).

Pista: pensar primero contenedores y hacia dónde flotar...

2 columnas líquidas → 1 columna

2 filas → 2 col. → 1 col.

Galería/portfolio: 3 → 2 → 1

Destacados 4 → 2 → 1

De columna a fila

3 → 1 mezcladas

Más tipos de layouts responsive

http://bradfrost.github.io/this-is-responsive/patterns.html

¿Qué selectores conviene usar?

¿Definimos #id de cada columna? → código CSS muy largo!

¿Definimos un .class? → reutilizable

- Recordar múltiples clases: class=“una dos tres”

- Cuidar especificidad (id predomina sobre class)

¿Y qué definimos en cada selector?

¿Definimos ancho de columna en porcentaje?

¿Cómo definimos margin y/o padding?

¿Y desplazamientos? (columnas vacías)

¿Y la última (o primera) columna de cada fila?

¿Qué nombre le damos a cada class? (el de su ancho, o la cantidad de columnas)

Solución: SISTEMAS de GRILLAS

Comparar sistemas de grillas

-En pixeles → Skeleton: http://www.getskeleton.com/

-En % → Responsive Grid System:

Probar http://www.responsive.gs

Ejercicio 5

- Modificar el demo de la grilla responsive.gs agregando nuevas filas y columnas.

Probar e investigar:

Ejercicio 6

- Aplicar la grilla Bootstrap a una copia del ejercicio 3 (que cambiaba de una columna apilada en pantallas chicas, a dos columnas flotadas en pantallas grandes).

Hora de almorzar!...

Seguimos en media hora

¿Preguntas?