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.

¶

The entire technology industry uses the word “user” to describe its customers. While it might be convenient, “users” is a rather passive and abstract word. No one wants to be thought of as a “user” (or “consumer” for that matter). I certainly don’t. And I wouldn’t consider my mom a “user” either, she’s my mom. The word “user” abstracts the actual individual. This may seem like a small and insignificant detail that doesn’t matter, but the vernacular and words we use here at Square set a very strong and subtle tone for everything we do. So let’s now part ways with our industry and rethink this.

Via John Gruber.

¶

For the big newspapers, fully half of their readership is electronic:

Substantial percentages of the regular readers of leading newspapers now read them digitally. Currently, 55% of regular New York Times readers say they read the paper mostly on a computer or mobile device, as do 48% of regular USA Today and 44% of Wall Street Journal readers.

¶

Brands that do not have a mobile site feed competitors clients, with half admitting they will buy from the company less often if the Web site isn’t mobile friendly. The study found consumers are five times more likely to abandon a task. Some 61% of users said they move on to another site if they don’t quickly find what they need, and 79% that don’t like the unfriendly mobile site go back and search for another. About 66% of consumers find mobile sites through a search engine.

¶

If I give up reading the promotional e-mail you sent me because I have to squint to make out what it says on my phone, that’s a problem.

If I abandon your website because I have to keep zooming in and out on my phone to navigate, that’s a problem.

But these aren’t my problems: they’re yours.

Every e-mail and web page you create must be optimized to work on whatever device your users happen to be using. That means you need copy and designs that are fully usable both on desktop computers and, without pinching and zooming, on mobile devices like iPhone or Android phones. Sure, modern phones can display just about any page you throw at them. But that’s not enough.

Below are some examples to visually demonstrate what I mean.

Send e-mails to people, not to their desktop computers

If you’re trying to reach me–or any customer–by e-mail, you had better be sure I can read it wherever I am. Don’t design it to work only on my desktop computer.

Here’s an example from Zipcar that I couldn’t read on my iPhone:

The font in this message is very small and hard to read, except for the “last chance” graphic and the “tick tock” headline.

So why doesn’t it work? Because this message has a fixed-width design, a mobile device like the iPhone will aim to fit the entire width of the document on the screen, scaling down images and text to fit. It’s formally functional on a mobile device in that it renders faithfully to the original, but that’s actually the problem. The original is designed for someone with 540px or more of available horizontal screen real estate, but iPhones and Androids are in practice far narrower (iPhones are, for practical purposes, 320px wide). An e-mail designed this way puts the design before effective communication.

Compare that message to this one:

In this case, we used a responsive, flexible-width design to ensure the message is legible on all devices. We also stripped out most images and formatting, so it even works nicely on older Blackberries, while in Outlook or Gmail it renders as a normal e-mail might.

Design web pages that work on any device

The same rule applies to web pages. Consider ESPN​.com, rendered in desktop format on an iPhone:

I know, right? It’s fully functional in the sense that it can be operated on an iPhone. But good luck finding what you want, clicking the right item, etc. There’s something about the Texas Rangers, but that’s about all I can read on the site.

To their credit, ESPN automatically sends mobile users to their mobile-optimized version, with text that’s legible, buttons intended for tapping with a finger rather than clicking with a mouse, and so forth:

Which version would you rather use on your phone?

Don’t ignore 12 percent of your customers

Mobile is something online marketers have to get right. Growing portions of web traffic–nearly 12 percent by one count, and certainly higher for some audiences–is driven by people using mobile browsers. You lose a lot when you send people messages they can’t use and promote sites they can’t read.

For a quick introduction to this topic, Smashing Magazine has a whole section on responsive web design, including this article on responsive e-mail templates. These articles on design patterns for mobile are also helpful.

What have you done to optimize your online marketing for mobile users? Tell me in the comments or at @nathanielward.