Adaptive design planning
Today, we can no longer design any site without considering carefully the many different devices and screensizes affecting layout and presentation. A good responsive design will allow the content to adapt to the viewport, be that a computer or TV, or mobile. While the specifics will depend on project and target group – a mobile first approach will deliver best results.

Andy Clarke
Bea Feitler, An Unstoppable Creative Force
Most fitting to our topic today is this design exploration - as shown on SmashingMagazine:
developer tools

My advice is to learn those keyboard shortcuts and make them part of your workflow :) Personally, I also like testing my designs in a few other tools - some lend themselves nicely to taking screenshots of the varying layouts for client presentations and the like.

- Responsively
- "Develop responsive web apps 5x faster!"
- by Manoj Vivek | PC / Mac/ Linux

- Responsinator
- "... quickly get an indication of how their responsive site will look on the most popular devices."
- by Tama Pugsley and Andy Hovey

- Am I responsive
- "A time saving exercise by @justinavery for RWD Weekly Newsletter"
- by Justin Avery
- Resizer
- "An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet."
- by Google
This is a beautiful example of how creative you can be with grids, now possible to implement in the browser via CSS grid. In this video, you'll not only learn a few more bits about grid but also how to use the dev tools to view it.

※ Eric Meyer on using <b> elements for styling parts of a Grid: Faux Grid Tracks
1. layout for small viewports / portrait orientation
/layout-01-phase1.png)
/layout-02-phase1.png)
/layout-03-phase1.png)
2. responsive layouts for larger viewports / landscape orientation
