How To Win At Responsive Web Design After The Mobile-First Update
After months of waiting for the long-anticipated, mobile-first index; it is finally here! If you haven’t given much thought to what this means for your website design, now’s the time to start. Learn precisely how Google’s mobile-first index is impacting not only mobile SEO but responsive website design and development, as well.
What is the mobile-first index?
Let’s start with the Google mobile-first index. What is it?
On March 26th, Google announced they would officially start indexing and ranking websites based on the mobile version of the site. Previously, ranking and indexing were based on the desktop version of a website, and if there was a mobile website design, it would receive a mobile ranking boost.
Now does this mean that websites which are not mobile-friendly can’t rank anymore? No, but the mobile-first index does mean those websites may see a decline in rankings, especially in mobile search engine result pages (SERPs).
This wasn’t exactly breaking news to us for a couple of reasons. For starters, Google first announced that they would eventually shift to a mobile-first index back in November 2016, giving brands plenty of time to prepare for the mobile-first shift.
On top of warnings from Google, we know that mobile devices account for a significant amount of website traffic, so most SEO experts expected to see this sort of change eventually. So far in 2018, 52.2 percent of all website traffic worldwide was generated by mobile devices. Yes, you read that correctly - over half of the world’s website traffic is from mobile!
Why does it matter? Well, it’s a great reminder that the mobile-first index isn’t just a concept made up by Google, it’s the reality of our browsing habits. Google made this change to deliver better results. After all, Google usually has a reason for those big changes.
Why does mobile-first web design matter?
Google takes into account over 300 factors when ranking websites in SERPs. Mobile website design influences many of those factors including site speed, behavior metrics such as time on page and pages per session and conversion rate to name a few.
In addition to the strong relationship between responsive design and SEO, mobile-first web design is also key to user experience on a website. As a tool to bring in leads and sales, your website should be easy to use. Asking users to zoom just to click on elements or making it nearly impossible to take website actions when on a phone will only steer potential customers away.
Thinking Differently About Responsive Web Design in the Mobile-First Era
At Blue Compass, mobile-first means more to us than merely how websites are ranked - it’s practically a philosophy we live and breathe. Mobile-first web design means the design process begins with the mobile version of the site and is then transformed into a responsive design that fits screens of all sizes including tablets and desktops.
In the past, many responsive website development companies considered mobile design to be secondary, starting with a desktop design and slimming it down to fit smaller screens, known as graceful degradation.
We prefer mobile-first design because it encourages our team and our clients to determine the most important messages to share with website visitors. Mobile-first website design takes the graceful enhancement approach - start with a great website when designing for mobile and make it even better every step of the way.
If you’re ready to take a stab at mobile-first web design and responsive development, keep these do’s and don’ts in mind.
Let Content Drive Responsive Design
One of the easiest ways to tackle mobile-first web design is to take a content-driven approach. Too often, designs are created before content even exists, leaving the two pieces disjointed. But the real goal is for web design and content to complement each other.
With content-driven design, the responsive design process starts by deciding what information users are seeking and developing content to fit their needs. From there, a designer creates a mobile website design that enhances the content and helps tell the brand's story. The final product is a responsive design that seamlessly transitions through desktop, tablet and mobile devices, is content-oriented and user-friendly.
Say Goodbye to Hidden Content
While we’re on the subject of content, let’s talk about hidden content. One of the easiest ways to improve your website presence given the new mobile-first index is to limit hidden content.
Google wants to see that your mobile website design is just as informative as your desktop design. In the past, many mobile websites were a slimmed down version of the desktop site. The thought is that this made them less crowded and easier to use. In today's mobile-first era, this approach could lead to a penalty for your site.
Avoid Hovers for Mobile Website Design
Hover states can provide a lot of value to a desktop site, but they don’t work on mobile. When developing a responsive website, consider how else you can display hover state content. We frequently recommend using an arrow on mobile devices which opens and closes the menu allowing visitors to access content contained in hover states.
Appropriately Sized Touch Targets
Using a mouse to click on a desktop website is much more precise than using a finger on mobile devices. We’ve all been on a site where elements are too small and close together and you end up clicking on the wrong elements - it’s frustrating! This is where touch targets come in.
A touch target is anything that the user might have to click on when browsing on mobile including buttons, hyperlinked text and text fields. Google recommends that touch targets be around 48 pixels - about the size of a finger - for an appropriately sized mobile viewport.
Touch targets should also include appropriate padding, so users don’t have to struggle to click on their desired element.
Viewport Size Matters
The viewport is the size of the screen. Designing and developing a responsive website means having a site that works for the entire spectrum of viewports, something that developers can accomplish through CSS and the viewport meta element.
When creating a responsive website, developers usually start with base CSS code for a mobile viewport and use media queries to add additional styling as mobile screen sizes adjust. Be sure to use the viewport meta tag which tells browsers to display the content to fit the size of the screen.
Responsive Web Design and ADA Compliance
In many ways, responsive web design can be a win for individuals of all abilities, because mobile devices allow for customization to the individual and apps that provide assistance. But there are considerations to keep in mind when working towards ADA compliance across all devices.
Just like desktop design, when it comes to responsive design, the website should be perceivable, operable, understandable and robust. For more tips, check out our full ADA compliance blog.
How Mobile Website Design and Development Impacts SEO
As we know, web design and SEO are like two peas in a pod. They go hand-in-hand so be sure to consider the impact of your mobile-first web design updates on mobile SEO.
Just like how mobile design is important, the actual development of a mobile site impacts SEO in these ways.
RankBrain Cares About Behavior Metrics
If you’re not familiar with RankBrain, it’s Google’s machine-learning artificial intelligence which sorts search results. RankBrain serves two main functions - understanding your search queries to deliver up the most relevant results and measuring satisfaction with those results based on behavior metrics.
Search engines look at behavior metrics like time on page and click-through-rate (CTR) to determine how relevant your content was to the user’s search query. If users rarely click on your website in the search results or leave the page after a few seconds search engines take note of that for future search results.
Mobile-First Web Design and Site Speed
Do you know how quickly visitors will bounce from a website if it loads too slowly?
According to Google, 52 percent of users will abandon a website if it takes longer than three seconds to load. Again, if your site has great content but users cannot access it (or won’t wait), then you’re losing potential leads and customers.
In addition to the negative impact on the user experience and behavior metrics, site speed itself is one of Google’s ranking factors for mobile, so a slow website could knock your site down in SERPs.
Luckily, Google provides the PageSpeed Insights tool for you to check your site speed and get an idea of what to do next.
Don’t Worry About Canonical Tags...Yet
One common question about the mobile-first index is if this will change how canonical tags need to be set up. If you’re using canonical tags, don’t worry about frantically updating them yet. Leading up to the roll-out of the mobile-first index, Google has said it is okay to leave rel=canonical tags as is.
If you’re not using canonicals yet, now is a great time to set them up. Canonical tags tell search engines which page should be considered primary if there is duplicate content across the site. As a best practice, especially given the mobile-first updates, pages should use the rel=canonical element to point to the primary version of the page or at themselves (self-referential) if there is only one version of the page.
Popups Can Hurt Mobile SEO
Back in August of 2016, Google announced that, in an effort to provide answers even faster, pages which display intrusive pop-ups or interstitials on mobile would receive ranking penalties. Because mobile screens are much smaller, these types of popups make it much more difficult to access content.
If you are using interstitials on your website, make sure you limit them to what is necessary. Google recognizes that some popups are inevitable, such as legal obligation for cookie usage or age verifications. But full-screen ads are considered unnecessary by Google, so make sure pop-ups are reasonably sized and can be easily dismissed by users.
Responsive Design: The Solution To Your Mobile-First Worries
So, we might have mentioned it a time or two before this, but we love responsive web design!
As a top Iowa web development company, we always recommend responsive design to our clients. Say goodbye to the days of designing multiple websites to fit various screen sizes. Responsive web design and development ensures cohesive messaging, look and feel across all devices. With a mobile-first, responsive website you will provide value and a positive experience for your customers regardless of their device, which will encourage them to convert or come back.
Plus, responsive web design makes SEO easier to tackle because you’re not duplicating your efforts across different websites. That’s a win-win in our book.
Blue Compass Can Make Your Website Mobile Ready
If you’re ready to tackle Google's mobile-first index, Blue Compass can help! Contact our team of mobile-first designers and developers and Des Moines SEO professionals to learn more.