What does "mobile-first" design mean, and why do I want it?
If you're in the process of designing or redesigning your company's website, you've almost certainly come across the current buzz-word in the web-design world: "mobile-first". You may have been advised that you want it, or that it will cost more, or that it's only for hip websites patronized by millenials. But what does mobile-first mean, and why do you want it?
Mobile-first in its simplest sense means that a website has been designed from the start to appear and function perfectly on mobile devices with smaller screens and limited, or different, input and interaction methods. Most of these devices have touch screens instead of mice, and they lack the screen real estate of the average desktop. They also (usually) don't have the bandwidth available to quickly download the large amounts of data that make up videos and large, flashy graphics. The clear trend in device usage and ownership shows us that the pace at which people (your customers) are ditching desktops for mobile devices is rapid, and you want them to be able to use your site.
Mobile-first websites look great and function well on all devices.
So yes, you want a mobile-first design for your site that includes the obvious elements like intuitive and mobile-usable navigation, simple, uncluttered pages that display your brand in a flattering way on the smallest of screens, and lightweight, fast-loading pages that are free of data-hogging graphic bloat. Most good web shops are following these simple guidelines both in the advice they offer their clients and in the websites they produce for them.
There's more to it, though. If your site has any functionality (your consumers are actually trying to buy/schedule/communicate/interact) and is not simply a collection of pages to read, there are important technology considerations that need to be understood at the earliest stages of the design phase, and this technical knowledge is what separates good designers from great designers.
Let's say you're redesigning the website for your vacation rental business. You've got a great new brand package: it's clean, lightweight, and looks great on an iPhone. You got rid of the giant header image that took three minutes to load on 3G, and you've trimmed all of the not-really-valuable pages in order to reduce the complexity of the navigation. Your site is mobile-first, right? Probably not.
Why do consumers come to your site? Probably to do something: book accomodations, check reservation status, check prices. And they might want to do that when they're taking a breather from mountain biking in a remote area with a very bad data connection; they have a specific task they want to accomplish, and they have a very slow network connection to your site. You can't fix their bandwidth issue, but you can anticipate it and design your site so that it functions as well as it possibly can in the worst scenarios.
Fig. 1: The right way.
Fig. 2: The wrong way.
The virtues of designing for mobile devices first are not diminished when your consumer is on a laptop or desktop. Light, clean design and clear, responsive task flows make users happy on any device. As a business owner, you want your website to embody these design qualities because you want your consumers to be happy with your brand.
A thoughtfully-designed mobile-first website is one that essentially behaves like a native app* and is tenaciously focused on discovering, then providing what its consumers want. Until recently, it wasn't possible to create one website that functions and appears essentially the same on any platform; now, it's not only possible -- it's expected and essential. At cascade web//development, we have the experience and technical expertise to guide you through the process of designing and building the most effective web presence possible, from strategy to completion.
*Stay tuned for our upcoming blog post on this subject, and on the web browser's evolution into a mini operating system. Exciting stuff!