Mobile-first design: the final frontier

We all know the saying “think outside the box.” It’s way overused, especially in the design industry, and one that I feel like most people have heard so many times they don’t even really think about it anymore. But I think it’s a really great way of looking at mobile-first design.

Constrictions, as we all know, often breed the most creative solutions. And what’s more constricting design-wise than all the many limitations of a website on a phone? You can’t think outside of the box if there’s no box to begin with, and mobile-first design literally presents that box — all 380 (give or take) px wide of it.

Losing My Mobile-First Virginity

I attempted mobile-first design this past week for my week 5 project at HackerYou (where I’m currently learning front-end web development in an immersive environment. I highly recommend it).

In the past, I’ve always designed desktop-first, focusing on ensuring the desktop version of a site is top-notch, beautiful, and easy to use. From there, (before I started learning development myself of course) I’ve often left it up to the developer to determine the best method to make the site work responsively, chiming in only if I had some very specific requests. This is a pretty conventional approach to web design.

After all, smart phones are still relative babies in the world of technology, and being able to do all the same day-to-day things on a phone that you can do on a computer is still a very new concept, and one that’s still not entirely widespread. Even though Google is penalizing websites for not being mobile-friendly there are still a lot of websites out there that are just really, really tiny versions of their desktop selves (which, technically, is responsive given they do get smaller, just not at all user friendly).

Therefore, taking a desktop-first approach is still a very conventional and expected way to design websites. But after wrestling with media queries for a few weeks and learning that reflowing desktop layouts in a way that both looks good and doesn’t require too much code is not as straightforward or easy at it seems like it should be, I’ve been questioning whether this approach is, in fact, the best one in today’s mobile-focused world. Especially since some layouts that look fantastic on a desktop can often seem, well, full of superfluous decoration when you distil them down to 380px wide.

Now, my design for this mobile-first test was relatively simple — the project was to design / develop an app that uses data pulled from a public API, and the focus was really on continuing our learning with Javascript — but I found it a really interesting and exciting departure from the way I normally design.

For the first time possibly ever, I actually really like the mobile version of something I’ve designed. Instead of wrestling with it as an afterthought, I started with it from the beginning, and developed from that starting point.

As a result, the user experience on mobile I can honestly say is pretty top notch (within my abilities as a junior developer of course). I found designing within the constrictions mobile presents from the get-go really got my brain circulating on the details that would be a nice touch on mobile — what would take it beyond just a simple “click a button, fill out a form, get what you came for” app, but that wouldn’t be pointless or annoying for the user to navigate through (as a lot of decoration can be when you distill it down to a phone).

Development-wise, I also found it a lot easier to develop upwards than downwards. Instead of wrangling flex box layouts out of their flexing, or unfloating floats, I simply added them in at appropriate breakpoints (which for this simple app, I settled on two).

This required a lot less code, and what felt like a lot less undoing of things I’d already done. And although the desktop design isn’t anything super innovative, I can see how it easily could be more so, if I wanted it that way (with what it’s intended to do, and who it’s intended to appeal to, it wouldn’t make much sense for this project, but for future ones I can see how easily I could build from the bottom up).

The most constricting version is just how I want it, and I have a lot more room to go back and play with the desktop if I so desire, without worrying about potentially fucking up the mobile version if I do so.

Less Crushing Agony, More Exciting Potential

When you design mobile-first, you’re starting with the most constricting layout. Which allows you to build up to the least constricting layout, instead of vice versa. Instead of feeling the crushing agony of removing all your favourite parts of a website design as you narrow it down to smaller and smaller screen sizes, cursing at yourself for making some innovative layout choices you now can’t for the life of you figure out how to reflow nicely to fit a stupid iPhone 4 screen, you can start with the stripped away version of the site, and build up to the creative, interesting, 27” iMac deluxe version.

Hopefully, this will help reduce the “homogeneity of the internet” that’s partly arisen from the conundrum of how to make an interesting layout reflow nicely and easily for every device size. And hopefully it will also make for more enjoyable, beautiful mobile experiences, as designers / developers spend more time on the mobile version by tackling it at the very start, instead of leaving it to the end.

In many ways, mobile is sort of the current “final frontier” design-wise. The expectations are still so low — half the time websites don’t even work on mobile, or are very frustrating to use. It’s still almost surprising when a website presents a great experience on mobile. It’s definitely surprising when a website presents an as good experience on mobile as on desktop. And it’s virtually unheard of (virtually, not entirely, though I can’t think of any examples off the top of my head) for a website to present a better experience on mobile than on desktop. [Note, I’m just talking websites here, not apps. There are many amazing designed apps out there, and I think that’s an area of design that is dedicated a lot more time to than mobile websites because for the most part they exist solely on a device, and not on a computer.]

Instead of just meeting these expectations at bare minimum (as in, working on a phone in the first place, not presenting weird glitches where you get trapped inside pop ups or can’t find buttons for things, having big enough text, etc.), I think mobile design should be approached by designers and developers as somewhere to turn their focus, to really invest in making the web experience on mobile beautiful, intuitive, and enjoyable to use. I’m not saying desktops should no longer be a focus, I’m saying mobile should be just as much of a focus from the start.

Would it be more work? Probably. But does that mean it’s not worth doing? In the ideal situation, it would allow for more innovative responsive solutions, more creative responsive solutions, more proactive and creative thinking about how things move responsively and how that can be manipulated and changed, and more exciting solutions for both mobile and desktop.

Designing from the most constrictive solution first also allows designers to better see what’s superfluous in design and content. When you can strip a design down at the very beginning, you can see what’s really necessary. And you can also make the decision, when you’ve designed to the barebones necessities, whether you want the desktop version to just be the barebones necessities as well, or whether you want to push that experience to be something new.

Because maybe that’s where desktop design should go. If the mobile version gets out the necessary information in the simplest way, while still being enjoyable to use and consume, maybe the next stage of desktop websites is to become a lot more boundary pushing, a lot more experimental, a lot more of an experience than just a way to consume information or do something. Maybe. It’s just a thought.

Regardless, when you’re focused on mobile-first, your primary focus is function and user experience above all else. Things have to work and they have to work well. They have to be easy, enjoyable, and relatively mindless to use.

On mobile, people generally want things quickly — they want the information they’re looking for, they want to be able to purchase what they want to buy, etc. Function comes first. The beauty added on is the piece de resistance, it’s what makes it special. But first and foremost, on mobile especially, a website has to function. (obviously websites have to function everywhere, but you know what I mean).

No one sits on their phone and says “gee, this site is really pretty, shame it doesn’t work and I can’t do what I actually want to be able to, but it’s okay because it looks nice.” They say, “fuck, this is really annoying,” get frustrated, and move on.

Mobile-first design is a place for designers to push into and create something new. It’s a place to set new standards, and experiment, and push both boundaries and knowledge of user experience and design and how creative you can get with so many restrictions and so much focus on function. It’s a great challenge, and one designers and developers alike should embrace.