In case you didn’t know, Google likes mobile. I mean, they REALLY like mobile—so much so that they’re prioritizing mobile friendly websites to appear higher up on search engine results pages. Announced in late 2016, this mobile-first indexing will literally rank a website according to how it performs on mobile devices, essentially throwing the desktop experience by the wayside. But is this shocking? No, not really. Here are two reasons why:

  • For the first time ever, more than 50% of internet users are using mobile devices—making desktop users a minority. Mobile usage will continue to climb in the next few years.
  • Secondly, Google is placing a heavier emphasis on the user experience (UX) in 2017. They want to reward sites that provide a sleeker, more responsive design.

It’s essentially cause and effect. Google noticed that the majority of internet users were browsing sites on the mobile platform, and so they want to make sure that these mobile sites are responsive. Thus, the mobile first indexing struggle will be won through improved web design and development strategies.

Miraculously, only 30% of small businesses have mobile-friendly websites. With the new ranking changes, this will undoubtedly affect many brands’ bottom lines. Don’t become one of them. Here’s what you and your team can do to be successful.

Visibility Across Devices

You have a long-form blog post that has a killer infographic which is being shared around the internet like crazy—but just for desktop users. People visiting your website on their iPhone are out of luck, because your infographic isn’t showing up on mobile. Or it might be partially there, but it’s getting cut off by the smaller screen size and not being shared. As you can imagine, this is a HUGE problem. If 51% of visitors can’t see your wonderful content in its entirety, you’re giving them a terrible user experience—and taking a hit to your ROI too.

Whenever you’re developing content, whether it’s a video, infographic, chart, or simple text blog post, check that it’s visible and fits on mobile screens before going to publish.

Even minor differences in screen sizes can force some pieces of content to be withheld from view. And if you’re using video? Well, make sure it isn’t powered by Flash. Since iPhones don’t support Flash, you’re losing out on a massive swath of potential viewers.

Previewing how your content will appear on mobile and other devices has never been simpler. Luckily, most website building platforms—like WordPress—provide an option for viewing your content in the way it would appear on a phone or tablet.

wordpress mobile view.jpg

wordpress tablet view.jpg

It’s always best to consult a web developer before making serious changes, but at least WordPress gives you a nice visual representation of how your site looks in its current form. This is also a recommended step when demoing a new theme in WordPress. It’s important that you choose one that has a responsive design, and will be mobile-friendly.

Responsiveness

Responsive web design is often confused with mobile-friendly design. But while mobile-friendly designs tend to be responsive, they don’t take into account other devices. A responsive web design, by definition, is “a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device.” In other words, responsive designs make a website look and act great across all devices from which a user is viewing it—not just limited mobile.

Let’s explain what we mean by “look great” when describing responsive designs.

  • Easy to Navigate

A better user experience starts with navigation. Simply put, can visitors get around your site easily on their phones? If you’re unsure, ask a friend to try and navigate your site from their phone. Or for a more objective analysis, ask someone on the street. The bottom line is, if any text is hard to read, or if the natural page-to-page progression on your site is unclear, users will bounce like there’s no tomorrow.

Navigation factors to consider are things like formatting of text, distinct navigation bars, and clear calls-to-action. Can customers recognize how to go from your home page to the purchase page easily? It always helps to think about how your conversion rate could be affected by your navigation setup.

Here’s what a responsive mobile site looks like from a navigational standpoint.

2-mlhu-example_large_mini.jpg

A clean navigation menu is everything. It’s about clarity over complexity when it comes to mobile-friendliness, and it starts with making your buttons and links clear to visitors.

  • Fitting The Screen Size

Perhaps the best way to think about web design responsiveness is not in terms of mobile vs. desktop, but in terms of screen size differences.

Here’s a look at ESPN.com in full screen view:

ESPN screen size full.jpg

And with a minimized window:

ESPN screen size condensed.jpg

These screencaps were both taken on a desktop device, but with different sized windows. Notice what happens on the smaller one? Thanks to a responsive design, the top navigation bar becomes condensed like it would on a mobile device. And while the images and text shrink to fit the screen size, they still manage to maintain their proportions.

This is why it’s a mistake to aim just for “mobile-friendliness” and not account for the dozens of other screen sizes on which your content will be viewed. Responsiveness encapsulates the whole lot.

  • Ad Placement

Consider this a “what not to do” regarding ad placement on your mobile sites. If you’re using AdSense to monetize your website, that’s fine, just be careful when placing ads above-the-fold on mobile. In case you don’t know, above-the-fold refers to the upper portion of your site which appears when a user lands on a page. Apparently, Google is hitting publishers with policy violations for posting AdSense content above-the-fold that measures 300×250 in size.

Slide082.jpg

Not only could you get your AdSense account suspended, but it would undoubtedly affect your mobile rankings. With mobile first indexing, it’s simply not worth the risk.

