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