%

@janogarcia + http://janogarcia.es

RESPONSIVE
DISEO SENSIBLE
Feb 2012 @ The Mle

DISCLAIMER
No es una presentacin tcnica, no habr ejemplos de cdigo. El objetivo es discutir qu problema trata de resolver Responsive Design, qu principios sigue y qu herramientas ofrece, preguntndonos si stas se ajustarn a las necesidades de nuestros proyectos.

Qu?
SENSIBLE RESPONSIVO NERVIOSO QUE REACCIONA CON ENTUSIASMO

Por qu?
Optimized for 800x600

Web 1.0 = 1 dispositivo = 1 web

Diseo fijo o fludo.

LA UBICUIDAD
VA A LLEGARRR!!!

Y ya est aqu!

Web n.0 = n dispositivos = n web?

Diseo sensible? Mltiples resoluciones, densidades, capacidades...

Qu hacemos?
ESCENARIO COMPLEJO
Web n.0 = n dispositivos = n web? Mltiples dispositivos, resoluciones, densidades, capacidades, contextos...

Qu c*** hacemos?
SOLUCIN SENCILLA?
n web = dedicated (desktop, mobile, tablet, app...) 1 web = responsive

El santo grial?
ESCENARIO COMPLEJO + SOLUCIN SENCILLA = ?
Es posible? S - No - Depende. Es Responsive Desgin la respuesta? O dedicadas? O una combinacin?

Context is everything.
http://twitter.com/jasonfried/status/29487253471

Responsive: Cmo?
FLUID GRIDS + FLUID MEDIA + MEDIA QUERIES
% % % % % %

@media {}

Fundamentalmente CSS.

Responsive: Cmo?

http://www.abookapart.com/products/responsive-web-design

http://www.alistapart.com/articles/responsive-web-design/

Ethan Marcotte.

Responsive: Cmo?
Responsive Web Design: What It Is and How To Use It
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Responsive Web Design Techniques, Tools and Design Strategies

http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Responsive: Cmo?

http://www.slideshare.net/Martulina

http://themelee.org/

Y aqu tambin!

Pros y Cons

Una sla base de cdigo cost, time, code once/less, maintenance... Prioriza el contenido content first, mobile first, target experience... Soporte futuro nuevos dispositivos

http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly

Pros y Cons

Rendimiento (trfico, requests) bloated HTML/JS, oversized/hidden images... Dependencias JavaScript o Server side @media, images, video... Esfuerzo (frente a un nico layout fijo) development, testing...

http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly

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 especfico.

http://timkadlec.com/2011/03/responsive-web-design-and-mobile-context/ http://adactio.com/journal/4443/ http://jecroft.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

There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.

http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/

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//entry.asp?933 http://artequalswork.com/posts/target-rst.php http://adactio.com/journal/4523/ http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/ http://globalmoxie.com/blog/mobile-web-responsive-design.shtml http://www.viget.com/inspire/is-responsive-design-a-good-t-for-mobile/

VS Mobile sites/apps

Design for a Target Experience First. Mobile First is as arbitrary as designing Desktop First. [...] Target First design approach sets a target experience to anchor our decisions of what should be added or subtracted, diminished or emphasized in each screen context.

http://artequalswork.com/posts/target-rst.php

User Goals VS Business Goals

e
:)

Usuarios Contenido, experiencia...

$ e

Negocios Ventas, conversin, ROI...

Equilibrio entre ofrecer la mejor experiencia al usuario y cumplir los objetivos del negocio.

Ejemplo: Bookstores
Simple Independiente, nicho...

VS

Complejo Mayorista, generalista...

Ejemplo: News
Complejo Grandes medios, generalistas. The Boston Globe
Rediseado para ser responsive. http://bostonglobe.com http://www.howinteractivedesign.com/inspiration/boston-globe-takes-news-into-responsive-design-era

Big Picture (The Boston Globe)

Qu cambios requerira para ser responsive (adaptacin de contenido)?, Es el planteamiento adecuado?. http://www.boston.com/bigpicture/

Responsive

Ejemplo: News
Complejo Grandes medios, generalistas. The New York Times
App nativa iPad, 4x apps nativas smartphones, web version mvil http://mobile.nytimes.com, Times Reader 2.0 para Desktop, Chrome Web Store app http://www.nytimes.com/chrome/. http://www.nytimes.com http://www.nytimes.com/services/mobile/

Lawrence Journal-World
Aqu naci el framework Django (Python). Web versin mvil bsica (XHTML/CSS, no HTML5/CSS3/JavaScript), drsticamente simplicada. http://www2.ljworld.com/ http://mobile.ljworld.com/

Not Responsive

Ejemplo: News
Simple Pequeos medios, nichos. Blogs sector web
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ (6 layouts in 5 breakpoints) http://elliotjaystocks.com/blog/css-transitions-media-queries http://css-tricks.com/css-media-queries http://hicksdesign.co.uk/journal/nally-a-uid-hicksdesign

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 versin dedicada? El planteamiento de responsive es acertado? Y las tecnologas existentes son suficientes? Qu estrategia usars en tu prximo proyecto?

Context is everything.
http://twitter.com/#!/jasonfried/status/29487253471

GRACIAS.
@janogarcia + http://janogarcia.es