Page Speed

Nothing acts as a buzzkill to your user experience quite like bad load times. Slow loading websites can single-handedly destroy your ROI, especially as newer generations of users expect results fast. 47% of consumers expect a page to load in 2 seconds or less, while a 1 second delay in page response can result in a 7% loss in conversions. Load speeds are even more important when we’re talking about mobile users, many of whom are on their way to the office or running to catch a train. Getting their content delivered quickly matters.

  • Reduce Redirects

Redirects are sometimes necessary especially when repairing broken links (404s). But keep in mind that each time you add an HTTP request, there will be a potential drop in your site speed—an increased load time. And having a responsive website means that there’s probably a few redirects in place to bring mobile users from your main site to the more responsive version. Thankfully, there’s an easy way to fix this:

Just use an HTTP request to send mobile users directly to your mobile URL without needing intermediate redirects, and include the following markup – <link rel=”alternate”> within your desktop version of the pages. This will identify the mobile version of your URL which makes it discoverable to Google, but it won’t cause you to sacrifice load times.

rel-alternate-hreflang-x.png

  • Above-the-fold Content

Above-the-fold content refers to the upper portion of a web page that a person sees when they initially visit your site—before scrolling down. This is a huge factor when determining user experience because if your most important content isn’t apparent when a user first lands on your page, they’ll bounce.

The reason why we’re including this underneath the ‘page speed’ section is because you should prioritize your above the fold content when optimizing your page. In other words, make sure the upper-placed content loads faster than lower-placed items on your page.

In their Mobile Analysis in PageSpeed Insights, Google has preached that sites should aim for a 1 second MAXIMUM load time for above-the-fold content on mobile. If the content takes longer than 1 second to load, this constitutes a bad user experience.

  • Mobile Optimization Plugins

For those WordPress users among us (or roughly 25% of all internet publishers), there’s a plugin available for any situation—or so it seems. Mobile optimization is no different.

Here are a few that combine mobile SEO best practices with responsive design:

  1. WPTouch Mobile Plugin – it’s one of the oldest WordPress plugins for mobile, but it’s still used regularly by many publishers. Why? Because it upholds the mobile design guidelines established by Google. The pro version costs $88 per year for a single site license, but this includes the ability to add premium themes to your site—especially great for blogs, WooCommerce-enable ecommerce stores, and services businesses.
  2. Jetpack – A rising star among optimization plugins in general, Jetpack provides some great options for mobile users. Mostly the ability to secure your site without hindering load times, as well as an adherence to SEO best practices.
  3. WordPress Mobile Pack – It’s all in the name for this plug-in. The WordPress Mobile Pack explicitly touts “cross-platform” mobile functionality in it’s banner image:

WordPress-Mobile-Pack.jpg

WordPress Mobile Pack is all about targeting different mobile devices, allowing you to sync different pages, posts, and comments according to the target device. If you choose to upgrade to the premium version, you’ll be able to integrate it with Google Analytics as well as certain ad networks.

The common thread among all of these plugins? They will improve your user’s mobile experience. If you can’t afford a top-notch developer, these tools provide a great way for you to get optimized.

  • Image Compression

Compressing your images means there’s less content for your pages to load, plus it allows you to resize them so that they can fit neatly onto your mobile site.

One of the best image compression tools around is Kraken.io—which does an amazing job of reducing your image sizes by over 90%, while not sacrificing their quality. Pricing for the software ranges from as little as $5 per month all the way to $79 per month, depending on how many GBs need reducing.

Sure there are other tools out there that can perform a similarly good job, but Kraken seems to be one of the easiest, and relatively cheapest to use.

Content

Let’s talk briefly about written content, mainly with regards to formatting. You have to remember that reading text on a small screen is a chore no matter how you cut it. To make things a little less difficult for your readers, here are a few best practices to consider.

  • No More Than 300 Words Per Paragraph

If you read anything by digital marketing guru Neil Patel, you’ll find it to be chopped up into tiny paragraphs—sometimes no longer than one line in length.

neil patel post.jpg

His objective here is not to be patronizing and think that his audience reads at a first grade level, it’s to make things easier for people on mobile devices. He’s discovered that much of his readership consumes content on mobile, and he finds that he gets higher CTRs when his paragraphs are short.

Happy User, Happy Publisher

Google’s push towards a mobile-first society is completely expected, yet it’s causing many to fear that their rankings are in jeopardy. The best way to prepare your site is simply by reviewing every post, page, and existing piece of content through a mobile device to ensure that it provides the best experience to the user.

Check that your site presents content fluidly, it doesn’t have intrusive content like interstitials, and it’s easy to navigate from page to page. Most importantly, understand that a great looking mobile site normally translates to a great desktop version, as long as you implement a responsive design. If you’re reading this today and you still don’t have a responsive design, what are you waiting for?