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.

Presentación del tema: "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."— Transcripción de la presentación:

1 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

2 Enfoque de Breakpoints “content-out” (y no “device-in”)

3 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!!

4 Ejemplo (¡obsoleto!) p/iPhone y iPad (no Retina)

5 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

6 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!!

7 @media screen and (min-width: 47.5em) {.columnas { width: 45%; float:left; } Si 16px ~= 1em → 760px = 47.5em

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

9 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) */ }

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

11 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!”

12 Tipos de Layout y reacomodamientos

13 “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%; } }

14 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.).

15 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

16 Patrones de layouts http://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)

17 Patrones básicos de Luke W. http://www.lukew.com/ff/entry.asp?1514 Líquido con flotados Drop de columnas Absoluto o fijo Off-canvas

18 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...

19 2 columnas líquidas → 1 columna

20 2 filas → 2 col. → 1 col.

21 Galería/portfolio: 3 → 2 → 1

22 Destacados 4 → 2 → 1

23 De columna a fila

24 3 → 1 mezcladas

25 Más tipos de layouts responsive http://bradfrost.github.io/this-is-responsive/patterns.html

26 ¿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)

27 ¿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

28 Comparar sistemas de grillas -En pixeles → Skeleton: http://www.getskeleton.com/ http://www.getskeleton.com/ -En % → Responsive Grid System: Probar http://www.responsive.gshttp://www.responsive.gs

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

30 Probar e investigar:

31 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).

32 Hora de almorzar!... Seguimos en media hora

33 ¿Preguntas?