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?
Top comments (4)
It's also not just about viewport size in pixels, you may also need to take into account the viewport resolution. Let's say we've got two devices - one that has a 5" screen at 328 pixels per inch, and another that has a 24" screen at 72 pixels per inch. It's almost like you need to specify the minimum and maximum physical size of a given UI element. On a mobile device, I'd be curious to know how many people would be able to consistently hit a UI element that is smaller than, say, 5 mm x 5 mm. At the same time, on a much larger display, you may not need to have something displayed 3" wide if the user is using a keyboard and mouse, but maybe that 3" wide is totally fine if it's a touch screen kiosk.
I think there's a reason a lot of people get it wrong - because it's not easy!
Oh totally, I'm absolutely not judging anyone for "getting it wrong". I just think that the first step to getting it "right" is through more sensible terminology. :-)
This has been one of my biggest discussions with designers in the past couple of years. The mentality of designing on their screen size is a natural one and a difficult habit to break. I like your approach to not labelling device types but viewport sizes.
I recall reading another article discussing how designing sites now should be thought of as designing a container to fill liquid ("content") on a page. Sure it's easy to fill that space when the screen is large, but what about when you have a small space to fill and it not spilling it over the top 😉
Absolutely, and that's precisely where the biggest benefit of "starting where you have the most constraints" comes in handy.
I mean, you might know full well that the beautiful solid oak desk you want to buy will fit in your spare bedroom perfectly, but that information doesn't help you if you fail to realise that you can't fit it up the stairs.
And yeah, regarding it being a hard habit to break, it truly is. That's the very reason that I like to make noise about not referring to device types; even though people might say "everyone knows that when we say 'mobile' we mean 'small screens'" or whatever, but the word "mobile" has so much contextual baggage that it's easy to infer information that you just can't truly rely on when you use that word.