Responsive Web Design
-
Upload
claudia-echeverria -
Category
Technology
-
view
581 -
download
0
description
Transcript of Responsive Web Design
![Page 1: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/1.jpg)
¿Qué es Responsive Web Design/ Diseño Web Adaptable?
![Page 2: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/2.jpg)
Los sitios web adaptables, responden a su ambiente.
![Page 3: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/3.jpg)
![Page 4: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/5.jpg)
¿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](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/6.jpg)
Pequeño + mediano + grande un sitio para todas las pantallas.
![Page 7: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/7.jpg)
¿Quién lo está haciendo?
No solo demos, sitios de diseño y de vanidades. Clientes reales.
![Page 8: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/8.jpg)
The Boston Globe El proyecto de diseño web adaptable más grande
hasta el momento.
![Page 9: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/9.jpg)
Grey Goose Sitio adaptable con animación de desplazamiento
parallax.
![Page 10: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/10.jpg)
Barak Obama La campaña de Obama se situó como líder en
tecnología y diseño web.
![Page 11: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/11.jpg)
… y muchos más.
![Page 12: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/12.jpg)
¿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](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/13.jpg)
Frameworks (Estructura previa – ahorra tiempo.)
Crear una estructura propia
(Mayor control)
![Page 14: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/15.jpg)
Nuevas y mejores prácticas van surgiendo constantemente.
![Page 16: Responsive Web Design](https://reader033.fdocuments.co/reader033/viewer/2022051109/5480c877b4af9fc05f8b4625/html5/thumbnails/16.jpg)
Fuente: “What The Heck Is Responsive Web Design?”
(John Polacek)