Fundamentos Responsive Web Design

Responsive Web Design - Fundamentos (v. 2016) www.xpert.video

Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe CertiďŹ ed Instructor

pert pert

Learn design & code Learn design & code

www.xpert.video

CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R

Design Master / Web Master

CERTIFIED INSTRUCTOR

Design Master / Web Master

www.linkedin.com/in/marlonceballos/

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Learn

Learn

pert

design & code

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Conceptos fundamentales

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Un mundo multiscreen Un mundo de múltiples pantallas: • Pequeñas pantallas • Grandes pantallas • Múltiples resoluciones • Wearables, carros, electrodomésticos, etc.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Un mundo multiscreen Múltiples tamaños de pantalla: • Cada vez mas grandes 640x480, 800x600, 1.024x768, 1.920x1.080, etc • Cada vez mas pequeñas (teléfonos móviles) • Cada vez mas grandes (smartphones) • Cada vez mas pequeñas (smartwatches).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Un mundo multiscreen

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Un mundo multiscreen

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Un mundo multiscreen • iPhone 4-6: 2 veces la resolución de los primeros iPhones • iPhone 6 Plus: +3 veces la resolución de los primeros iPhones.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

QuĂŠ es Responsive Web Design Estrategia de diseĂąo cuyo objetivo es permitir que el contenido responda al entorno en el cual se visualiza.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Responsive Web Design Cambia la forma como abordamos y planeamos el diseño de un sitio web: • Replantear estrategias de contenido • Tener en cuenta la forma cómo las personas acceden y usan el contenido dependiendo del contexto • Aprovechar las capacidades de los dispositivos.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Responsive Web Design

El término fue acuñado por Ethan Marcotte quien identificó 3 técnicas fundamentales para RWD: • Grillas fluidas (diseños flexibles) • Media Queries (adaptación de contenido) • Media flexible (imágenes y video).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Ethan Marcotte www.ethanmarcotte.com

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Responsive Web Design • Nuevo enfoque de diseño web • La forma como se diseña un sitio web.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Componentes de un sitio web Responsive • HTML: estructura (sencilla y semántica) • CSS: media queries (limitar llamados) • Javascript: control de carga de recursos (limitar su uso).

HTML

Learn

pert

design & code

CSS

www.xpert.video

JS

CERTIFIED INSTRUCTOR

Design Master / Web Master

RWD es para todos?

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Responsive Web Design • RWD no es la respuesta a todos los problemas de nuestro sitio web • RWD no es un reemplazo para sitios web móviles • RWD no es un fin, es una técnica o herramienta que podría ayudar a llegar al fin.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Responsive Web Design El fin de un sitio web deber ser lograr sus objetivos mediante: • Usabilidad • Accesibilidad • Probablemente, RWD.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Conceptos bรกsicos

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Viewport

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Viewport En un navegador de escritorio es el รกrea visible.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Viewport • En móviles el viewport es mayor que la resolución del dispositivo • El ancho del iPhone 5 es 320px • En Safari mobile el ancho del viewport es 980px.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Viewport

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Recursos • www.mydevice.io/devices • www.viewportsizes.com.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Viewport y RWD Es necesario controlar: • Tamaño del viewport • Factor de escala inicial.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Control Viewport y escala • Viewport: - <meta name="viewport" content=“width=device-width"> - @viewport{width:device-width;}

• Initial scale (opcional): - <meta name="viewport" content="initial-scale=1.0"> - @viewport{zoom:1;}

• La regla @viewport puede necesitar prefijos propietarios.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Control Viewport y escala • Viewport e Initial scale: - <meta name="viewport" content=“width=device-width, initial-scale=1.0"> - @viewport{width:device-width; zoom:1;}

• Viewport y minimum/maximum scale: - <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2"> - @viewport{width:device-width; min-zoom:1; max-zoom:2;}

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Evitar escala • Viewport e Initial scale: - <meta name="viewport" content=“width=device-width, user-scalable=no”> - @viewport{width:device-width; user-zoom: fixed;}

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Recursos • Set the view port (sitio web Google): www.xper.co/1OMjpLT • Configuring the viewport (sitio web Apple): www.xper.co/1OMjmzN • The viewport (sitio web w3c): www.xper.co/1WhoBPR.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Resoluciรณn de pantallas

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tamaño de pantalla vs resolución

