Upload
javier-usobiaga
View
9.654
Download
0
Embed Size (px)
DESCRIPTION
Presentación en #webpuntbcn 2012.
Citation preview
RESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGN
reinventando el diseño web
Javier Usobiaga #webpuntbcn 2012
@htmlboy@htmlboy@htmlboy
trabajo en Swwweet.com
¿Qué es elresponsiveweb design?
¿Qué es elresponsiveweb design?
¿Qué es elrespoNsiveweb design?
¿Qué esLA web?¿Qué esLA web?¿Qué esLA web?
obsesiónobsesiónhistoria de una
obsesiónpor el control
1990s1990s1990s
la web mide 800px
2000s2000s2000s
la web mide 1024px
200720072007
+la web mide 1024px y 320px
201020102010
+ +la web mide 1200px y 320px
y 768px
201220122012
+ +la web mide 1200px y 320px
y 768px y 1800px
+
201220122012
+ +¿320px?
+
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…
+ + + +
¡BASTA!¡BASTA!¡BASTA!es hora de aceptar la naturaleza de la web
LA WEB ESLA WEB ESLA WEB ESfluida
universal
multidispositivo
primer acto
RESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGNRESPoNSIVE WEB DESIGN
2012.dconstruct.org
mediaqueri.es
¿PERO CÓMO?¿PERO CÓMO?¿PERO CÓMO?retículas flexibles
elementos multimedia flexibles
@media queries
RETÍCULASRETÍCULASRETÍCULAS
16% 16% 16% 16% 16% 16% 16% 16%
RETÍCULASRETÍCULASRETÍCULAStarget
contexto÷
resultado
RETÍCULASRETÍCULASRETÍCULAS.grid_3{width:300px}
300 / 960 = 0,2340.grid_3{width:23.40%}
MULTIMEDIAMULTIMEDIAMULTIMEDIAimg,video{ max-width:100%}
MEDIA QUERIESMEDIA QUERIESMEDIA QUERIES@media screen and (max-width:320px){ .columna_lateral{ width: 100%; float: none; }
}
MEDIA QUERIESMEDIA QUERIESMEDIA QUERIEScambiar el layout
cambiar los estilos
aumentar el tamaño de la tipografía
workflowworkflowworkflow
segundo acto
CASCADACASCADACASCADA
DISEÑOUX
DISEÑOVISUAL
FRONTEND JEFE
CASCADACASCADACASCADAHola, quería unaweb...
CASCADACASCADACASCADA¡Claro!
CASCADACASCADACASCADAEmpezaré por definir las estructuras en unos wireframes.
CASCADACASCADACASCADALe damos un poco de color...
CASCADACASCADACASCADAUnos CSS por aquí, un JS por allá... ¡Y ya tenemos web!
CASCADACASCADACASCADA
Uh... esto...
FAILfailFail
responsiveresponsiveResponsive
diezconsejos
diezconsejos
diezconsejos
tercer acto
1. Comunicación
Entre todo el equipo, durante todo el ciclo de vida del proyecto.
2. Diseño y front-end, juntos
El proceso está lleno de decisiones que se toman sobre la marcha.
3. Microentregas
El cliente participa activamente y ayuda a tomar decisiones.
4. Lo primero, el contenido
Haz un inventario del contenido y busca sus límites.
5. Identifica puntos críticos
Navegación, imágenes, publicidad, jerarquía informativa…
6. Mobile first
La pantalla pequeña es el primer límite.
7. Bocetos de referencia
Crea bocetos básicos para jerarquizar el contenido.
8. Prototipa rápido
Empieza a ver la página en HTML cuanto antes.
9. Diseña en el navegador
Toma decisiones de diseño a medida que ves cómo quedan en pantalla.
10. Diseña todo a la vez
Desarrolla pensando en los diferentes tamaños al mismo tiempo.
EN RESUMENEN RESUMENEN RESUMENno se puede dominar la web
RWD es una solución viable
si cambiamos la mentalidad
¡gracias!¡gracias!¡gracias!
Javier Usobiaga · http://Swwweet.com · @htmlboy