Game of phones

The growth of mobile traffic is one of the biggest trends impacting the digital marketplace, and while you need to ensure your website is optimized for phones, designers should consider a holistic multi-viewport experience in terms of the overall customer journey.

It’s hard to remember the days before the dawn of widespread mobile device adoption; today, everywhere you look, people are more often than not face-down in their smartphone, or at least have it within arm’s reach, ready to scroll and click at a moment’s notice. Yes it’s 2019, and in case you haven’t heard, tie-dye is making a comeback, Game of Thrones is over, plant-based meat substitutes have gone mainstream (looking at you, Impossible Whopper) and 81 percent of all Americans now own a smart phone — that’s up from just 35 percent in 2011, the year Game of Thrones premiered.

As a result of increasingly more of these magical devices being carried around in people’s pockets, mobile traffic officially surpassed desktop internet use for the first time back in 2016. And if that wasn’t enough to cement the growing importance of mobile search, earlier this year Google announced that mobile-first indexing would become the default for all new web domains as of July 1, 2019. That means when a new website is registered, Google now uses the mobile version of the site to index and rank pages, and deliver search results. Ergo, your website better be mobile-friendly if you want to appeal (or even appear) to users in today’s online market. It does not, however, mean you have to adopt a mobile-first design approach.

Mobile-first indexing is different than mobile-first design, and your site can be mobile-friendly without being mobile-first. Let me explain…

Mobile, The Mad King

See traditionally, most web designers have started projects by looking at the desktop viewport first, and then used a responsive layout to scale back design as the viewport becomes smaller. But as mobile search was growing, some designers started flipping that workflow around, designing specifically for the mobile device experience as the default, and then scaling upwards to meet the needs of desktop. Then, when Google first made a tweak to its algorithm to start favoring mobile-friendly sites in search in 2015, it ignited what’s known as “Mobilegeddon”; panic set in across the digital world, and designers everywhere started jumping on the mobile-first design bandwagon, assuming that prioritizing the mobile experience was the only way to satisfy Google and maintain rankings (spoiler alert: it isn’t). The idea of “mobile-first” design had been around for a few years already, but post-Mobilegeddon the pendulum swung to this hardcore perspective, and mobile-first became a pervading mantra in the design world.

But here’s the rub: desktops are still a thing. And what we’ve seen from those who take a mobile-first approach is that it tends to result in a “mobilification” of desktop (basically a spread-out version of the mobile interface), and the experience there suffers. Mobile-first essentially just reverses the problem that exists with many desktop-first designs: designers mainly focus on rearranging the layout to get all the content to fit a different screen size, but don’t make any adjustments to account for the different experience and usability, like altering the navigation (you don’t really need a hamburger menu on a desktop when there’s pleeenty of space for top nav).

Web design really requires a more nuanced approach than either desktop-first or mobile-first entail.

Thinking Outside the Box (err… screen…)

Mobile and desktop shouldn’t be at war with each other. It’s the user that sits on the throne in the digital fantasy world, and designers need to shift their thinking to consider a holistic multi-viewpoint experience in terms of the overall customer journey. Consumers regularly move between digital platforms and, essentially, each viewport should be optimized to deliver an exceptional experience within the context of the user’s scenario and their content needs. We call it “story-first” design.

Since people use the internet on a desktop computer, an iPad and a mobile phone at different times and for different activities, story-first design is meant to meet the user where they are, with their specific needs, in that moment. Our phones have become go-tos for idle moments, like waiting in line at the post office, as well as on-the-go info to help prepare for wherever they’re headed (think searches for “Atlanta airport wait times” or “kid-friendly restaurants nearby”). But there are other instances when a user might choose a desktop based on their search goals, and users might even switch devices mid-task; a customer might start researching a product using their phone, for example, but as they narrow down their search they might use a desktop later to dive deeper into product descriptions and view images. Depending on the type of purchase, they’re likely to wait to click that buy button via desktop from the comfort of home or the office.

That’s all to say that designers have to consider the goals of the user during different digital touchpoints, and the evolution of their content needs throughout the customer journey. Where you begin your design — mobile- or desktop- first — isn’t what matters. The ways you can enhance usability in the context of the platform and user needs is.

So how should you approach mobile-friendly design in 2019 (the right way)?

1. Understand your user.

We know consumer behaviors have changed with the power of a mobile phone in their pockets, but, as we’ve already explained, there are likely times when they turn to a desktop. To create digital experiences that best serve your user, you should start by looking at what their journey might look like and identifying the digital touchpoints within it. What actions might they take that would guide them to your site? What device (or devices) are they likely to use during different interactions? You can gain a lot of specific information from user research and from site analytics tools, and use that to better optimize the user experience to meet their needs across devices.  

2. Make it responsive — to the context.

Web design should be responsive, but not just in the sense of resizing content and adjusting layouts to fit different screen sizes. The design should be guided by the user’s needs within the context of their search needs. Remember to consider the customer journey — where they are, why they’re doing what they’re doing — and focus on enhancing the user experience rather than just making your design look good on a mobile device (e.g. if you’re a restaurant or other location-based service, you ought to make sure your address and a click-to-call phone number have prominent real estate on the mobile version).

3. Focus on functionality.

A mobile site should indeed offer the same range of functionality as its desktop equivalent (no stripping away features for the mobile device), but it’s okay if the layout or certain elements of the interface change across devices to make it more appropriate for the user’s needs. That might mean font sizes need to be altered so they’re large enough to read on a mobile device without zooming in. (That’s why responsive design isn’t just about shrinking a page to fit a new viewport, otherwise text might get reeeeal tiny.) You also want to make sure there’s enough space between touch elements — buttons, linked images, etc. — and that they’re not placed somewhere a user might inadvertently tap. Also known as “fat-finger design,” there are indeed best practices for mobile touch target sizes and minimum space between elements.

And by-the-by, this all applies to sites across every industry and sector, luxury included. Long believed to be the realm of only lower and middle-end brands and products, luxury has lagged behind in terms of leveraging digital channels, holding onto an assumption that luxury shoppers want a white-glove, VIP customer service only an in-person experience would provide. But statistics show otherwise. Luxury brands are actually outpacing the global market in e-commerce growth, and according to McKinsey & Co., mobile is playing an increasingly important role in luxury shoppers’ purchasing habits as well; more than half of luxury shoppers’ searches are mobile, relying on smartphones to research products while commuting, dining, or shopping.

So what can a brand do — luxury or otherwise? Optimize for mobile. Capitalize on the trend. But don’t do it at the expense of the desktop.

In other words: Be story-first.