Let It Flow: how to think about Responsive Web Design

When smartphones began to go mainstream in the early 2010s, responsive web design and mobile-friendly design was all the rage. These concepts are of course still very relevant today.

Unfortunately, there is a tendency, especially when using site builders, to design a “desktop version” of a website and a separate “mobile version”. This is suboptimal and clunky in several ways:

• Each new design element has to be designed twice. Often, one version gets neglected and we end up with certain options only being visible in one view or another

• The mobile/desktop dichotomy ignores the fact that there are multiple screen sizes in between just “desktop” and “mobile”, which actually appear in practice (eg. when resizing a window or using a different sized phone or tablet)

• In the worst implementations, one has to refresh the entire page after resizing the window/screen for it to render properly

A much better way is to think not in terms of screen sizes but in terms of flow. The simplest example is text that wraps automatically when it hits the edge of a page, regardless of screen size. Responsive web design is about allowing the same for other elements: defining how they grow, shrink, overlap, disappear, or even shift to a different spot as the space available to them changes.

In this talk, I will begin with the example of PDF vs. ePub as a way to think about flow. I will then briefly explain how stylesheets like CSS ones work (with a focus on the general concepts, not the details of the code). Having set this introduction, I will go on to explain my approach when laying out elements on a webapp or web page. Including: a web page that renders nicely on KaiOS feature phones!

Limitations: I am a web developer, not a designer. The mental framework introduced in this talk will help web developers to create a default layout that “just works”, but it will not match something that has been worked on by an actual designer. My hope is that this talk will also help designers understand the natural flow of web pages so they can “work with the grain”, so to speak, when designing for this medium. Whether that actually happens, only time will tell

• Just having a “mobile version” and “desktop version” of your site is not responsive design

• Web pages “naturally” wrap and flow by default. Observing this flow helps to make your website responsive with minimal intervention

• Good responsive design helps to minimise duplicate elements, simplifying debugging and helping to make the website more accessible (eg. for screen readers)

• Responsive design is a continuous process. Keep resizing your browser window every time you make a change to see how it reacts!

• The best breakpoints are device agnostic: when your design starts to look odd, that’s the breakpoint