Responsive Web Design

Responsive web design talk @ Globant - Bs As - 2013

Transcript

1. RESPONSIVE WEB DESIGN DEC 2013
2. What is RWD? Why RWD? Image courtesy of Double-M What is RWD? Why RWD? Globant Proprietary | Confidential Information
3. RWD is about strategy! The art of war, Sun Tzu “To be prepared BEFOREHAND for any contingency is the greatest of virtues” Image courtesy of Double-M Globant Proprietary | Confidential Information
4. RWD is about strategy! • Have an all resolutions draft at hand • Be aware of measurements • Make sure you know the resolution of the comp (72ppi) • Don't over think! Let a part of it flow. Globant Proprietary | Confidential Information
5. How to implement RWS? Fluid grid Flexible/responsive Images Media Queries Globant Proprietary | Confidential Information Image courtesy of cuttlefish Code example courtesy of Chris Coier
6. Fluid grid How to implement RWD?| Fluid Grid “Be like water my friend” “If you pour water in a cup it BECOMES the cup. When you pour water in a bottle it BECOMES the bottle.” Globant Proprietary | Confidential Information
7. Fluid grid How to implement RWD?| Fluid Grid Globant Proprietary | Confidential Information target context result =
8. Fluid grid How to implement RWD?| Fluid Grid Globant Proprietary | Confidential Information
9. Fluid grid How to implement RWD?| Fluid Grid Globant Proprietary | Confidential Information
10. Fluid grid How to implement RWD?| Fluid Grid Globant Proprietary | Confidential Information
11. Fluid grid How to implement RWD?| Fluid Grid Globant Proprietary | Confidential Information
12. Flexible / responsive images How to implement RWD?| Flexible / responsive images Globant Proprietary | Confidential Information • Centered on max-width • Proposed new mark up • Server-side solutions • JavaScript solutions
13. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information • Sketch by Håkon Wium Lie in 1994 • W3C started work on Media Queries in 2000 • First public working draft published in 2001 • Became a W3C Recommendation in 2012
14. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information Yes, they took 20 efng years...
15. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information Good news is... Supported by all A-grade browsers Image courtesy of Paul Irish
16. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information Bad news is...
17. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information media_query_list : S* [media_query [ ',' S* media_query ]* ]? ; media_query : [ONLY | NOT]? S* media_type S* [ AND S* expression ]* | expression [ AND S* expression ]* ; media_type : IDENT ; expression : '(' S* media_feature S* [ ':' S* expr ]? ')' S* ; media_feature : IDENT ;
18. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information Nah, kidding!
19. Media queries How to implement RWD?| Media queries Globant Proprietary | Confidential Information @media (min-width:320px) { /* smartphones, iPhone */ } @media (min-width:481px) { /* (Nook/Kindle), tablets */ } @media (min-width:641px) { /* portrait tablets */ } @media (min-width:961px) { /* tablet */ } @media (min-width:1025px) { /* laptops */ } @media (min-width:1281px) { /* hi-res laptops*/ } They look like these
20. Other related approaches Mobile First Audience and Device Aware (ADA) Progressive enhancement Globant Proprietary | Confidential Information
21. Other related approaches Mobile First Audience and Device Aware (ADA) Progressive enhancement Globant Proprietary | Confidential Information
22. Other related approaches Mobile First Audience and Device Aware (ADA) Progressive enhancement Globant Proprietary | Confidential Information
23. Other related approaches Mobile First Audience and Device Aware (ADA) Progressive enhancement Globant Proprietary | Confidential Information
24. Q&A
25. Thank You By yours truly Thank You @geronimogarcia DarkThrone geronimo.garcia@globant.com