Responsive Web Design

Transcripción

1 Responsive Web Design Diseño flexible para PC, celulares y tabletas (y relojes, televisores, heladeras, etc ) Hernán [email protected]

2 Hernán Beati Diseñador gráfico (+19 años) Web (+14 años) Analista de Sistemas / Desarrollador Web (+13 años) Diseñador de Webs Móviles (+2 años) Autor de: Terminando libro sobre: Y empezando otro sobre Responsive Web Design Docente en:

3 Unidad 1: Introducción al diseño web adaptable

4 Antes, la web podía ser rígida: 1995: 640 x 480px 2000: 2005: 800 x 600px 1024 x 768px Ancho líquido (%) era suficiente...

5 Pero los monitores crecieron...

6 Y siguen, y seguirán, creciendo...

7 Y también se achicaron en celulares y tabletas % = Otros!

8 DIVERSIDAD

9 La web y los estándares web han sido siempre responsive Bruce Lawson La web es inherentemente flexible, el problema es el sobre-diseño (clavar todo con alfileres )

10 Toda web se miniaturiza Textos ilegibles Fotos irreconocibles Enlaces no pulsables Zoom constante Scroll = horizontal + vertical!!!! le b a Inus

11 1er Objetivo = adaptar el diseño

12 Distinto tamaño = distinto diseño 2 columnas -tableta chica1 columna -celularhttp:// 3 columnas -tableta grande- 3 columnas (o más) -PC-

13 Qué puede entregarle RWD a cada dispositivo? -Distinto código CSS -Y distinto código HTML (x CSS)

14 Esos CSS, qué deberían cambiar? 1) Optimizar layout (cantidad de columnas) 2) Adaptar textos y fotos decorativas para garantizar legibilidad 3) Hacer medios flexibles (fotos, sliders, videos, mapas, tablas de datos) 4) Herramientas de navegación adaptadas

15 Cómo lo cambian? Con la técnica de Media Queries Distintos estilos dependiendo de características del dispositivo (condiciones)

16 Dónde definir condiciones? (I) 1. Al vincular distintas hojas CSS: <link rel="stylesheet" href="pantalla.css" media="screen"> <link rel="stylesheet" href="papel.css" e l b a media="print"> iliz b i t a p m o c n i etc... e n to Mala e l, a i de

17 Dónde definir condiciones? (II) 2. En distintas zonas de una única hoja: /* Estilos para todos los medios */ p{ font-size:2em; } /* Estilos para papel print{ le b i t pa m p{ font-size:14pt; } o c y, n ó i c i t } e p a ol s Una

18 Cómo detectar el medio? Medios posibles: braille, handheld, print, projection, screen, tty, tv, embossed, speech all (todos) Ejemplo: <link rel="stylesheet" media="screen" href="pantalla.css" /> s u o l So en e r c s s o ar e m

19 Cómo agregar medio + condición? Esquema: <link media="medio and (condición)" href="hoja.css" /> -Ejemplo en HTML: <link rel="stylesheet" media="screen and (minwidth:1024px)" href="grande.css" /> -Ejemplo en screen and (min-width:1024px) { }

20 Qué propiedades CSS puedo detectar con condiciones? Width / Height / Device-width / Device-height Orientation (portrait o landscape) Aspect-ratio y Device-aspect-ratio Color, Color-index y Monochrome Resolution (300dpi) Y supuestamente más...

21 Cuáles usaremos el 99% de casos? Width (con min-width y/o max-width) Resolution y Aspect-ratio

22 Ejercicio 1 1) Crear una página con un título y varios párrafos, y vincularle una hoja CSS. 2) Definirle un tamaño de texto global (al body) en pixeles ; y dentro de una media querie, definirle otro tamaño más chico para cuando el dispositivo mida menos de 800px

23 Ejercicio 2 Al ejercicio anterior, dentro de otra media querie extra, definirle otro tamaño más chico de fuentes para cuando el dispositivo mida menos de 480px

24 Nos ganamos un café!... Vamos al break, y seguimos en 10 minutos

25 Objetivo de medidas de fuentes: Garantizar la legibilidad

26 PREGUNTA: El pixel es una unidad de medida fija (independiente) o relativa (dependiente)?

27 Probemos a aumentar el tamaño de fuente en px en Explorer... se puede?

28 No sirve más usar px! Si declaré fuentes en px en 20 declaraciones de mi hoja, tendré que redefinir el valor en px en los 20 lugares por cada media querie que aplique!!!...

29 1. Tamaño de fuentes (I) Porcentajes + Ems body{ font-size:60%; } Body en % h1{ font-size:2em; } Elementos en Em p{ font-size:1em; screen and (min-width:480px) { body{font-size:80%;} } Cambiando un % cambia todo el esquema

30 1. Tamaño de fuentes screen and (min-width:600px) { body{ font-size:80%; } screen and (min-width:1024px) { body{ font-size:100%; } }

31 Ejercicio 3 - Modificar el ejercicio anterior para que las unidades de medida de fuentes sean flexibles

32 Script compatibilizador 1. Requiere un servidor (hosting o local), no soporta file: (ATENCION: con doble click al archivo NO ANDA) Solo funciona en media queries dentro de una misma hoja de estilos, no lee <link

33 Script compatibilizador <!--[if lt IE 9]> <script src= ></script> <![endif]--> <meta http-equiv="x-ua-compatible" content="ie=edge">

34 Viewport <meta name="viewport" content="width=device-width, initial-scale=1">

35 Ejercicio 4 - Modificar el ejercicio anterior agregando la etiqueta viewport y el script compatibilizador

36 Breakpoints 1) Scaffolding acumula estilos Al menos 480px Al menos 800px (también aplica anterior) Al menos 1024px (también aplica anteriores) 2) Rangos: excluye Al menos 320 y como máximo 480 Al menos 481 y como máximo 800 (no aplica anterior) Al menos 801 (no aplica anteriores)

37 Mobile First: el orden importa El orden de los breakpoints importa mucho!

38 Ejercicio 4 - Crear cuatro condiciones con media queries, ordenando según el concepto Mobile First: - 1er tamaño, para celular, sin media querie - 2do tamaño, de 320 a 480-3er tamaño, de 480 a 800-4to tamaño de 800 a Ultimo, más de 1280 Que en cada media querie cambie el color de fondo del body, así lo percibimos