Is your website non responsive? Here's how that impacts your SEO

You can pour your heart and soul into your site. You can update it daily and curate the images and copy just right. You can stay on top of trends and use paid adverts on your social media to drive traffic to your store.

But unless your site is responsive, attaining traction online will be an elusive dream.

What does responsive mean?

Also known as mobile-friendly, responsive design revolves around creating the optimal viewing experience for anyone who passes through your online store.

We wanted to create this just at the cusp of starting a new year. Mobile-friendly content was a big marketing trend this year. With over 60% of searches coming from mobile we’ve reached a pivotal point where’s responsiveness is no longer a “nice-to-have” but rather a “seriously-it’s-time-to-get-optimising” component of thriving in the online retail space.

Google mobile-first indexing

It was way back in 2016 that mobile internet usage surpassed desktop. That change created a massive shift in how online stores operated. It really was a game changer, but it took some time for SEO to catch up with the platform shift.

Before 2018, Google’s crawling, indexing, and ranking systems all came primarily from sites’ desktop version. This created a divide for mobile-users because consuming content online is an entirely different beast.

Google pushed this trend to the max this year when they rolled out mobile-first search engine ranking.

This massively affects Shopify store merchants, so it’s essential that you know how this changed search engine rankings.

Google realised they had to come up with a way that mobile-users could source results that not only answered their search engine queries but also displayed it in a readable format adapted to small screen devices.

It’s right here in Google’s own blog. If you take nothing else from this article, let it be this:

They now index sites according to mobile usability first, and desktop second.

That means if your mobile site isn’t up to scratch a direct competitor has a better chance of outranking you if their site is more user-friendly.

We’ll get onto that in a bit.

For now, know that Google has explicitly stated that optimising your site for mobile is highly encouraged and is helpful for those looking to perform better in mobile search engine results.

And frankly, Google, what site doesn’t want to climb your on-the-go rankings?

What makes a site responsive?

Thankfully, it’s no longer about creating an entirely different website for mobile use, which was once the case.

Harken back to when you were faced with a desktop site squashed into your smartphone screen. I had a Blackberry at the peak of the transition of online content to a mobile-friendly format. A lot of time was wasted manually zooming in and scrolling over and a back to read a single line of text.

Now, a responsive design system works by allowing you to segregate elements of your site. You can control how these elements then behave across different platforms.

Yes, this takes a little care, but it prevents site visitors from clicking out of your site, screaming in terror at the messy state of affairs that is a desktop store shoved onto their 4.5-inch smartphone. That may be a little over-dramatic but the end result is the same; your conversions take a hit.

On the other hand, if you’re ahead of your competitors and provide a delightful mobile experience for your customers, you’re going to notice the positive impact of this.

Google’s Mobile-Friendly Test

This is such a simple, valuable tool for anyone looking to improve their site’s mobile performance. Just type the URL of your store into the search bar and wait for the software to give you the all-clear, or an insight into areas you can improve.

How do I make my Shopify store mobile-friendly?

Here’s the good bit. You don’t actually have to do a whole pile, but as you’ve read, there’s a lot at stake if you forgo these steps.

Check to see your text is legible without horizontal scrolling.
Remove and replace elements that use software not common in mobile devices (Flash is always a big troublemaker).
Create flowable rather than fixed layouts. This allows your site’s elements to adjust so that they can fit your site viewer’s device. By taking the time to enable this viewing mode you’re actually customising your store to suit your window shoppers.
Space out those links - you may be used to seeing your site on a laptop screen. All of those buttons lounging on the screen with beautiful spacing.
However once viewed from a smartphone, they can become squished and even overlap which can be really irritating! Grrr!
Finger tapping is also less precise than mouse clicking, so you’ve got to accommodate the lack of finesse! Any aggravating, overlooked feature puts your UX at stakes. It’s also likely to increase the bounce rate, so it’s a solid move to tweak the mobile layout.
Simplicity - this is incredibly important for mobile sites. You’re dealing with such a condensed screen compared to a laptop’s. The first thing a lot of people will do when first entering your site is to scroll to the bottom of the site. Browsers do this intuitively, almost without thinking for two specific reasons:
to measure the landing page length and;
to orientate themselves using the navigational map at the footer of the site.

So make sure that your pages don’t scroll on forever. Cut back on large bodies of text, too many images (unless it’s in a carousel or accordion format) and two videos maximum per page.

Nice-to-haves for responsive mobile sites

Say, you’ve seen to everything on the list above and want to provide something extra. Here are a few features that add a professional touch to your online store’s mobile design.

Streamline graphics, menus and lead magnets - so that they load, even through cellular, without slowing down the load time.
Condense image size - on the same note, we always tell our clients that high-quality photos are essential. BUT that doesn’t mean they have to be large files. Opt for JPG rather than PNG for faster loading times. The average load time for a mobile site is 6.9 seconds. Unfortunately for these sites, 40% of mobile users will click out of a site that takes just four seconds to load. Tough crowd, I know!
Instead of throwing in the towel, think of it as a challenge. The quicker your page loads, the lower your bounce rate becomes.
Video fallback - If you have a video background in your desktop, set up an image background as the fallback method. Mobile sites won’t display the video background, so it’s good to have an alternative set up.
Remove fluff - mobile users visit sites with intention. They want specific information, and they want it laid out in a highly digestible format that’s a cinch to locate. When designing the page layout, think about the message you need to display and how you can possibly convey it simply and effectively.

If you need more advice on creating a Shopify store that converts, take a peek at our blogs.

It’s not easy to keep on top of everything as eCommerce store owner. As exciting as it is to own an online store, it’s often equally as demanding. We help stores not just stay on top of all their operations but also to create systems that help you conquer the to-do list and get ahead of your competitors. If that sounds like something you’d be interested in learning about, we can set up a chat here.