course notes 2019/20

Responsive Design Planning

Nov 13th 2019

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

ethan marcotte

It is now some years ago that the wonderful Ethan Marcotte coined the term “responsive web design“, or RWD, via his article on A List Apart in 2010. Though there have been great developments with more tools and debates in different approaches – this article is still the perfect introduction to the topic :)

rwd demo

→ read ‘Responsive Web Design’ | → view final demo

The subject continues to be studied, debated and new methods and practices are emerging and continue to evolve.

Andy Clarke

Inspired Design Decisions, article series by Andy Clarke

Andy is one of these wonderful talents: a designer who loves code. He’s been around for years doing amazing work. He promoted web standards when we still needed to, has written some brilliant books, gives passionate talks and workshops to advocate design and I can only highly recommend that you to follow his work.

Recently, Andy started a series of 12 articles, published on SmashingMagazine, called Inspired Design Decisions. Using brilliant print designs as inspiration, he shows us how to let the underlying principles guide web page layout and typesetting, including code examples. — so much to learn! :)

Brad Frost

bradfrost
photo: © Anna Lee-Fields, 2013, for Creative Mornings Pittsburgh

There are many web designers and developers who discuss mobile in depth – Brad Frost is someone who you should definitely follow. Brad disucsses a lot of responsive design aspects, curating resources and giving us such wonderful tools like: ish, a viewport resizer with extras, like the crazy ‘disco’ mode :-)

references

Jen Simmons

layoutland

Last week we saw an inspired solution to a custom layout, I hope you enjoyed it — of course, I’d highly recommend that you follow Jen Simmons and her work as well. In her role as Designer Advocate at Mozilla she is publishing excellent articles and videos, at the time of writing primarily focusing on new techniques like grid. I’m sure she will not only teach but inspire you :)

Make sure to have a look at Jen’s YouTube Channel, Layout Land – short and to-the-point videos looking at design and implementation of grids.

CSS Grid like you are Jan Tschichold

Tschichold inspired ayouts by Jen Simmons

→ watch on YouTube | → view demo

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

Layout task, phase 2

Let’s complete last week’s layout design samples by making them responsive, we’ll need to reshuffle some rules and add new via fitting media queries.

Download the updated files – with phase 1 layout in place.
↓ download files

practice makes perfect :)

extra exercise

fountain pen

Considering this is one typical interview/application task to test your skills – and that it is true that only practice makes perfect :) – here’s another little exercise for you. Working mobile first, implement the design as given.
↓ download source files

Quick tip: Focus on all details of the smallest layout first, and ensure a complete design implementation before moving onto styling the larger screens. Going back and forth between the different views can cost a lot of time…

Comments are closed.