Este documento discute el diseño responsivo y sus principios. El diseño responsivo crea sitios web que se adaptan a diferentes dispositivos mediante el uso de rejillas fluidas, medios fluidos y consultas de medios. Proporciona una única base de código para múltiples dispositivos en lugar de sitios web dedicados. Sin embargo, también puede tener desventajas como el rendimiento y la dependencia de JavaScript. El documento plantea que el enfoque correcto dependerá del proyecto específico y si el contenido puede adaptarse fácilmente o si se
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?