applied art for the web

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:

Left: Spread from Harper’s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Right: This design uses CSS Grid and Flexbox.
I change the layout across screen sizes while maintaining a consistent look and feel.

developer tools

screenshot of responsive view in Firefox

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.

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.

screenshot of responsive view in Firefox

watch on YouTube | view demo

※ Eric Meyer on using <b> elements for styling parts of a Grid: Faux Grid Tracks

1. layout for small viewports / portrait orientation

layout screenshot layout screenshot layout screenshot

2. responsive layouts for larger viewports / landscape orientation

layout screenshots