109 ppi 264 ppi

2560 px x 1440 px

2048 px x 1536 px

Apple iMac (27")

Learn

pert

design & code

iPad Air

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tamaño de pantalla vs resolución

Resolución estándar

Learn

pert

design & code

ReEna Display

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tamaño de pantalla vs resolución

100px 100px 200px 200px

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tamaño de pantalla vs resolución • La resolución de imagen es irrelevante • Importa el número de pixeles (tamaño).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tamaño de pantalla vs resolución

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tamaño de pantalla vs resolución Listado de tamaños, resoluciones y densidades: • http://github.com/h5bp/mobile-boilerplate/ wiki/Mobile-Matrices.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Diseño para múltiples densidades • Evita el uso de imágenes • Uso de gráficos CSS (limitado) • Uso de gráficos SVG (pueden afectar el desempeño).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Media Queries

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Media Queries • Parte importante del flujo de trabajo en RWD • Media Types (screen, braille, projection, print, handheld) - <link rel="stylesheet" href="main.css" type="text/css" media="screen">.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Media Queries • Los Media Queries extienden los Media Declarations • Permite seleccionar propiedades de dispositivos • Tamaños de pantalla, orientación, color, etc.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Sintaxis • media="screen and (min-width: 480px), screen and (orientation: landscape)" • La coma (,) es equivalente a OR.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Sintaxis • @media not|only mediatype and (expressions) { CSS-Code; } • El keyword only hace que los navegadores que no soportan Media Queries ignoren dichos estilos.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Features • width*

• color

• height*

• color-index*

• device-width*

• monochrome*

• device-height

• resolution

• orientation

• scan

• aspect-ratio*

• grid

• device-aspect-ratio

• *Permite prefijos "min" y "max"

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Ejemplo • <link href="main.css" rel="stylesheet" type="text/ css" media="screen and (max-width: 480px)"> • @import url(estilos.css) screen and (max-width: 480px) • @media only screen and (max-width: 480px) { p{color: #F00}; }.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Soporte

www.caniuse.com/#feat=css-mediaqueries

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Soporte • www.github.com/scottjehl/Respond • IE 6-8.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Referencias • www.w3schools.com/css/css3_mediaqueries.asp • www.w3.org/TR/css3-mediaqueries/ • www.w3.org/TR/mediaqueries-4/.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Break points • Definen el punto donde existe un cambio de layout • Generalmente se activan con el ancho del viewport • Una de las primeras etapas en RWD es definir los break points.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Ejemplos • <link href="phone.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)"> • <link href="tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 768px)"> • <link href="desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 769px)">

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Ejemplos • @media only screen and (max-width: 480px) { //Estilos para smartphones } • @media only screen and (min-width: 481px) and (max-width: 768px) { //Estilos para tablets } • @media only screen and (min-width: 769px) { //Estilos para desktop }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Fluid layouts

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Fluid layout • Los Break Points no logran cubrir la gran variedad de pantallas • El contenido debe "fluir" en las pantallas.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Grids systems • Frameworks que permiten crear layouts estructurados y proporcionados • Basados en columnas y medianiles que definen tamaños • Es común el uso de grillas basadas en 16 pixeles.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Ejemplos • www.goldengridsystem.com • www.columnal.com • www.getskeleton.com • http://foundation.zurb.com • www.getbootstrap.com.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Desventajas • Basadas en muchas clases generalmente sin nombres semánticos • Suelen requerir marcado HTML adicional (containers/clearing) • Más código del que puede necesitarse usar.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Imรกgenes responsive

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

El problema • Las imágenes por defecto tienen tamaño fijo definido • Se puede usar tamaños relativos: - <img src="img.jpg" width="100%"> - img {max-width: 100%;}

• Problemas con calidad o peso.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Backgrounds • @media only screen and (max-width: 480px) { .image{background: url("small.jpg");} } • @media only screen and (min-width: 481px) and (max-width: 768px) { .image{background: url("med.jpg");} } • @media only screen and (min-width: 769px) { .image{background: url("big.jpg");} }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Diferentes imágenes • La mejor solución es definir una imagen diferente para cada dispositivo • www.github.com/scottjehl/picturefill (polyfill) • www.w3.org/community/respimg/.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Formularios

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Formularios • Menor cantidad de campos posible • Labels en la parte superior del campo • Separación suficiente entre campos • Usar etiquetas y atributos HTML5 (email, url, placeholder, etc) • Evitar confundir al usuario con errores de validación • Usar tipos de campos convenientes para móviles.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Estrategias para RWD

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Contexto • Verificar que los objetivos del sitio web se cumplan en el contexto móvil • La planeación del contexto móvil no puede dejarse para el final.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Planeación • El contenido es lo primero • Mobile first • Definir los Break Points • Se puede usar una sola estructura?.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Mockups • Wireframe (estructura) => Mockup (visual) => Prototype (usabilidad, obligatorio) • Ai, Ps, Muse, Experience Design, etc • Código, Frameworks (Bootstrap).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Estrategia de contenido • Identificar, organizar y administrar contenido en los diferentes contextos • Priorizar y jerarquizar • Mobile first.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Contexto mobile • Conexiones con altas latencias • Pantallas pequeñas • Capacidades específicas (GPS, touch, acelerómetro, etc).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Testing • No limitarse a cambiar el tamaño del navegador • Testear en tantos dispositivos como sea posible • Dreamweaver CC => Device Preview • Emuladores.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Testing • www.responsinator.com • www.responsivepx.com • www.screenqueri.es • http://responsive.pixeltuner.de • http://mobitest.akamai.com.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Flujo de trabajo

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Aspectos iniciales

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tecnologías • HTML5 • Adobe Animate CC • Adobe Experience Manager Mobile • Lenguajes nativos (Ej. Objective-C).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Criterios de elección • Recurso humano • Tiempo disponible • Presupuesto.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Identificar interacción del usuario • Mouse, teclado, lápiz digital, touch, voz, GPS, etc • Orientar el diseño al tipo de interacción • Guía de interfaz humana (Apple): www.xper.co/2872gsn.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Características móviles • Solo una ventana del navegador • No plug-ins en navegadores • No hover.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Técnicas de diseño • Graceful degradation: - Inicia ofreciendo el la mejor experiencia en navegadores modernos e ir degradando "gracefully" a los navegadores antiguos - La funcionalidad básica no debe ser afectada

• Progressive enhancement: - Inicia con una experiencia básica para todos los navegadores y agrega funcionalidades que serán disponibles automáticamente en nav. modernos - Incluye fallbacks para características avanzadas (ej Flash para HTML5).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Diseñar con empatía • El UX determina en gran medida el cumplimiento de objetivos • Target: Quién / dispositivo / por qué visita el sitio?

• Ponerse en los zapatos del usuario.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Diseñar con empatía

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Especialización del diseño • IA (arq. información): contenido • UX (experiencia de usuario): psicología del usuario e interacción • UI (interfaces de usuario): elementos visuales • ID (diseño interacción): unión de conceptos.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Diseño & Desarrollo • Límites menos definidos • Siempre se requieren tareas de diseño • Comunicación.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Comunicación www.styletil.es (Guías de estilo)

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Comunicaciรณn con el cliente

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Expectativas • Diferencias en diseño y funcionalidad entre dispositivos • Mockups para diferentes dispositivos • Programar sesiones de revisión lo más pronto posible.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Presupuesto • Normalmente un diseño responsive es mas costoso • Hacer comparación RWD vs Apps (justificación) • Hacer un presupuesto "modular" (elección).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

DiseĂąo

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Diagramas • Mapa del sitio • Permiten planear elementos de navegación.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Wireframes • Sketch de la estructura de las páginas (para cada dispositivo) • Agregar elementos de diseño puede dispersar al cliente • Ai, Ps, Muse, Experience Design, etc.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Guía de estilo • Una imagen puede no ser suficiente para comunicar un diseño • Crear una guía de estilo (color, fuentes, ventanas, etc) • Prototipos detallados (interacción, estados, transiciones, etc).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Gracias!

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Esta presentaciรณn (y otras)

www.xper.co/presenta

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Recursos

www.delicious.com/marliton

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master