Pixel Imperfect: A Practical Approach To Responsive Design

E195ae45320d9202eaa01c9f1d31a416?s=47 Michelle Schulp
February 04, 2017

Pixel Imperfect: A Practical Approach To Responsive Design

With seemingly endless new ways to browse the web, we know that responsive design is here to stay. But how do we adapt the traditional design process to flexible screen sizes, device-based restrictions, and multiple use-cases without feeling like we’re giving up all control to the great unknown? We’ll learn how to use our Problem Solving Superpowers to move away from creating endless mockups, and into crafting Design Systems. You’ll learn actionable methods to transform how you design for the web, and workable ways to present these designs to your team or your client.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

February 04, 2017
Tweet

Transcript

  1. 12.

    @marktimemedia From ATOMIC DESIGN “...the bidirectional and interactive nature of

    the web adds many more dimensions to what constitutes good design. Speed, screen size, environment, technological capabilities, form- factor, ergonomics, usability, accessibility, context, and user preferences must be considered if we want to create great work for this brave new digital world.”
  2. 36.

    @marktimemedia From ATOMIC DESIGN “Users perceive your brand as a

    singular entity and don’t care about your organizational structure, tech stack, or anything else that might cause disparities in the UI.”
  3. 63.

    @marktimemedia NEW HOTNESS • A List Apart: Container Queries http://alistapart.com/article/container-queries-once-more-

    unto-the-breach • CSS Round Queries https://drafts.csswg.org/css-round-display/
  4. 64.

    @marktimemedia DEEP THOUGHTS • How To Make Sense Of Any

    Mess http://abbytheia.com/makesense/ • The Web’s Grain http://www.frankchimero.com/writing/the-webs-grain/ • A List Apart: Language of Modular Design http://alistapart.com/article/language-of-modular-design • Ethan Marcotte: Pattern Patter https://ethanmarcotte.com/wrote/pattern-patter/ • AIGA Eye On Design http://eyeondesign.aiga.org/why-design-is-not-problem- solving-design-thinking-isnt-always-the-answer/
  5. 65.

    @marktimemedia PRACTICAL RESOURCES • Atomic Design http://atomicdesign.bradfrost.com/ • Style Guides

    http://styleguides.io/tools.html • Style Prototype http://sparkbox.github.io/style-prototype/ • “Ish” variable viewport tool http://bradfrost.com/demo/ish/ • HTML Elements http://zqsmm.qiniucdn.com/data/20110511083224/index.html