Enviar búsqueda
Cargar
Responsive Web Design: reinventando el diseño web
•
30 recomendaciones
•
5,413 vistas
Javier Usobiaga
Seguir
Presentación en #webpuntbcn 2012.
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 47
Descargar ahora
Descargar para leer sin conexión
Recomendados
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Javier Usobiaga
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
Jano Garcia
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño web
Javier Usobiaga
Diseño adaptativo y responsive
Diseño adaptativo y responsive
Renny Batista
Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web Responsive
Hernan Beati
ULSA Nov/11
ULSA Nov/11
Axel Valdez
Magia con Drupal
Magia con Drupal
mbavio
Fundamentos DiseñO Web
Fundamentos DiseñO Web
Raymond Marquina
Recomendados
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
Javier Usobiaga
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
Jano Garcia
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño web
Javier Usobiaga
Diseño adaptativo y responsive
Diseño adaptativo y responsive
Renny Batista
Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web Responsive
Hernan Beati
ULSA Nov/11
ULSA Nov/11
Axel Valdez
Magia con Drupal
Magia con Drupal
mbavio
Fundamentos DiseñO Web
Fundamentos DiseñO Web
Raymond Marquina
Separando el Contenido de la Presentación
Separando el Contenido de la Presentación
Christian Van Der Henst S.
Herramientas para capturar imágenes de páginas web
Herramientas para capturar imágenes de páginas web
David Fimia Zapata
Weebly
Weebly
natalia reyes villanueva
Web Gratis
Web Gratis
yorlyncito
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCC
Carlos Azaustre
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Gerson Perez Aguilar
Tendencias diseño web 2016 2017
Tendencias diseño web 2016 2017
Adriana Tienda
Que es un diseño web
Que es un diseño web
Sarai Osorio Valdez
Rep
Rep
yarleiby19
Diseño web responsive
Diseño web responsive
DE_Marketing
Que es webnode
Que es webnode
amaliasusana
Wix
Wix
Escuela Superior de Medicina
historia de Flash
historia de Flash
Evelyn
Presentacion Iniciación al Responsive Web Design
Presentacion Iniciación al Responsive Web Design
Geekia
Cheko24
Cheko24
cheko34
Cheko24
Cheko24
cheko34
Creación de página web con wix
Creación de página web con wix
blogdevon
Prezentit
Prezentit
Andres Felipe Lugo Montoya
Responsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño web
Claudio Adrian Natoli Michieli
Front end basics - Responsive Web Design
Front end basics - Responsive Web Design
Nadal Soler
Blogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMX
Adan Avelar
3 dslideshare
3 dslideshare
Celia Teresa Humire
Más contenido relacionado
La actualidad más candente
Separando el Contenido de la Presentación
Separando el Contenido de la Presentación
Christian Van Der Henst S.
Herramientas para capturar imágenes de páginas web
Herramientas para capturar imágenes de páginas web
David Fimia Zapata
Weebly
Weebly
natalia reyes villanueva
Web Gratis
Web Gratis
yorlyncito
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCC
Carlos Azaustre
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Gerson Perez Aguilar
Tendencias diseño web 2016 2017
Tendencias diseño web 2016 2017
Adriana Tienda
Que es un diseño web
Que es un diseño web
Sarai Osorio Valdez
Rep
Rep
yarleiby19
Diseño web responsive
Diseño web responsive
DE_Marketing
Que es webnode
Que es webnode
amaliasusana
Wix
Wix
Escuela Superior de Medicina
historia de Flash
historia de Flash
Evelyn
Presentacion Iniciación al Responsive Web Design
Presentacion Iniciación al Responsive Web Design
Geekia
Cheko24
Cheko24
cheko34
Cheko24
Cheko24
cheko34
Creación de página web con wix
Creación de página web con wix
blogdevon
Prezentit
Prezentit
Andres Felipe Lugo Montoya
La actualidad más candente
(18)
Separando el Contenido de la Presentación
Separando el Contenido de la Presentación
Herramientas para capturar imágenes de páginas web
Herramientas para capturar imágenes de páginas web
Weebly
Weebly
Web Gratis
Web Gratis
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCC
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Tendencias diseño web 2016 2017
Tendencias diseño web 2016 2017
Que es un diseño web
Que es un diseño web
Rep
Rep
Diseño web responsive
Diseño web responsive
Que es webnode
Que es webnode
Wix
Wix
historia de Flash
historia de Flash
Presentacion Iniciación al Responsive Web Design
Presentacion Iniciación al Responsive Web Design
Cheko24
Cheko24
Cheko24
Cheko24
Creación de página web con wix
Creación de página web con wix
Prezentit
Prezentit
Similar a Responsive Web Design: reinventando el diseño web
Responsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño web
Claudio Adrian Natoli Michieli
Front end basics - Responsive Web Design
Front end basics - Responsive Web Design
Nadal Soler
Blogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMX
Adan Avelar
3 dslideshare
3 dslideshare
Celia Teresa Humire
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Rob Montero
SharePoint Saturday Lima - Como me veo!
SharePoint Saturday Lima - Como me veo!
Fernando Chiquiza Ramos
Diseño de páginas web
Diseño de páginas web
Luisa Perez
Responsive Web Design
Responsive Web Design
Fernando Esteban Pasik
Valery 10
Valery 10
Vale Salazar
Las Tendencias De Diseno Web Que Vamos a ver En dos mil quince
Las Tendencias De Diseno Web Que Vamos a ver En dos mil quince
longyoealfsftu
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
AdanAvelar
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
Hernan Beati
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
Mario Martinez
Usabilidad web
Usabilidad web
Domestika
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Marta Armada
Web móvil ¿inclusiva y accesible?
Web móvil ¿inclusiva y accesible?
movimientodisenoinclusivo
Web móvil: ¿inclusiva y accesible?
Web móvil: ¿inclusiva y accesible?
Hernan Beati
04 Adobe CS Conceptos minimos
04 Adobe CS Conceptos minimos
Víctor Manuel García Luna
ing.software
ing.software
Enrique Reyes
Wed
Wed
instituto trujillo
Similar a Responsive Web Design: reinventando el diseño web
(20)
Responsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño web
Front end basics - Responsive Web Design
Front end basics - Responsive Web Design
Blogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMX
3 dslideshare
3 dslideshare
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
SharePoint Saturday Lima - Como me veo!
SharePoint Saturday Lima - Como me veo!
Diseño de páginas web
Diseño de páginas web
Responsive Web Design
Responsive Web Design
Valery 10
Valery 10
Las Tendencias De Diseno Web Que Vamos a ver En dos mil quince
Las Tendencias De Diseno Web Que Vamos a ver En dos mil quince
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
Usabilidad web
Usabilidad web
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
Web móvil ¿inclusiva y accesible?
Web móvil ¿inclusiva y accesible?
Web móvil: ¿inclusiva y accesible?
Web móvil: ¿inclusiva y accesible?
04 Adobe CS Conceptos minimos
04 Adobe CS Conceptos minimos
ing.software
ing.software
Wed
Wed
Responsive Web Design: reinventando el diseño web
1.
RESPoNSIVE
WEB DESIGN reinventando el diseño web Javier Usobiaga #webpuntbcn 2012
2.
@htmlboy trabajo en Swwweet.com
3.
¿Qué es el respoNsive responsive web
design?
4.
¿Qué es LA web?
5.
historia de una obsesión
por el control
6.
1990s la web mide
800px
7.
2000s la web mide
1024px
8.
2007
+ la web mide 1024px y 320px
9.
2010
+ + la web mide 1200px y 320px y 768px
10.
2012
+ + + la web mide 1200px y 320px y 768px y 1800px
11.
2012 + +
+ ¿320px?
12.
2012 +
+ + + 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…
13.
¡BASTA! es hora de
aceptar la naturaleza de la web
14.
LA WEB ES
fluida universal multidispositivo
15.
primer acto RESPoNSIVE WEB DESIGN
16.
2012.dconstruct.org
17.
mediaqueri.es
18.
¿PERO CÓMO?
retículas flexibles elementos multimedia flexibles @media queries
19.
RETÍCULAS 16%
16% 16% 16% 16% 16% 16% 16%
20.
RETÍCULAS
target ÷ contexto resultado
21.
RETÍCULAS
.grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%}
22.
MULTIMEDIA
img, video{ max-width:100% }
23.
MEDIA QUERIES @media screen
and (max-width:320px){ .columna_lateral{ width: 100%; float: none; } }
24.
MEDIA QUERIES
cambiar el layout cambiar los estilos aumentar el tamaño de la tipografía
25.
segundo acto workflow
26.
CASCADA DISEÑO
DISEÑO FRONT JEFE UX VISUAL END
27.
CASCADA Hola,
quería una web...
28.
CASCADA ¡Claro!
29.
CASCADA Empezaré
por definir las estructuras en unos wireframes.
30.
CASCADA Le
damos un poco de color...
31.
CASCADA Unos
CSS por aquí, un JS por allá... ¡Y ya tenemos web!
32.
CASCADA Uh...
esto...
33.
Fail fail FAIL
34.
Responsive responsive
35.
tercer acto
diez consejos
36.
1. Comunicación Entre todo
el equipo, durante todo el ciclo de vida del proyecto.
37.
2. Diseño y
front-end, juntos El proceso está lleno de decisiones que se toman sobre la marcha.
38.
3. Microentregas El cliente
participa activamente y ayuda a tomar decisiones.
39.
4. Lo primero,
el contenido Haz un inventario del contenido y busca sus límites.
40.
5. Identifica puntos
críticos Navegación, imágenes, publicidad, jerarquía informativa…
41.
6. Mobile first La
pantalla pequeña es el primer límite.
42.
7. Bocetos de
referencia Crea bocetos básicos para jerarquizar el contenido.
43.
8. Prototipa rápido Empieza
a ver la página en HTML cuanto antes.
44.
9. Diseña en
el navegador Toma decisiones de diseño a medida que ves cómo quedan en pantalla.
45.
10. Diseña todo
a la vez Desarrolla pensando en los diferentes tamaños al mismo tiempo.
46.
EN RESUMEN no se
puede dominar la web RWD es una solución viable si cambiamos la mentalidad
47.
¡gracias! Javier Usobiaga ·
http://Swwweet.com · @htmlboy
Descargar ahora