Responsive Web Design: Reinventando el diseño web
-
Upload
javier-usobiaga -
Category
Documents
-
view
11.965 -
download
0
description
Transcript of Responsive Web Design: Reinventando el diseño web
![Page 1: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/1.jpg)
RESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGN
reinventando el diseño web
Javier Usobiaga #DevUp12
![Page 2: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/2.jpg)
@htmlboy@htmlboy@htmlboy
trabajo en Swwweet.com
![Page 3: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/3.jpg)
¿Qué es elresponsiveweb design?
¿Qué es elresponsiveweb design?
¿Qué es elrespoNsiveweb design?
![Page 4: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/4.jpg)
¿Qué esLA web?¿Qué esLA web?¿Qué esLA web?
![Page 5: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/5.jpg)
obsesiónobsesiónhistoria de una
obsesiónpor el control
![Page 6: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/6.jpg)
1990s1990s1990s
la web mide 800px
![Page 7: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/7.jpg)
2000s2000s2000s
la web mide 1024px
![Page 8: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/8.jpg)
200720072007
+la web mide 1024px y 320px
![Page 9: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/9.jpg)
201020102010
+ +la web mide 1200px y 320px
y 768px
![Page 10: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/10.jpg)
201220122012
+ +la web mide 1200px y 320px
y 768px y 1800px
+
![Page 11: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/11.jpg)
201220122012
+ +¿320px?
+
![Page 12: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/12.jpg)
201220122012
la web mide 256px y 320px y 426px y 480px y 560px y 640px
y 768px y 800px y 960px y 1024px y 1280px y 1440px
y 1600px y 1800px…
+ + + +
![Page 13: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/13.jpg)
¡BASTA!¡BASTA!¡BASTA!es hora de aceptar la naturaleza de la web
![Page 14: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/14.jpg)
LA WEB ESLA WEB ESLA WEB ESfluida
universal
multidispositivo
![Page 15: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/15.jpg)
primer acto
RESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGN
![Page 16: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/16.jpg)
2012.dconstruct.org
![Page 17: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/17.jpg)
mediaqueri.es
![Page 18: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/18.jpg)
¿PERO CÓMO?¿PERO CÓMO?¿PERO CÓMO?retículas flexibles
elementos multimedia flexibles
@media queries
![Page 19: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/19.jpg)
RETÍCULASRETÍCULASRETÍCULAS
16% 16% 16% 16% 16% 16% 16% 16%
![Page 20: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/20.jpg)
RETÍCULASRETÍCULASRETÍCULAStarget
contexto÷
resultado
![Page 21: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/21.jpg)
RETÍCULASRETÍCULASRETÍCULAS.grid_3{width:300px}
300 / 960 = 0,2340.grid_3{width:23.40%}
![Page 22: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/22.jpg)
MULTIMEDIAMULTIMEDIAMULTIMEDIAimg,video{ max-width:100%}
![Page 23: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/23.jpg)
MEDIA QUERIESMEDIA QUERIESMEDIA QUERIES@media screen and (max-width:320px){ .columna_lateral{ width: 100%; float: none; }
}
![Page 24: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/24.jpg)
MEDIA QUERIESMEDIA QUERIESMEDIA QUERIEScambiar el layout
cambiar los estilos
aumentar el tamaño de la tipografía
![Page 25: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/25.jpg)
workflowworkflowworkflow
segundo acto
![Page 26: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/26.jpg)
CASCADACASCADACASCADA
DISEÑOUX
DISEÑOVISUAL
FRONTEND JEFE
![Page 27: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/27.jpg)
CASCADACASCADACASCADAHola, quería unaweb...
![Page 28: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/28.jpg)
CASCADACASCADACASCADA¡Claro!
![Page 29: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/29.jpg)
CASCADACASCADACASCADAEmpezaré por definir las estructuras en unos wireframes.
![Page 30: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/30.jpg)
CASCADACASCADACASCADALe damos un poco de color...
![Page 31: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/31.jpg)
CASCADACASCADACASCADAUnos CSS por aquí, un JS por allá... ¡Y ya tenemos web!
![Page 32: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/32.jpg)
CASCADACASCADACASCADA
Uh... esto...
![Page 33: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/33.jpg)
FAILfailFail
![Page 34: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/34.jpg)
responsiveresponsiveResponsive
![Page 35: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/35.jpg)
diezconsejos
diezconsejos
diezconsejos
tercer acto
![Page 36: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/36.jpg)
1. Comunicación
Entre todo el equipo, durante todo el ciclo de vida del proyecto.
![Page 37: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/37.jpg)
2. Diseño y front-end, juntos
El proceso está lleno de decisiones que se toman sobre la marcha.
![Page 38: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/38.jpg)
3. Microentregas
El cliente participa activamente y ayuda a tomar decisiones.
![Page 39: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/39.jpg)
4. Lo primero, el contenido
Haz un inventario del contenido y busca sus límites.
![Page 40: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/40.jpg)
5. Identifica puntos críticos
Navegación, imágenes, publicidad, jerarquía informativa…
![Page 41: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/41.jpg)
6. Mobile first
La pantalla pequeña es el primer límite.
![Page 42: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/42.jpg)
7. Bocetos de referencia
Crea bocetos básicos para jerarquizar el contenido.
![Page 43: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/43.jpg)
8. Prototipa rápido
Empieza a ver la página en HTML cuanto antes.
![Page 44: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/44.jpg)
9. Diseña en el navegador
Toma decisiones de diseño a medida que ves cómo quedan en pantalla.
![Page 45: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/45.jpg)
10. Diseña todo a la vez
Desarrolla pensando en los diferentes tamaños al mismo tiempo.
![Page 46: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/46.jpg)
EN RESUMENEN RESUMENEN RESUMENno se puede dominar la web
RWD es una solución viable
si cambiamos la mentalidad
![Page 47: Responsive Web Design: Reinventando el diseño web](https://reader034.fdocuments.mx/reader034/viewer/2022051411/546d970bb4af9f6b2c8b5407/html5/thumbnails/47.jpg)
¡gracias!¡gracias!¡gracias!
Javier Usobiaga · http://Swwweet.com · @htmlboy