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