Upload
carlos-zapata
View
1.057
Download
0
Embed Size (px)
Citation preview
DISEÑO SENSIBLERESPONSIVE%
@janogarcia + http://janogarcia.esFeb 2012 @ The Mêlée
No es una presentación técnica, no habrá ejemplos de código.
El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos.
DISCLAIMER
¿Qué?
SENSIBLERESPONSIVONERVIOSOQUE REACCIONA CON ENTUSIASMO
¿Por qué?
Web “1.0” = 1 dispositivo = 1 webDiseño fijo o fluído.
Optimized for800x600
VA A LLEGARRR!!!LA UBICUIDAD
¡Y ya está aquí!
Web “n.0” = n dispositivos = n web?¿Diseño sensible? Múltiples resoluciones, densidades, capacidades...
¿Qué hacemos?
ESCENARIO COMPLEJOWeb “n.0” = n dispositivos = n web?Múltiples dispositivos, resoluciones,densidades, capacidades, contextos...
¿Qué c*** hacemos?
¿SOLUCIÓN SENCILLA?n web = dedicated (desktop, mobile, tablet, app...)1 web = responsive
¿El santo grial?
ESCENARIO COMPLEJO + SOLUCIÓN SENCILLA = ?¿Es posible? Sí - No - Depende.¿Es Responsive Desgin la respuesta? ¿O dedicadas? ¿O una combinación?
“Context is everything.”http://twitter.com/jasonfried/status/29487253471
Responsive: ¿Cómo?
FLUID GRIDS + FLUID MEDIA + MEDIA QUERIES
Fundamentalmente CSS.
% %%
% % %
@media {}
Responsive: ¿Cómo?
http://www.abookapart.com/products/responsive-web-design http://www.alistapart.com/articles/responsive-web-design/
Ethan Marcotte.
Responsive: ¿Cómo?
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Responsive Web Design: What It Is and How To Use It
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
Responsive Web Design Techniques, Tools and Design Strategies
Responsive: ¿Cómo?
http://www.slideshare.net/Martulina
http://themelee.org/
¡Y aquí también!
Pros y Cons
http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly
+ Una sóla base de códigocost, time, code once/less, maintenance...
Soporte futuronuevos dispositivos
Prioriza el contenidocontent first, mobile first, target experience...
Pros y Cons
http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly
Rendimiento (tráfico, requests)bloated HTML/JS, oversized/hidden images... Dependencias JavaScript o Server side@media, images, video...
Esfuerzo (frente a un único layout fijo)development, testing...
+
VS Mobile sites/apps
¿Es un mito el “Mobile Context”?Dependerá de cada caso.Ya no se puede asociar un dispositivo con unas necesidades o contexto específico.
?
http://timkadlec.com/2011/03/responsive-web-design-and-mobile-context/http://adactio.com/journal/4443/http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
VS Mobile sites/apps
http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
There is no Mobile Web. There is only The Web, which we viewin different ways. There is also no Desktop Web. Or Tablet Web. Thank you.”
VS Mobile sites/apps
¿Mobile first, Desktop first, Content first, o Target experience?Dependerá de cada caso.El foco en la experiencia objetivo y en el contenido.
?
http://www.lukew.com/ff/entry.asp?933http://artequalswork.com/posts/target-first.phphttp://adactio.com/journal/4523/http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/http://globalmoxie.com/blog/mobile-web-responsive-design.shtmlhttp://www.viget.com/inspire/is-responsive-design-a-good-fit-for-mobile/
VS Mobile sites/apps
Design for a Target Experience First. “Mobile First” is asarbitrary as designing “Desktop First”. [...]
“Target First” design approach sets a target experience toanchor our decisions of what should be added or subtracted,diminished or emphasized in each screen context.
”
http://artequalswork.com/posts/target-first.php
User Goals VS Business Goals
UsuariosContenido,experiencia...e Negocios
Ventas,conversión, ROI...e$:)
Equilibrio entre ofrecer la mejor experiencia al usuarioy cumplir los objetivos del negocio.
Ejemplo: Bookstores
SimpleIndependiente,nicho...
ComplejoMayorista,generalista...
VS
Ejemplo: NewsComplejo Grandes medios, generalistas.
Rediseñado para ser responsive.http://bostonglobe.comhttp://www.howinteractivedesign.com/inspiration/boston-globe-takes-news-into-responsive-design-era
The Boston Globe
¿Qué cambios requeriría para ser responsive (adaptación de contenido)?, ¿Es el planteamiento adecuado?.http://www.boston.com/bigpicture/
Big Picture (The Boston Globe)
Responsive
Ejemplo: NewsComplejo Grandes medios, generalistas.
Aquí nació el framework Django (Python).Web versión móvil básica (XHTML/CSS, no HTML5/CSS3/JavaScript), drásticamente simplificada.http://www2.ljworld.com/http://mobile.ljworld.com/
Lawrence Journal-World
App nativa iPad, 4x apps nativas smartphones, web version móvil http://mobile.nytimes.com, Times Reader 2.0 para Desktop, Chrome Web Store app http://www.nytimes.com/chrome/.http://www.nytimes.comhttp://www.nytimes.com/services/mobile/
The New York Times
Not Responsive
Ejemplo: NewsSimple Pequeños medios, nichos.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ (6 layouts in 5 breakpoints)http://elliotjaystocks.com/blog/css-transitions-media-querieshttp://css-tricks.com/css-media-querieshttp://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
Blogs sector web
Responsive
¡Discutamos!¿Escala para sitios complejos?
¿Se puede plantear a posteriori (retrofit)?
¿En qué punto deja de tener sentido adaptar contenido (HTML/CSS/JS, images, video...)en favor de una versión dedicada?
¿El planteamiento de responsive esacertado? ¿Y las tecnologías existentes sonsuficientes?
¿Qué estrategia usarás en tu próximo proyecto?
?
“Context is everything.”http://twitter.com/#!/jasonfried/status/29487253471
GRACIAS.@janogarcia + http://janogarcia.es