Defining Breakpoints

A presentation for Responsive Design & Development MiniConf in Ljubljana about responsive design breakpoints.

Transcript

1. Defining Breakpoints Marko Mrdjenovič (@friedcell), #mcrd
2. “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/
3. The idea Create one version of the site design, code & content that responds to the limitations of the environment it’s viewed in.
4. 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!
5. Device != Context
6. Device • Desktop computer • Laptop • Tablet (iPad & others) • Phone (iPhone, Android & others)
7. Context • 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
8. “How do they do it?”
9. Process • Goals • Content (Inventory) • Structure (Wireframe) • Design (Responsive System) • Development (@media, feature detection)
10. Responsive System A system that defines the rules which govern the change of the layout with respect to the viewport.
11. Responsive System A system that defines the rules which govern the change of the layout with respect to the viewport. NOT THE DEVICE!
12. Breakpoints
13. Resolutions •iMac: 2560×1440, 1920×1080 •MacBook Pro/Air: 1920×1200, 1680×1050, 1440×900, 1280×800, 1366×768 •iPad: 1024×768, 768×1024 •iPhone: 480x320, 320×480
14. WRONG!
15. 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.
16. radionula.com
17. online.vinskivodic.si
18. Techinques • @media screen and (min-width: 320px) • width in %, min-width, max-width • clear & float • font-size, line-height • column-count
19. Shady techinques • overflow • text-overflow • transform:scale
20. Shadiest techinque Device detection •not future proof •thus good ONLY for providing legacy version
21. RWD&D != 42
22. "You've got to start with the customer experience and work back toward the technology, not the other way around." Steve Jobs, 1997
23. Thanks. Ping me @friedcell