Small Space First Design

Mobile-first design (or small-screen-first to abstract away from implied context of mobile) is an idea initially presented by Luke Wroblewski ( he wrote the book) where one starts designing for the smallest screens first. It has lots of advantages and is pretty much how we do things at Funding Circle. 

We also do something akin to Jeremy Keith's Pattern Primers, but at the design level – thinking about how design elements can be re-used and should behave in different contexts, then documenting them in a pattern library. Sketch is great for this kind of huge canvas document.

When we design a new component for Funding Circle, we start small-screen-first, except that it's not necessarily a small screen we're designing for. At the component level the smallest version of an element could be used on any size screen, depending on the layout. 

As a result, I'm starting to think that what we're really doing is 'small space first' design. Just as 'small screen first' tries to remove the implied device context of the title 'mobile first', small-space-first is a little step to remove the implied context of screen size when designing responsive components or patterns.

An example

If we look at the Funding Circle loan calculator, we designed its smallest size first, then stretched out a basic prototype to see where it broke and designed that next breakpoint up (breakpoints here at a per-component level not whole screen). We continue like that as long as it makes sense to do so - a reasonably standard responsive design workflow, just a level down from the full page layout.

While we're designing these different sizes though, it doesn't make sense – at the component level – to think about breakpoints being linked to screen size. 

We might want to use the smallest version of a calculator component on both the full width of our smallest screen and a narrow column of our largest screen (see basic diagram).

This is all possibly splitting hairs, but I think it's a good idea sometimes to step back a little and see where we may be implying context that's not necessarily there.