Responsive Design Beyond Frameworks

Frameworks are the easy way out when doing responsive design. But what if you need more?

Transcript

1. Responsive Design Beyond Frameworks Marko Mrdjenovič @friedcell CTO @ CubeSensors
2. Me... • Marko Mrdjenovič aka. friedcell • UX-conscious web developer • Parsek, Zemanta, DeckReport • ...now CTO @ CubeSensors
4. Responsive Design
5. “Web design is responsive design, Responsive Web Design is web design, done right.” Andy Clarke, 2011 http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/
6. The idea Create one version of the site design, code & content that responds to the limitations of the environment it’s viewed in.
7. The idea Create one version of the site design, code & content that responds to the limitations of the environment it’s viewed in. NOT THE DEVICE!
8. Device != Context
9. Devices • Desktop computer • Laptop • Tablet (iPad & others) • Phone (iPhone, Android & others)
10. Contexts • In a bar while waiting for others • On a bus on your way to work • In a queue at a post office • At home on a couch • During lunch
11. Assumptions • Connection speed • Location • Focus • Input
12. Doing Responsive
13. Process • Goals • Content • Structure • Design • Development
14. Process • Goals • Content • Structure • Design • Development
15. Goals • Who are your users? • What are their needs? • How are you meeting the needs? • SMART goals
16. Process • Goals • Content • Structure • Design • Development
17. Content • What kinds of content do you need? • What is the tone of the content? • How will it be adapted to different sizes? • How is the content structured?
18. Process • Goals • Content • Structure • Design • Development
19. Structure • Importance of pieces of content / UI • Relationships between them
20. Structure outputs • Sketch • Wireframe • Prototype • Comp
21. Process • Goals • Content • Structure • Design • Development
22. Responsive System A system that defines the rules which govern the change of the layout with respect to the viewport.
23. Responsive System A system that defines the rules which govern the change of the layout with respect to the viewport. NOT THE DEVICE!
24. Breakpoint Matrix by James Melzer, eightshapes (http://jamesmelzer/responsive)
25. Breakpoints
26. Breakpoints •iMac: 2560×1440, 1920×1080 •MacBook Pro/Air: 1920×1200, 1680×1050, 1440×900, 1280×800... •iPad: 1024×768, 768×1024 •iPhone: 480x320, 320×480, 568x320...
27. WRONG!
28. Content! Look at the content and add breakpoints where it makes sense for content to break. Then fine-tune the sizes that are important in terms of visitors.
29. radionula.com
30. online.vinskivodic.si
31. Process • Goals • Content • Structure • Design • Development
32. Development • frameworks • @media rules • feature detection • fixed / fluid / elastic
33. Development • frameworks • @media rules • feature detection • fixed / fluid / elastic
34. Frameworks • Bootstrap • Foundation • GridSet • SUSY grid
35. Development • frameworks • @media rules • feature detection • fixed / fluid / elastic
36. @media rules body {font-size:100%;} @media screen and (max-width:600px) { body {font-size:87.5%;} }
37. @media rules body {font-size:87.5%;} @media screen and (min-width:600px) { body {font-size:100%;} }
38. @media rules body {font-size:87.5%;} @media screen and (min-width:600px) { body {font-size:100%;} } @media screen and (min-width:900px) { body {font-size:112.5%} }
39. @media rules body {font-size:87.5%;} @media screen and (min-width:900px) { body {font-size:112.5%} } @media screen and (min-width:600px) { body {font-size:100%;} } NEVER APPLIED
40. @media rules body {font-size:87.5%;} @media screen and (min-width:900px) { body {font-size:112.5%} } @media screen and (min-width:600px) and (max-width:899px) { body {font-size:100%;} }
41. @media rules body {font-size:87.5%;letter-spacing:1px;} @media screen and (min-width:900px) { body {font-size:112.5%;letter-spacing:0;} } @media screen and (min-width:600px) and (max-width:899px) { body {font-size:100%;letter-spacing:0;} }
42. @media rules @media screen and (min-device-pixel-ratio:1.5) { #logo { background-image:url(retina.png); /* 700px × 260px */ background-size: 350px 130px; } }
43. @media rules @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (-o-min-device-pixel-ratio: 3/2), screen and (min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx) { /* retina styles here */ }
44. Development • frameworks • @media rules • feature detection • fixed / fluid / elastic
45. Feature detection • Modernizr • DIY from Modernizr source • Often not needed because of CSS/HTML features
46. Development • frameworks • @media rules • feature detection • fixed / fluid / elastic
47. Fixed / fluid / elastic • Fixed is obsolete • Fluid is stuff you should use most • Elastic used for text-based UI
48. But... • Images have a fixed size? • Videos have a fixed size?
49. Use tricks <img src=”[img]” class=”respond” /> <style> .respond { width:100%; } </style>
50. Use tricks <img src=”[img]” class=”respond” /> <style> .respond { width:100%; max-width:200px; } </style>
51. Intrinsic ratios .wrapper { position: relative; height:0;padding-bottom:75%; } .element { position: absolute; top:0;left:0;width:100%;height:100%; } http://alistapart.com/article/creating-intrinsic-ratios-for-video
52. Other options • Use background images with background-size cover / contain • Use fixed sized images inside overflow:hidden responsive containers • ...
53. More • Responsive Web Design - Ethan Marcotte • Responsive Patterns • Responsive Web Design Weekly
54. RWD != 42
55. How to decide • Write down things users do on the desktop version & mobile version • Order them by priority • Compare • If fuzzy do m., otherwise responsive http://www.cennydd.co.uk/2013/the-gradient-chart
56. Even if you go m. build it responsive, not all phones have the same resolution.
57. "You've got to start with the customer experience and work back toward the technology, not the other way around." Steve Jobs, 1997
58. Thanks. Ping me @friedcell