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.
2. DISCLAIMER
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.
13. Responsive: ¿Cómo?
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/
15. Pros y Cons
+
Una sóla base de código
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
16. Pros y Cons
+
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...
http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly
17. 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/
18. 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/
19. 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?933
http://artequalswork.com/posts/target-first.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-fit-for-mobile/
20. 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-first.php
21. User Goals VS Business Goals
e:)
Usuarios
Contenido,
experiencia... e
$
Negocios
Ventas,
conversión, ROI...
Equilibrio entre ofrecer la mejor experiencia al usuario
y cumplir los objetivos del negocio.
23. Ejemplo: News
Complejo Grandes medios, generalistas.
The Boston Globe
Rediseñado 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 requeriría para ser responsive (adaptación de contenido)?, ¿Es el planteamiento adecuado?.
http://www.boston.com/bigpicture/
Responsive
24. Ejemplo: News
Complejo Grandes medios, generalistas.
The New York Times
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.com
http://www.nytimes.com/services/mobile/
Lawrence Journal-World
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/
Not Responsive
25. Ejemplo: News
Simple Pequeños 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/finally-a-fluid-hicksdesign
Responsive
26. ¡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 es
acertado? ¿Y las tecnologías existentes son
suficientes?
¿Qué estrategia usarás en tu próximo proyecto?