Download pdf - Responsive Web Design - Diseño Sensible by @janogarcia

%@janogarcia + http://janogarcia.es

RESPONSIVEDISEO SENSIBLEFeb 2012 @ The Mle

DISCLAIMERNo 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 webDiseo fijo o fludo.

LA UBICUIDADVA A LLEGARRR!!!

Y ya est aqu!

Web n.0 = n dispositivos = n web?Diseo sensible? Mltiples resoluciones, densidades, capacidades...

Qu hacemos?ESCENARIO COMPLEJOWeb 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 Ithttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Responsive Web Design Techniques, Tools and Design Strategieshttp://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/


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/


?

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/


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: BookstoresSimple Independiente, nicho...

VS

Complejo Mayorista, generalista...

Ejemplo: NewsComplejo Grandes medios, generalistas. The Boston GlobeRediseado 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: NewsComplejo Grandes medios, generalistas. The New York TimesApp 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-WorldAqu 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: NewsSimple Pequeos medios, nichos. Blogs sector webhttp://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