Design

4 tips for your Mobilegeddon-inspired responsive redesign

4 min read
Aaron Stump
  •  Jun 1, 2015
Link copied to clipboard

As of April 21, Google searches from a mobile device are more likely to turn up relevant results that are also mobile-friendly results. The algorithm update dubbed Mobilegeddon doesn’t affect desktop searches, or even tablets, but it’s still a huge deal.

Has your website survived Mobilegeddon?

Of course, all websites should be mobile-friendlyTwitter Logo. In a perfect world. But in the real world, there are legacy builds, business requirements, and development timelines to deal with.

For the unprepared, Mobilegeddon’s a nightmare. But for the rest of us, it’s a real opportunity.

Making the most of Mobilegeddon

If your site (and product, for that matter) isn’t mobile-friendly, you’ve got 2 basic options:

  • Mobile retrofit: All some desktop sites need is a new viewport meta tag and a handful of new of CSS rules. While it’s not always that easy, a mobile retrofit can quickly (if only temporarily) make your brand mobile-friendly.
  • Mobile-first build: The more labor-intensive but lasting option is to redesign your site, starting with the mobile experience and working your way up to larger screens. This can be a bit daunting, but with the right data and solid planning, a mobile-friendly build can be closer (and more rewarding) than you might think.

Both approaches offer real benefits, but only your team can decide which is best—and best for right now.

But whichever you choose, you’ll want to do these 4 things.

1. Learn what Google means by “mobile-friendly”

A lot of features signal mobile-friendliness to Google, from viewport meta tags to touch features and device detection. While they won’t share the exact science, you can see what it thinks of your site with their Mobile-Friendly Test tool.

In more good news, Google determines mobile-friendliness on a page-by-page basisTwitter Logo. So check your analytics and start your retrofit/redesign with your heaviest-hitting pages. If the bulk of your search traffic hits your index or landing pages, optimize those first.

Since this is an update to their real-time algorithm, altered pages should be re-indexed quickly, in as little as a few days. Once Google decides that your destination page is mobile-friendly, it’ll get the gray “mobile-friendly” callout in search result pages and you should start seeing the reward in ranking that Google has claimed.

Google determines mobile-friendliness on a page-by-page basis. So check your analytics and start your retrofit/redesign with your heaviest-hitting pages.

2. Focus on your users’ experience

Of course, getting your content to load on a mobile device isn’t enough. Experience matters, so cramming too much stuff onto a small screen (with potentially limited bandwidth) can cost you.

People hate waiting. Which means that, on mobile devices, every second lost to loading shaves valuable users from your bottom lineTwitter Logo.

When you’re planning your responsive retrofit or redesign, pay close attention to your assets’ file sizes. Designing with a file-size constraint in mind not only speeds loading, but also shifts focus onto more important things: simplicity, clarity, and conversion.

On mobile devices, every second lost to loading shaves valuable users from your bottom line.

Aside from file size, make sure your site is easy to navigate and its text is easy to read. An uncomfortable or confused user isn’t a repeat user.

3. Understand what people want in a mobile site

Search queries and results vary from mobile to desktop by up to 60 percent. When making a mobile plan of attack, checking your keywords is a great way to see what your mobile users care about (you can view these in both Webmaster Tools and Google Analytics).

While a lot of people preach full feature parity, a quick build focused on “on the go” features can be a great place to start. If you can create a useful mobile experience with only a quarter of your desktop content and functionality, go for it! It’ll be much better than nothing.

Just don’t rest on your laurels. After all, it’s a multi-device world (opens PDF), with the majority of users frequently switching between devices, or using multiple devices simultaneously. And you can use your success with the limited mobile experience to inform a full-featured redesign.

4. Test your mobile experience

This may sound like a no-brainer, but before you launch your shiny new mobile flow, make sure to test it on a mobile device. While the numbers show that mobile devices are king, most of us still design and prototype in a desktop environment.

Emulators, inspectors, and artboard zoom levels all do a great job of making something feel mobile, but nothing beats actually experiencing mobile. You’d be surprised how often buttons and links turn out to be near-impossible targets on a mobile device. And that’s just one example of how things change across devices.

Of course, you don’t want to invest a ton of time coding up a mobile version of your site, just to find errors like that.

Enter InVision, which lets you easily prototype your mobile flows without a single line of code—and experience them right on your mobile device. Add a team armed with a random sampling of devices and varying experience levels and you’ve got some mighty heavy user testing ready to go.

The early results are in

Since announcing the change in February, Google has already seen a nearly 5 percent increase in mobile-friendly sites. With the change live, and desktop-only sites starting to feel the crunch, that number will only rise.

While no one’s sure how the change will affect desktop-only sites just yet, some are already wondering if Google’s suddenly privileging design over content.

Have you made changes to your product in anticipation of Mobilegeddon? Or are you a “perfect world” type, with a perfectly responsive site already a couple years old? What do you think about Google’s vote for a more mobile-friendly world?

Originally seen on Creative Bloq.

Collaborate in real time on a digital whiteboard