Responsive Web Design

16
¿Qué es Responsive Web Design/ Diseño Web Adaptable?

description

 

Transcript of Responsive Web Design

Page 1: Responsive Web Design

¿Qué es Responsive Web Design/ Diseño Web Adaptable?

Page 2: Responsive Web Design

Los sitios web adaptables, responden a su ambiente.

Page 3: Responsive Web Design
Page 4: Responsive Web Design

Adaptativo (Multiple fixed layouts/Múltiples diseños adaptables

para brindar la mejor experiencia a una audiencia más extensa) O

Responsivo (Multiple fluid grid layouts/ Estructura fluida

para adaptar el sitio web al entorno del usuario.)

Page 5: Responsive Web Design

¿Por qué es importante?

“Día tras día, crece el número de dispositivos, plataformas y exploradores que hacen uso de tu sitio.

El diseño web adaptable representa un cambio fundamental en la manera en la que construimos

sitios para la siguiente década.”

- Jeffrey Veen

Page 6: Responsive Web Design

Pequeño + mediano + grande un sitio para todas las pantallas.

Page 7: Responsive Web Design

¿Quién lo está haciendo?

No solo demos, sitios de diseño y de vanidades. Clientes reales.

Page 8: Responsive Web Design

The Boston Globe El proyecto de diseño web adaptable más grande

hasta el momento.

Page 9: Responsive Web Design

Grey Goose Sitio adaptable con animación de desplazamiento

parallax.

Page 10: Responsive Web Design

Barak Obama La campaña de Obama se situó como líder en

tecnología y diseño web.

Page 11: Responsive Web Design

… y muchos más.

Page 12: Responsive Web Design

¿Cuándo utilizarlo? Cosas a considerar:

Tiempo y dinero Compatibilidad con exploradores

Funcionalidad Contenido

Sitio web vs. Aplicación web

Page 13: Responsive Web Design

Frameworks (Estructura previa – ahorra tiempo.)

Crear una estructura propia

(Mayor control)

Page 14: Responsive Web Design

Buenas prácticas Revisión de contenido

Empezar pequeño (móviles) Salir de Photoshop, entrar al explorador

Optimizar siempre

Page 15: Responsive Web Design

Nuevas y mejores prácticas van surgiendo constantemente.

Page 16: Responsive Web Design

Fuente: “What The Heck Is Responsive Web Design?”

(John Polacek)