Professional Documents
Culture Documents
@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
LA UBICUIDAD
VA A LLEGARRR!!!
Y ya est aqu!
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: 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.
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.
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
e
:)
$ e
Equilibrio entre ofrecer la mejor experiencia al usuario y cumplir los objetivos del negocio.
Ejemplo: Bookstores
Simple Independiente, nicho...
VS
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
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