And we don’t confine their use to our consumer lives. As business travelers we flash our boarding pass at the ticket agent, then review proposals while waiting for that plane. For many of us, checking business email on our smartphone is the first thing we do in the morning … and the last thing we do at night.
As creative agency Babcock & Jenkins notes, “Mobile isn’t a device category, it’s a way of life.”
Nothing about this trend is slowing. As comScore data shows, the mobile user numbers are growing:
…and this Kleiner Perkins Caufield Byers graph (based on eMarketer data) breaks it out by average number of hours per user per device type:
So, are you meeting your buyers where they are … on mobile? Is it a good experience for them?
Prioritize mobile design
Old habits die hard. Traditionally, the design of web pages, landing pages (and email, too) has revolved around a desktop user’s experience and what tests well on that medium. Lots of us have gotten pretty good at this.
But for many of us now (and probably sooner or later for all of us) our mobile traffic is outgrowing our desktop traffic. We need to make our readers’ mobile experience with our sites fulfill (better yet, surpass) what they want and expect.
That means we have to change the way we design the online digital experience. We need to prioritize mobile design.
Responsive design and adaptive design
There are two recommended approaches that are used in designing web and landing pages for mobile consumption: responsive design and adaptive design.
Responsive design serves the same HTML code on the same URL regardless of the users’ device (desktop, tablet, mobile, whatever) or screen size. You create one fluid layout. The web page uses media queries to figure out the screen size of the device it will be shown on. Then it adjusts flexible images, fluid grids, site navigation, and the fluid layout to fit the screen and keep focus on the most important parts.
In adaptive design, you create multiple fixed layouts for a set number of multiple screen sizes based on a predefined set of viewport sizes and other characteristics. You could have, for example, one layout for certain mobile sizes; another for certain tablet sizes; and yet another for desktop/laptops.
Most people prefer responsive design, for various reasons. One reason: Screen sizes change often, and responsive design adapts to these changes without additional work – whereas you’d have to build new layouts in adaptive.
A third option is to design separate sites for desktop and mobile access. This isn’t a practical solution for most companies; first, it’s much more work to maintain two different sites. Second: it can negatively affect your SEO, as your backlinks could be spread over the two sites, making you less likely to rank. And finally, there is high risk of the sites getting out of sync.
Speaking of SEO … mobile matters a lot.
Danny Sullivan of SearchEngineLand gets credit for coining “Mobilegeddon” to describe Google’s April 21, 2015 implementation of a search algorithm to penalize websites that aren’t mobile friendly. It took a few months to results to show up (most algorithm changes produce gradual results) but show up they did.
There’s more: A majority of Google’s search traffic now comes from mobile, which means a lot of people are searching – and finding – on small screens. It’s important that they have a good user experience when they engage with your site, or you could lose them to the competitor who outsmarts you on the small screen.
Get started with mobile design
Your pages will need to satisfy a few basic requirements to be considered “mobile-friendly;” according to Google, these are the most important:
- Readable text (without tapping or zooming)
- Comfortably spaced tap targets (buttons or images you can tap a finger on to interact with the page)
- No “unplayable content” (certain types of videos, flash content, etc.)
- No horizontal scrolling required
Limited real estate means you need to trim the fat and keep your most effective and most important information front and center.
A few key points to remember:
- Make your call-to-action (CTA) clean and simple, and very clear and specific.
- Make your copy short and concise. Write in chunks that can move around in a responsive layout and still make sense.
- Segment! If you can specify the exact reader your page is for, you can be more specific with short copy.
Designers and scientists disagree on the optimum size (Apple, Microsoft, MIT Touch Lab study for tap targets; there’s no pat answer to “how large should I make my buttons?” But pick a size and test it.
People will not wait long for a page to load.
Remember that your mobile users are often multitasking or traveling. The more steps that are involved, the more reasons a user will have to say “I don’t have time for this.” Make sure you have the fewest fields possible in your forms. Check out this guide to Frictionless Forms.
Test, and test again
A/B testing is a method of comparing two versions of a web page against each other to determine which one performs better. You can test copy, color, placement, and layout; even adding or subtracting something as simple as exclamation points can make a difference in your conversions. On the smaller mobile screen, every detail counts.
Mobile friendly or mobile first? What’s the difference?
The whole idea of “mobile friendly” is generally to figure out how to make a good responsive web design that can function on a small screen when it has to. The rather elegant phrase “graceful degradation” refers to the practice of building a full-featured experience for an optimum screen size, then “account for each possible degradation and ensure that despite any shortcomings, the site would remain functional.” (Read the full discussion from a designer’s viewpoint on CodeMyViews.)
“Mobile first” turns that concept on its head. Here you start with a lean site comprised of essentials. It should look good and work well. Then you apply “progressive enhancement” to adapt your design to ever-larger devices. The hot creative starting energy goes into the mobile device, and the rest of it is a continuous build rather than a paring away. That changes everything.
As Beyond Nines (an agency serving nonprofits globally) puts it: “This subtle difference forces more discipline — and more cleverness — around how a website really functions on smartphones, and what website visitors want and expect in that context.”
Another quote from Babcock & Jenkins: “Instead of degrading a robust experience, a mobile first approach enhances a highly focused one … Mobile will be the assumption for marketing, not an extension.”
So, mobile friendly, or mobile first? What do you think? Let us know what your experience has been, in the Comments section.
Ready to implement responsive design in your emails and landing pages? Take a look at our free webinar: Responsive Design – 10 Do’s and Don’ts for Web Pages and Emails.