B2B Marketing Zone

Mobile Friendly? Or Mobile First?

Mobile Friendly? Or Mobile First?

Mobile Friendly? Or Mobile First?

Marketing that Matters is Mobile FirstSmartphones, tablets, and other mobile devices are ubiquitous. They help us order lunch, take photographs, get traffic directions, text a joke to our BFFs.

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:

Number of Global Mobile Users

…and this Kleiner Perkins Caufield Byers graph (based on eMarketer data) breaks it out by average number of hours per user per device type:

Average Hours on Mobile

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.

CircleS Studio Responsive

Circle S Studio shows how one responsive design adapts to four screen sizes

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.

non mobile vs mobile

As reported in a Wall Street Journal blog post by Alistair Barr, Stone Temple Consulting found significant changes, as shown in the chart above.

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.

Act-On SEO Mobile

Want to see how mobile-friendly one of your web pages is? Go to this Google developer page and fill in the URL of the page you’re interested in. This image shows the report on Act-On’s home page.

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

Simplicity

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.

Tap targets

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.

Page speed

People will not wait long for a page to load.

For a full list of page speed best practices, check out this handy guide by Moz. To test the performance of your own website, check out http://www.webpagetest.org/.

Simplify forms

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.


About

Sherry is the editor of Act-On's Marketing Action blog. She also writes and edits eBooks, white papers, case studies, and miscellanea. She is an award-winning creative writer.