How to get your clients excited about mobile-first

As developers, we take great pride in our work. Our projects are well built and well designed. They're responsive. They win awards and please our clients. They're awesomely beautiful on cinema displays… but they're completely boring on your phone.

Why is it, that in nearly every award-winning desktop experience we've seen or built this year, there is a breakpoint at which everything goes from immersive, revolutionary and rad to static, stacked and boring? I'd like for us to step back and honestly evaluate the state of the multi-device web.

Open up Awwwards.com or theFWA.com on your desktop and browse the latest hot designs the web has to offer. You'll find site after site of beautifully done desktop experiences. Open the same URLs on your phone, and if you don't get a message like: 'Not formatted for your device' (the first one I tried), you'll get a fairly tall, single-column view of everything you saw at a desktop width, but with less ... experience.

In an industry where the term 'mobile-first' is ubiquitous, why are smaller devices still treated as second class? Mobile-first seems to be generally regarded as a positive thing in our industry, but when it comes time to start a project, why are we, our team and our clients so afraid of actually putting it into practice?

I sent out a survey to get a feel for people's hesitations about mobile-first. An overwhelming amount of responses implied an underlying belief that the decision to build mobile-first is primarily related to the amount of mobile traffic the client is currently receiving. "Less than 50 per cent mobile traffic? Desktop first." Stop. This logic is not sound.

Low mobile traffic is not necessarily indicative of low mobile interest. Is the current amount of traffic related to the nature of the content, or is it simply because the existing experience is hardly usable on a small screen? It could be either, but it's important not to overlook this distinction. There may be a large potential mobile user base just waiting to be tapped into.

Pitching for the future

The data shows where we've been, not where we want to go. Low usage today isn't necessarily indicative of low usage in the future. As former ice hockey pro Wayne Gretzky once said (and as Steve Jobs often quoted), "Skate to where the puck is going to be, not where it has been."

Say a sales lead comes in and you pitch your strategy to the client, whatever it may be. Three months later, you've won the project, and in another nine months, you deliver your beautiful new baby into the world. From your initial sales pitch (12 months ago), to the end of the lifetime of what you built (around three years) is a total of four years. Where is the puck going to be in four years' time? Will you still be glad you decided to budget time into supporting IE8 instead of pushing the mobile experience?

The implied assumption that designing for small screens first will somehow be detrimental to the desktop audience is simply false. By designing for small screens, your content and UI has the potential to become laser-focused, delivering your user exactly what they're looking for. There's no temptation to fill space with superfluous fluff when the space isn't there. 'Simple and focused' need not mean 'boring and limited'.

Creating an impact

"Small screens are limiting." I often hear this argument from designers who are accustomed to wowing clients with cinema-sized Photoshop comps. And it's true – small screens are less impactful in a client meeting. But this isn't a limitation of technology, it's a limitation of client meetings. The truth is that there are far more opportunities for groundbreaking experiences on mobile devices than there are on desktop.

"It's not the technology, it's the imagination," says designer and mobile maven Josh Clark. We have touchscreens! With cameras! Gyroscopes, accelerometers, geolocation! All connected to the internet, to other people, and untethered to any location. We've barely scratched the surface of what we could do on mobile. This is exciting! Instead of presenting cinema-sized static comps, put an interactive prototype in the hands of your client and watch the excitement spread.

Proof it works

There's nothing like using a well-crafted native app. The interactions are slick, everything is perfectly sized for your screen, and the content is focused and easy to get to. Why? Because it was designed specifically for the small touchscreen in your hand. Every interaction and piece of content has been carefully whittled down to its essence – in part, because there simply wasn't physical space to do otherwise. Your users love it.

Hold that thought. Now let's build a well-crafted desktop-only web app, assuming the same functionality as the native app described above. Because we built with the desktop experience in mind, our design assmues a wide, horizontal screen and things like a mouse cursor, and we have all the room in the world for navigation, content, headers, footers and asides. The site is beautiful and wins an award.

Now remove the '-only' suffix from the two (mobile/desktop) previous tasks. Assume that in both scenarios, we knew all along that we had to deliver experiences to mobile, desktop and everything in-between. Which starting point better positions you to move forward towards the best overall user experience? Do you wish more apps were like desktop websites, or that more desktop websites were like native apps? Which direction scales more easily?

With desktop-first, the initial design patterns that get wireframed, designed and approved assume a large screen, a wide aspect ratio, a mouse and a keyboard. This can result in patterns that simply don't translate well to a tiny touchscreen. Long select lists, large tables, mega-menus, hover states and content length suddenly become problematic.

We do our best to jam it all in there, but it often means burning endless hours on complex workarounds.

Elegance is sacrificed for the sake of time and budget. Nuance and intention are lost, and solutions have to be hurriedly shoved in place if they are to make it in before launch.

On the other hand, to translate a mobile-first design to tablet and desktop sizes, all you might need to do is adjust the layout with some CSS to fill the space. There is no 'squeezing' of content, design or interaction into a place where it doesn't fit, and no inherent need to change the markup when moving from smaller to bigger. There's plenty of breathing room. Additionally, you're starting with intensely focused content. You are in a better position to make informed decisions about whether or any additions or enhancements are necessary. The translation is smooth, and you get that 'app' feeling for free, because that's what you started with.

Now we've put our mobile-first fears to rest, it's time to bring some much needed life to mobile browsers everywhere. Beginning small just might be the key to making something truly big. I can't wait to see what we build.

Words: Dan Tello

Dan Tello is a Washington, D.C. area senior frontend developer at Viget. He can be found blogging here and pushing code at github.com/greypants. This article originally appeared in issue 262 of net magazine.

Liked this? Read these!

• How to start a blog
• How to build an app: try these great tutorials
• Brilliant Wordpress tutorial selection