Defining 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