Optimizing for mobile isn’t complicated, but it isn’t as simple as flipping a switch. There’s no single patch of code or button you can push to magically alter your site to be compatible with mobile devices. However, you do have several options.
Responsive websites are optimized for mobile at a design level. They are created in such a way that allows the components of the page—such as the banners, blocks of text, headlines, and so on—to organize themselves on the page based on the size of the screen that’s accessing the webpage. These components may flex or stack to accommodate a smaller screen size, so a desktop user and a mobile user would both be able to easily navigate the site (even though the layout might be different).
There are a number of advantages to responsive websites. Since the design is flexible enough to adjust to any screen, every type of mobile device will have a customized experience. However, the “responsive” element only needs to be built once. There is only one URL for your website, which makes it easy to develop and easier to manage over time, and it’s relatively simple to implement. The loading times for responsive sites tends to be slightly slower than the other options, but that’s generally a small price to pay for a universally adaptable website.
Mobile URLs are exactly what they sound like—they’re separate, customized URLs that exist for the mobile version of a webpage. For example, if your traditional website was www.example.com, your new website could be www.mobile.example.com. Whenever a user accesses your site using a mobile device, you can automatically re-point them to the mobile version of your site (and provide a link to toggle between these versions, just in case a user wants to switch).
Mobile URLs are starting to become antiquated, but they’re still useful for some businesses. They take more time to create than a responsive design, since they require an independent creation, and require more extensive ongoing upkeep. They’re also vulnerable to fault points in the redirect system—if you accidentally direct a mobile user to the desktop version, they may have a poor experience.
The third option for mobile optimization is closer in theory to responsive design. Like with a responsive design, dynamic content structures require a single URL to house both a mobile version and a desktop version. The difference is, in a dynamic content setting, you’ll have twin versions of your site—the desktop and mobile versions—ready to display based on the type of device and screen size trying to access them.
This is an improvement over mobile URLs, since you’ll only need to manage one URL, and you won’t have to worry about creating and sustaining a redirect. However, there are some flaws that may prevent you from achieving the best results. Creating one mobile version can be problematic, since there are hundreds of different mobile devices that could theoretically access your site.
Before you start trying to optimize specifically for a mobile experience, you have to ensure that Google approves of your mobile site. That means having your website perfectly capable of loading when accessed by mobile devices.
There are three types of mobile layouts that are considered the standard for modern websites: responsive designs, dynamic content, and mobile URLs. All three are viewed equally by Google, but some webmasters may have a preference for one over the others.
A responsive design is one that automatically detects the type of device being used to access it, and adjusts the layout of the site accordingly. For example, if your site is being accessed from a desktop machine, it may display traditionally, but if it’s being accessed from a smaller, vertical smartphone screen, it might “stack” some of the horizontal features to maximize the user experience.
Responsive designs use one URL and one design, which makes it very convenient and efficient for developers. It’s relatively easy to incorporate, and it consolidates an otherwise multifaceted development effort. The only potential drawback of the responsive web design is loading time—since mobile users will technically be loading the entire site, it may take longer to download than a specific mobile landing page. Still, responsive design is the most popular mobile option today.
Dynamic serving content is similar to a responsive design, since only one URL is used no matter what type of device is accessing the content. However, under dynamic content, you’ll actually be serving up totally different versions of your website. For example, you’ll have a “desktop” version of your site loaded up and a “mobile” version of your site loaded up, and you’ll serve the version that corresponds with the device trying to access it.
This allows you to serve each device more specifically. However, it takes much more work to develop, implement, and manage since you’ll need to create a version for almost every type of device that could access your page.
Mobile URLs are an old-fashioned way of getting your site optimized for mobile, but they still work fine for some businesses. Rather than trying to adapt on the fly the way responsive designs do, with mobile URLs, you’ll essentially be building a separate, mobile version of your site on a different URL. When a user access your site from a mobile device, you’ll automatically redirect them to the proper URL, usually a variant of your primary URL.
Mobile URLs are typically more difficult to manage. You’ll have to ensure that your desktop and mobile versions redirect appropriately, which can be difficult. Otherwise, your users will view an inappropriate version of your website, and they may be left with a terrible first impression.
Users searching on mobile devices, like smartphones, are searching using the same index as desktop or home searchers. That means, as long as your site is present on that index, both desktop and mobile users will be able to see you. However, there are a handful of specific ranking signals on mobile devices that will interfere with your rank:
For the most part, mobile SEO is going to function the same as traditional SEO. You’re still going to function on user experience, onsite content, offsite backlinks, and the same navigational improvements that lead to higher ranks. In terms of your ongoing strategy, there isn’t much you’ll need to improve on as long as your strategy is currently in order.
To start things off, you’ll need to optimize your site for a mobile layout. The specifics are up to you, but you’ll need to ensure that your site loads appropriately and quickly—perform multiple tests on multiple devices to ensure that your site is loading the way it should, and don’t hesitate to consult Google Webmaster Tools to see if your site is registering as optimized for mobile. From there, you’ll need to do periodic tests for your page loading times and to ensure that the full content of your site is available on all mobile devices.
Google doesn’t care how you optimize your site for mobile, as long as it is optimized in some way. Whether you choose responsive, mobile URLs, or dynamic content, Google will consider your site optimized for mobile, and you’ll rank accordingly. Your users likely won’t care what type of mobile-optimization strategy you use either, as long as you’re giving them the best possible experience.
That being said, your decision should come down to your own personal preferences. From a technical standpoint, responsive designs are generally the cleanest; they only require one redesign to be complete, and the ongoing maintenance is pretty much nonexistent, at least compared to dynamic content or mobile SEO URL strategies. Plus, you’ll eliminate the vulnerability of failing to accurately judge the type of device being used to access it.
After optimizing your design and structure for mobile, there are a handful of ongoing strategies you can use to boost your rank in mobile searches, even beyond the strategies of a traditional SEO campaign:
Now that the “mobile landscape” is out of the way and you have a good idea what you can expect from mobile optimization, let’s dig into the details of exactly what mobile optimization entails. These are mostly a series of onsite changes that you can implement to make your site appear and perform better on mobile and alternative devices, but there are many options when it comes to implementation and of course, testing.
Let’s start with the basics. These are hallmarks of mobile optimization that you can’t ignore, and following all of them will put you in pretty good shape to be qualified as “mobile-friendly:”
(Image Source: Google)
The above “best practices” are the basic ones you’ll need to comply with Google’s mobile standards and get your site seen as “mobile-friendly” by search engines. However, that doesn’t necessarily mean your mobile optimization journey is complete. Meeting the basic requirements will help you appeal to search engines, but you also have to bear your users in mind. Yes, meeting the above thresholds will be valuable for users, but if you really want to sell the experience of your site, you’ll need to go above and beyond the line of duty:
Aside from smaller factors like optimizing your images, there are three main ways you can implement broad mobile changes to your website:
Essentially, the idea here is to code your site to automatically detect the size of the screen viewing it and adapt its material accordingly. For example, you might have a desktop layout like the one on the left in the diagram below, but when a user tries to access the same site on a mobile device, the site with “sense” it, and rearrange its components to be viewed conveniently.
(Image Source: Google)
This may seem space-aged or incredibly difficult to incorporate, but the reality is, there are many responsive options available these days. In fact, if you have a WordPress site, or use any popular CMS, you can easily find a free responsive template on which to build your site. It’s super popular for a reason.
If you’re having trouble visualizing or comparing these methods against each other, here’s a handy chart that Google created to explain the differences:
(Image Source: Google)
There are some pros and cons to each method, but ultimately, responsive comes out on top in most scenarios:
(Image Source: Moz)
When it comes to the search optimization element of mobile optimization, there isn’t much more to be seen. The basic standards of onsite and offsite optimization apply here, and of course you’ll need to come up with high-quality content on a regular basis, but there’s nothing else specifically for mobile devices that you’ll need to do on an ongoing basis.
Let’s say you’ve done everything I’ve outlined above—even the “above and beyond” stuff—and you’re confident that your site is sufficiently optimized for mobile. Just how confident are you? Are you willing to bank the visibility of your website on it?
Even if you feel supremely confident, it’s important that you test your assumptions.
One of the biggest reasons to test yourself is because of the sheer diversity of devices that are currently out there. Each device has its own quirks, layout issues, and rendering issues, and if you want your site to be as mobile compliant as possible, you’ll have to adapt for all of them. Just because your site looks fine on your specific model of smartphone doesn’t mean it’s similarly rendering across the board.
(Image Source: SmartInsights)
Google is one your side. Google wants your site to be mobile-friendly. Accordingly, they’ve developed a handy online test you can use to determine whether or not your site passes their basic standards. Run your site through this test and Google will let you know exactly what—if any—errors or incompatibilities it finds. If you pass this test, you won’t have to worry about any irregularities in your search rank or visibility.
(Image Source: Google)
Even if you pass Google’s standard test, it’s a good idea to run tests on your own devices, or through a service like MobileTest.me, which will allow you to “simulate” how your site appears on different browsers and devices. This is because even officially mobile-friendly sites can have visual hiccups or unpleasant factors in their design that compromise your intentions or show up differently than you expected. Use this stage of testing to weed those errors and fault points out.