Smallest-viewport first

nimmo

Nimmo

Posted on February 13, 2018

Smallest-viewport first

When it comes to designing/building (visual) user interfaces, the unique considerations actually being suggested by the terms "mobile" and "desktop" are:

  • Viewport size
  • Capabilities

Viewport size:

When we're designing or building any UI, we should start where we're most constrained.

If we start by designing for large viewports, chances are we'll run into problems when we try and shrink those down for smaller viewports. Sometimes we may get away with it, but usually we won't.

If we start the right way around, we'll always get away with it.

Capabilities:

Let's say we want to offer some functionality that takes advantage of a user's location. The natural thing that most people jump to is "oh! If they're *on mobile* then..."

But as soon as you do that, you're making an assumption about device type based on a capability (in this case, GPS) which any device could theoretically have, or not have.

No matter how many times we might think we can, we can not make assumptions based on device type. We can't assume a user's intentions, their restrictions, or even their viewport size.

Terms like "mobile" and "desktop" place importance on the wrong things. If a user's viewport is 320px, that doesn't mean they're on a phone at all. They might have four browser windows side-by-side, or they might have visual difficulties and need to have their screen at a super-low resolution. If we've used their viewport size to make a call about their device, and then we make further assumptions about their needs based on this, then we're going to end up causing problems for ourselves and our users.

It's difficult for people to not think about the screen that's directly in front of them first. But it's super beneficial to change that mindset.

It's so easy to get to a point where you've done a large-viewport mockup, and you go to "shrink it down" and find that it doesn't work anywhere near as well as you originally thought it should, or you find you've laid some data out in an entirely inappropriate format and you now have to develop something in a different way because you didn't plan ahead, or whatever. These are problems you just don't face when you do it properly.

Even worse is the situation where someone designs something for a large viewport, and hands it over to a developer and says "you deal with it for smaller viewports" - now we have different people designing the same part of a product for different viewport sizes.

This will not end well. Especially not if we have design-minded folk handing off to people (like me!) who have no design skills whatsoever.

TL;DR

Viewports and capabilities are important, device type is not. So maybe we can stop fooling ourselves into thinking that it is?

💖 💪 🙅 🚩
nimmo
Nimmo

Posted on February 13, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Smallest-viewport first
responsive Smallest-viewport first

February 13, 2018