“Mobile” versus “Small Screen”
I got to be a guest on The Big Web Show a little while ago. It was a lot of fun — Dan and Jeffrey are great hosts. We talked about a lot of things, but one thing came up that I’ve been meaning to really sit and think about recently: The mis-use (or misconception) of “mobile” styles.
As we try to become more responsive with our designs, a lot of attention has been focused on providing “mobile” styles. We’ve all been adding viewport meta tags to our templates and @media screen and (max-width: 480px) to our stylesheets.
It’s very tempting (and scope-friendly) to tell a client that we can adjust their site for mobile users, when much of the time what we’re actually doing is simply adjusting a design for small screens.
A simple example of this is our own HTML5 Reset site. It has a very simple design; it’s only one page, but I’ve built in a few responsive elements that can help make my point.
In the video below, watch the image as I resize the window — first it will tuck into the column, then it will scale, then it will become full column at the smallest size.
These responses aren’t really about solving a user’s problem, they’re mainly aesthetic (except for the last transition — I don’t ever want the image to become too small to make out).
I’m making these changes for the benefit of small screen users — not mobile ones.
Media queries and the idea of viewport size and scaling are still relatively new concepts, and adding them to our toolbox has been a lot of fun. But I think a lot of us have been leaning on them as a crutch to provide simple answers to complex issues, namely: How do we (and how do we get our clients) to think about providing for the newly-significant audience of people using mobile devices?
An actual “mobile” site is a specific beast, one that needs to be tailored specifically to the tasks and users it serves. A mobile user isn’t just defined by their device, they’re also defined by their context; mobile users are out and about, they aren’t in front of their primary computer — they are literally mobile.
The gist of the argument is that legitimately mobile users have very different priorities than a desktop user; they require more focused experiences. I’m sure you know what I’m talking about (if not, you should start following @lukew right away).
Perhaps simply adjusting a design for a smaller screen and calling it “mobile” does a disservice to both mobile users and developers. Making link targets bigger and image sizes smaller does help the mobile user, but it only addresses the surface issues of usability and readability. It doesn’t address their need to do things easily and quickly.
The whole point of this post was to say two things:
1. A “small screen” user is not necessarily a mobile user.
2. A “small screen” device is not necessarily a mobile one.
But if your users have a legitimate need for a mobile experience, maybe media queries aren’t going to be enough.