Responsive vs. Mobile Site SEO
So, you made the decision to include mobile users in your site design and SEO efforts. That’s great! You are ready for the future then. If you haven’t yet, then you need to. Let’s take a look at what is needed to get you there and to make sure you are ready to optimize for users on portable devices. Mobile data traffic will increase 11-fold from 2013 to 2018, according to data giant Cisco, and marketing research company Emarketer reports 1.75 billion smartphone users in 2014.Your website will get behind if it is not ready. A technological change is coming to how people browse the web, and you as a business have to be ready to cater to the new ways people will browse your site.
To be ready, all you have to do is make sure your site is working for mobile users by choosing either responsive website design or a site that redirects to a mobile friendly alternative. This is usually easier said than done, since there is possibly going to be a major redesign or build-out involved to get the site ready. While it might sound like a daunting task, you can’t set up mobile SEO without incorporating one of two solutions. So let us take a look at these two methods.
Responsive Website Design
The first method is responsive design. With a responsive website, you basically just have one website and the CSS rules take care of its being resized to any browser accessing it. If one user goes to your website url of superawesomewebsite.com on a tablet, another user visits on a mobile device and a third sees the site on a computer, the size will “auto-magically” change for each of them. Take a look at the examples below of how the Online Image website appears on different devices:
As you can see, a responsive code base makes our site one which can rule them all, as all devices get the same experience. Since all of the devices get the same content, we just have to make sure the content is itself great, and it will transition to benefit us and our users who come to our site via different technologies. You don’t have to worry about users getting lost in different URL structures, or getting redirected to dead ends like you would with a mobile redirected site. Since the responsive site will conform to any size device, it makes it easier to create great search engine optimized content that the regular & mobile Google bots will like.
Another huge benefit to responsive sites is that you also have to worry less about coding issues than you would with a mobile site, in theory. With a mobile site, as I will soon outline, you have to take care of two websites and potentially two versions of content; with a responsive site you just code it and if it passes the test, it works. With that in mind though, one issue that comes into play sometimes is user experience. While it is easy to code it and leave it, if a responsive site is not coded correctly, you might be showing irrelevant content sections first, and accidentally hiding the content. One example of this is if a site is coded so that the sidebar section shows up before the content the user is looking for, this is horrible, because now your users have to scroll what feels like 5 minutes to get to your content. Use the CSS power to polish each of the three main size rules with relevant buttons and calls to action based just on the device type.
Mobile Website Design with Different URL
Now on to the second type of site, mobile version of a site. I like to refer to these as ‘mobile site/s’, and while responsive sites are also technically mobile, this type of mobile reference pertains to special sites that are made exclusively to mobile devices. The way it works is that, let’s say I have onlineimage.com, this is the main site that computer users can access, mobile users can access it as well, but if mobile users (tablet or smartphone) access it, they are redirected to m.onlineimage.com.
The site can look almost exactly as if it were responsive, but is actually device size specific. This subdomain structure is meant as a useful tactic to give users on mobile devices a website that loads quickly and will fit their screen better (as opposed to taking them to a flashy, long loading version of the site). This was the first method of providing useful user experiences as mobile phones transitioned to smartphones and their browsers became better, but also for the first generation of phones that had web browsing capabilities. There wasn’t much thought about SEO at this point in time :).
The way mobile versions of sites work is that there is a code that detects your devices user agent or screen size, sometimes both. If the code detects a full size device, it loads the regular site, but if it detects a small device type, it automatically redirects the user to the m.onlineimage.com URL. This tactic plays a major role in which method you pick for your site mobilization. The main difference, and in my opinion the best benefit, is that it allows you to have custom content for your mobile visitors. In essence this can be a different site, so while users on computers get a ton of info, mobile users can just get 2-3 most important pages along with business contact info. So you can have a different site for smartphone users, tablet users and computer users. Yes you can customize some content layout in responsive, but not to the full extent allowed by mobile URL redirects.
A mobile subdomain site will allow you full freedom in creating a new theme, layout, content, call to action and optimization for the mobile visitors. The only other thing to note, is that with todays coding practices, you can still pull most of these benefits through a responsive site. You just want to do it without hiding content from users, which isn’t recommended when it comes to search engines, as they could take it as a spammy action.
The other “negatives” that come with this method are that you have to use the rel=”alternate” tag to point to the mobile site, and a rel=”canonical” to point from your mobile site to the desktop site. You also have to be mindful of the URL structure while the user is on the mobile site and when they leave the mobile site for the full site, as mobile redirect sites can easily break the flow and confuse/frustrate users. The other major thing is that you have to basically upkeep two or three versions of the site, a desktop site, tablet site and smartphone site (sometimes tablet/smartphone code is the same), all of which can have their own code. These negatives get outweighed by the simpler implementation though, so if cost is a barrier, this could ideally be cheaper to implement.
There is a lot to think about when getting your site mobile ready, SEO is one part, but having users be able to navigate your site efficiently is another major factor that should be seen as a major requirement for your business. Google and other search engines are ramping up their efforts to further classify & reward sites that are going to provide a good experience for their users, as seen in the mobile friendly label below.
The example above was a screenshot posted on Twitter about a Google beta test of the feature before rolling it out, but it shows their attentiveness to mobile users needs.
When it comes to picking one solution or another, I will maintain that it depends on what you want to accomplish, what your goals are, your budget, experience and time frame. I have used and recommended responsive since its inception. It is simpler for the users, on the developers and will make your life easier. In fact, Google has also started recommending this layout as the preferred choice since earlier this year, so you know where their alliance lies.
If you need some more guidance when it comes to getting your site transitioned over to mobile or improving your existing setup, give us a call. Our trained SEO specialists are glad to help
Nenad is Croatian. He is also the Senior SEO Specialist at Online Image and works on SEO & all its secrets. He also has a twin who does PPC.
With a long background in technology, he looks at the website in multiple dimensions and from various perspectives. When he gets a website on his plate, you can be assured that he will give you in depth feedback on various ways to improve your website to further advance your business.