eyelearn.org

applied art for the web

Adaptive design planning

colour

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