The web as we currently know it (and therefore build it) has primarily been accessed from the desktop. Current trends indicate this is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users—will be mostly mobile.
As often happens in times of rapid change, we have no idea what all this really means. What we do know is that at the moment, the solution to our problem appears to be a mobile website (or possibly a responsive one).
But what exactly was the question, again? Is it that same question we asked last year? The one where the answer was to build a native app?
If so, maybe we should reconsider the problems we’re trying to solve.
My name is web design, and I have a problem#section2
They say that the first step to solving any problem is to accept that you have one. If that’s the case, our problem may just be that we still consider the mobile web a separate thing.
Not just separate from the existing web, but different enough that it can be easily quantified as a series of products, capabilities, form factors, or behaviors. This is appealing as it reduces the mobile web to a new “thing” you put on a list (of things to learn, vendors to hire, or budgets to secure).
The reality is, our transition to a primarily portable web will take time, and may involve a collection of sites, apps, and other platforms working in unison to serve our users in ways we can still barely describe. During this time of transition, it’s important to remember the relationship and trust built around our desktop sites.
Users are channel agnostic. They don’t care what site they access (or if they access one at all) they just want to get things done (even if some days “getting things done” actually means watching cats on YouTube).
Until a time when all content flows effortlessly from one context to another, users will continue to frequent whichever experience makes sense to them at that time.
- Some will prefer your desktop site as it offers familiarity.
- Others may not find what they need on your mobile site.
- Some may be redirected to the desktop as—ironically—the mobile site doesn’t work on their device.
- Others may access your desktop experience from a tablet-sized device, and choose to do so because (despite poor usability) it still “feels better” than a scaled-up mobile site.
- And many will simply dip in and out, accessing one site or the other depending on which device they have on hand, or which URL someone sends them in a tweet or an email.
The important thing to remember is that—for the foreseeable future—these behaviors are the new normal (except the bit about your mobile site not working on their phone — you need to do something about that).
So why not begin right now, by looking at your desktop site?
If you’re already in the midst of a mobile redesign, these tips will be useful, as they illustrate the many ways that designing for multiple screens, manipulation models, and capabilities should challenge your assumptions about the way you design for the web.
1. Lighten up#section4
Each kilobyte on your site should add value. Period.
And if this logic is good for small portable screens, there’s no reason it shouldn’t be good for larger ones (or any other context where users have to wait while things download).
Users assess value in many ways, so this doesn’t mean serving a lowest common denominator experience to all who visit. It merely reminds us that we can no longer presume to know how much time or bandwidth a user will have.
This realization comes at an inconvenient time given that our sites are now fatter than they’ve ever been. Since 2003, the top 1,000 websites have more than sextupled in size. And in 2011, the average website was a staggering 25% heavier than in 2010.
But page weight isn’t the only issue. Every graphic, style sheet or script causes an http request, reducing the speed at which your site loads. This includes http requests from handy third party services such as analytics, font hosting, ad services, and the many widgets, “Like” buttons, and assorted social objects we liberally sprinkle around our sites.
2. Let them choose#section5
Don’t prevent mobile users from accessing your desktop site.
If you offer a stand-alone mobile site, it’s perfectly acceptable to detect and redirect mobile users to that URL. Just don’t presume they will stay there. Unless you’ve managed to translate all desktop content, features, and functionality to smaller screens, your users will move from one site to the other—and if they don’t, consider that a sign that one of the sites may not be providing the value you (or they) expected.
When users choose to drift from one site to the other, make it simple for them. Ensure the path is discoverable, and where possible (this is important!) ensure the link to “desktop” or “mobile” doesn’t simply lead everyone back to the home page. If equivalent content doesn’t exist, consider providing a friendly and useful error page that includes suggestions for alternate content.
Remember that the paths users travel indicate the content they want to see. Your can use this data to inform your mobile strategy and ensure the most popular content is available to everyone.
3. Consider the journey#section6
Social media is one of the most common discovery mechanisms for web content. Studies suggest social networks now reach close to 70% of the worldwide internet population. In fact, up to 66% of Europeans log in to social networks every day. A large portion of this traffic comes from mobile. Twitter and Facebook already receive 30–50% of their traffic from portable devices.
Which leads to this all too common scenario:
A user (who happens to be using a mobile device) discovers an awesome product and posts a link to it on Facebook. In the ideal version of this scenario, the user’s friends click the link and access an appropriate product page—regardless of the browser or device they’re using. The product is awesome and some purchase it on-the-spot. Others click a handy “Share Me” link and forward the product to their friends.
Unicorns and ponies frolic. Marketers rejoice. All is well in the world.
This of course is pure fantasy. In reality, when people click that link, this is what happens:
- The mobile URL doesn’t redirect to an equivalent desktop URL, so desktop users are redirected to the desktop home page.
- Some mobile users are also redirected to the home page (because they’re using an “undesirable” browser).
- Some mobile users reach the intended product page (yeah!), but it renders poorly on their device. A small percentage of these users favorite the URL to view it later on their PC (hopefully that URL resolves gracefully once they get there).
- Some mobile users reach the product page, click “Share Me,” take the time to compose a message, but abandon the product when they find the “Share Me” form borked on their device.
- Other mobile users aren’t using a browser at all. They open the link in a web view within a native Facebook app. They reach the correct page but a product video begins to auto-play, crashing the Facebook app.
- Some mobile users reach the intended product page, click “Buy” but can’t get past the login authentication because it’s in a modal window that doesn’t load correctly on their phone.
- And so on.
These problems are common but are far from insurmountable. A bit of awareness, a bit of testing, and some refactoring are often all you need to significantly improve the experience for these users.
Bridge that gap#section7
And remember, sometimes the best solution (interim or otherwise) doesn’t involve the web at all. Some online travel sites have a discoverable “Call us” button for users who need that bit of extra help completing their transaction. The user can trigger the call right from the phone using an easy to recall reference number they can then relay to the agent. Once they complete the transaction, the site can send an email or SMS as confirmation.
Interactions that bridge the gap between online, offline, (and even in-store) transactions map well to the mobile consumer’s changing behaviors. A recent Comscore study of smartphone owners revealed 56% had made mobile purchases at home. Another 42% had purchased items on their devices while out, (at a variety of places including schools, and restaurants, or at work) while 36% had purchased items on their mobile while inside a physical store.
A customer that reviews a product on your mobile site today may do so again tomorrow on the desktop, then may bring their device with them to a physical store to compare prices. The final transaction point could be almost anywhere. Aligning all your experiences—be they online or offline—is therefore crucial. It’s not just about the “mobile web”; it’s about supporting the radical but exciting changes that are taking place in how consumers and businesses interact.
4. Don’t presume#section8
Mobile provides a great opportunity to challenge assumptions—in this case, about mobile itself.
Don’t presume your site works on mobile devices. Patterns designed for the relatively fixed and stable desktop environment can easily fall apart on devices where screen size, capabilities, and manipulation models vary. Each broken pattern creates an opportunity to annoy someone—or in the worst case, completely strand him or her mid-task.
In a recent study, 61% of users said they were unlikely to return to a website that they had trouble accessing on their phone. That’s an awful lot of missed opportunities and if you don’t take the time to test, you have no idea what problems your users may be facing.
Don’t presume everyone is using the best or latest device. Always check your analytics. In the UK, a typical site may receive 60% traffic from iOS, with the remaining 40% spread between 70 Android devices and half-a-dozen Blackberries. Also consider that the iOS traffic may include multiple versions of iOS, at least two different screen sizes, differing pixel densities, and greatly varying CPU power (Have you ever tried to run a CSS animation on an iPhone 3G?).
Don’t presume the latest device is the most powerful. Android devices are particularly deceptive. Smaller and cheaper ($60-$100) Android devices are gaining in popularity. Manufacturers differentiate each product by carefully balancing features and materials. One device may have an awesome qwerty keyboard, but a slower CPU. Another may have the latest version of Android, but a less responsive, lower-spec display. Unless you consider their implications, these device characteristics may define the experience far more than you do.
Don’t presume everyone will have a touch screen. While it’s clear we now live in a world full of screens, how we interact with them is still highly variable. Close to 30% of touch devices currently support an additional manipulation method (often a keyboard or trackball). And although many feature phones now sport a touch screen, the arrival of Smart TVs is set to unleash a whole new generation of indirect and proxied manipulation models.
A new group of devices is even emerging with no default display at all.
5. Mobile users don’t do that#section9
With the internet in their pockets, users are no longer compelled to use the web only when a computer and a broadband connection are available. Instead, studies indicate an emerging pattern of frequent, short bursts of web use throughout the day. The length of these sessions vary, and are often related to time of day, user intent, and screen size (tablets being most popular for longer sessions). These new and decidedly varied behaviors clash with the traditional “mobile user” persona—a person who is primarily on the go and would never think of engaging in complex tasks on their device.
For each person who surfs erratically on a smartphone while dodging shoppers at the mall, there is another surfing for three hours on the sofa while watching TV, or while stranded in an airport using Wi-Fi. A growing number of users are also choosing mobile as their primary internet access point.
It’s therefore not surprising that to mobile users, any web content is fair game—even if small screen usability is dreadful. While some users may bail when faced with poor usability, it’s important to remember that those who persist—spending 30 minutes painstakingly completing a travel insurance application on an iPhone—are the very people you want to keep happy. In spite of the pain, they’ve proven they truly want to engage with your brand.
6. Know your materials#section10
Buy some devices. Seriously. Do it now.
We regularly speak to agencies that feel they can plan, design, and build for this new environment based on extensive desktop testing coupled with a few tests on the boss’s iPhone, and an emulator.
There are plenty of reasons why this is unsustainable.
- Desktop browsers cannot help assess your site’s performance (or lack thereof) as they will almost always be more powerful than a mobile counterpart. They are also far more likely to be (auto-)updated so are more likely to reflect the latest features. Some mobile devices, including certain Android devices, cannot be updated at all.
- Modern emulators can get you closer than the desktop browser, as they provide a reasonable facsimile of common screen sizes, and (hopefully) offer the same browser (and browser versions) you will find on a device. They are however equally powerless to convey any hardware or performance related aspects of the experience.
- And lest we forget, most users will experience your content over an operator network. Testing a site on the desktop using (your super-fast) Wi-Fi network won’t reveal the real-life experiences users face with dodgy coffee-shop Wi-Fi, mobile network latency, or operator proxies and transcoders.
Besides—testing on an actual “held in your sweaty palm” device is awesome. Each time you test on a real device, with a real touch screen, real keys, and real user settings—you will learn something. Each thing you learn will help you design, plan, test, and budget more effectively the next time around. With frequent testing, you can also better determine which key browsers or devices are missing from your collection, thereby ensuring each new device purchase is money well spent.
Building a device collection obviously requires a budget, but with a bit of planning there’s lots you can do with even a modest sum. And although it may seem daunting at first, there are clear steps you can take.
I won’t lie and say buying devices is cheap. But they’re becoming a tool of the trade and a cost of doing business—just like that copy of Creative Suite or your Media Temple server.
7. Put content first#section11
In a world where each kilobyte must add value, each piece of content must surely do so as well. Wasting people’s time is no longer an option—users are but a click away from stuff made by someone else.
If it’s not blatantly obvious by now, what keeps the internet humming is content. While we’ve clearly moved past mere consumption, we still spend vast amounts of “online time” exchanging links to social objects such as books, articles, films—and of course, each other. Each day, more and more of these objects will have a presence (if not a permanent home) on the web.
In a post-PC world, it’s therefore hard to imagine a scenario where prioritizing content will not be the key to marketplace relevance. This will include:
- prioritizing content over chrome,
- removing unnecessary clutter and distraction,
- ensuring your content is widely accessible,
- ensuring links resolve gracefully regardless of platform, and
- delivering future-friendly markup that embraces whatever new context or container the world may throw at it.
It may also mean re-evaluating old assumptions about what makes content truly relevant—be it the look and feel, the editorial, the context, the structure, the metadata, or maybe the API.
The future may be unpredictable, but the opportunity is too big to pass up. Don’t get caught in the trap of “waiting for the big mobile redesign” to improve the way you engage with your audience on the web.
Creating a future-friendly online presence is not a line item in next year’s budget. It’s not about building a mobile site, or a responsive site. It’s about ensuring the relevance of your communications in an increasingly diverse and demanding environment.