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.

Ethan Marcotte - he started it ;P

read more: "Inspired Design Decisions" by Andy Clarke

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.

testing RWD: off/online tools

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.

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

question: how many breakpoints?

Welcome your new habit…

… endless resizing :)

Now that you've learnt about how websites should adapt to viewport sizes, you will learn a lot more by viewing sites at different sizes and aspect ratios. This will (and should :D) become quite a routine habit which will be fun - as well as frustrating at times.

How do you plan for your breakpoints?

Designing for different viewport sizes is a mental hurdle you'll have to overcome at the very start. Aim to think of your designs and layouts as fluid, as something that will change according to screens - and not pages, fixed within a specific browser or device.

No matter what your design, always begin by considering its content, establishing a clear structure and proceeding to markup your pages in a meaningful and semantic manner.

tips

always start with plain content
with your HTML in place, start the design with a focus colour and typesetting
start work on layout by viewing the small screensize, then working your way up to wider viewports
don't get stuck on fixed ideas of dimensions for layout changes - let the content flow guide your breakpoints
good starting rule is to use media queries with min-width - adjusting layout to ever-increasing widths to accommodate the medium-larger viewports (rather than starting with those and then scaling down)

How many breakpoints?

The following links are to pages of my studio's website. Have a look and resize the viewport to check on how many layout adjustments are in place across the different views.

As you view the pages, consider the following questions:

how many different layouts are displayed? resize the window and check on the number of changes presented across different screen widths.
what is the common variation in layout? an easy one: to recognise the most common approach to responsive layout from small to medium/larger screens.
are there any specific changes included? consider all content elements to see how screensize affects their presentation within layout.

watch video: Jen Simmons - CSS Grid like you are Jan Tschichold

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.

watch on YouTube | view demo

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

reading & resources

layout exercise: phases 1 + 2

implementing given layout

As we did not get to this last week - I've planned in plenty of time for us to work through the common layout techniques and discuss their uses. And even better, we'll do this together, mobile first and each given layout will use a specific layout method, giving you an example to refer back to later :)

The exercise

One of the reasons for this kind of task is to allow you to work from a static image to implement the design and layout as webpage. This is a typical interview/application task for web dev roles and is a useful practice run. For now, I'm not going to give you the links to the actual webpages (yet) - and we'll focus on working together bit by bit.

Once we're done, I'll update this page with links to the online demos so you can view the code :)

1. layout for small viewports / portrait orientation

2. responsive layouts for larger viewports / landscape orientation

layout methods