Upload
alejandro-garcia-gutierrez
View
12.797
Download
2
Embed Size (px)
DESCRIPTION
El objetivo de la presentación no es explicar los detalles de cómo implementar Responsive Web 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.
Citation preview
%@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/
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: 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