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