Everyone is talking about mobile. It’s the new thing, it’s the future. That’s great, but what is mobile, how does not optimizing your website for mobile affect you, and when you decide to take the plunge, how do you do it?

The answers are in the video!

Inbound Tuesdays is a new project that we’re working on at Powered by Search and Adrian Barrett, one of our SEO & Inbound Marketing Consultants, graciously offered to be our first victim speaker.

Please leave us feedback in the comments below!

Inbound Tuesdays: Implementing Mobile Transcript

“What’s going on, everybody? This is Adrian Barrett with Powered By Search and today’s video is going to be all about mobile – specifically, an overview of mobile, implementation options that your business can use and, finally, choosing a strategy that is based on your business’s needs and its technical abilities. So with that, let’s get to it.

Basically, what we have here on this graph, is an overview of the usage of mobile in regards to consumer activity. I’m not talking about people that are just on their phone. This is specifically mobile in regards to search. What you see here is basically from 2009, with a trending graph up through 2015. Mobile has had a 400% increase in the past few years. That is absolutely mammoth. That is huge. A 400% increase, and it’s still going up. If you take, for example, this pie chart, mobile usage now – it varies in exact percentage, but for the most part, let’s say it’s about 20-80%. So about one in five searches being conducted is done from a mobile device. If you take this graph from today’s current time and you “up” that – looking into the near future, we’re headed into about 35-65 relationship. This is something to keep in mind and if your business is not on board with this, you are going to be struggling (if not struggling already).

So what do you do and how is the mindset related from mobile to your business’ product? That’s what we are going to touch on right now.

With mobile, you have a completely different mindset of the customer, as opposed to, say, a desktop or a laptop or a Mac. With mobile, peoples’ mindset differs from those people that are just browsing the computer from their underwear at home. With mobile, you have, say, Mr. Joe Smith, who is locked out of his car on a highway and he has no idea how to get home, but he does have a cellphone and he does have a data plan. Lucky guy! What Joe Smith would do is search for an auto company, a locksmith, whatever, and if he’s happy with the service that he finds and he’s finally let into his car and he can go home (so he can browse his computer from his underwear), he would be happy and he would share that information. There are two key points from the story. Number one: mobile users completely – COMPLETELY – have a different mindset than someone that is browsing from home. The second point that you want to take home is that mobile has created a culture of sharing. It sounds really fairytale-ish, but it’s true. Mobile sharing is absolutely massive and if you don’t incorporate a sharing tactic or technique into your marketing plan through mobile, you’re going to be shooting yourself in the foot.

So with this, let’s take a look at the three different options that you can implement to improve your mobile strategy. Let’s get to it.

Okay, so the first strategy that you can implement in mobile marketing content production alongside your desktop website is known as responsive website design. Responsive website design is the preferred method that Google recommends your business take, in order to show both mobile and desktop content. Some of the benefits of responsive website design is that there is only one URL. You have a mobile version and you have a desktop version. However, there is only one URL. One URL means that there are no redirects. It means that there are no duplicate content issues. It means that it is very easy to work with. The downside however, is that a site redesign may be in order and your tech team might not be very happy with you.

So let’s look at what I have on the screen here and I’ll show you exactly how responsive website design works, if you’re not familiar with the visuals of it. Let’s hop over to the computer screen.

What you see here on the screen, obviously, is responsive website design. I took my handy-dandy art skills and I put together a quick picture for you here. On the left we see a computer monitor. In the middle we see a tablet. And on the far end you see your smartphone. The purpose of this illustration is to demonstrate that with responsive website design the content and the layout of the information being presented is going to restructure itself accordingly to the device that is viewing your content. Key points to take away: again, there is one URL, there is no duplication. Link consolidation and popularity is also huge. This means that when you’re focusing your marketing efforts on getting your inbound links, it’s not getting split, there’s no losing value. Your equity is staying where you want it. There are no redirects. And, of course, like I just mentioned, site redesign is questionable for the “disadvantages.”

Another thing, which you may or may not consider to be a disadvantage of course, is that the mobile experience is not specifically optimized for a mobile user, due to the fact that you’re using the same content from a desktop website. Also, very key point to note: everything that is required for responsive website design to work (**Note: in regards to SEO**)must be crawlable. I repeat: it must be crawlable. This means that you can’t block your CSS files, your JavaScript, whatever it is that you’re using. In order to make responsive website design to work as far as SEO is concerned, you’ve got to allow the bots to crawl it. Also keep in mind that some of the elements that are on your desktop website may not fit properly on some mobile devices and you may run into issues where you might have to delete some things specifically. So this can get a bit technical.

Again, with responsive website design, let’s take a look at how exactly it works. And what you see on the screen here is a CSS example of media queries. Responsive web design is typically done with CSS3 media queries. When you see in the first example, we have a media screen and a minimum width of 480 and maximum width of 800 pixels. These numbers can be whatever you use in design as a company or whatever you feel is required for your website. However, what this basically is saying is that any devices that are viewing your web content between the pixels of 480 and 800 are going to get shown their layout in this said factor here. Underneath that we have a media rule that says: “Anything under or anything up to in max. width of 479 pixels will be shown a different layout.” Basically, what you’re just doing is you’re instructing the content to be shown based upon the screen size and the pixel size of said device viewing your content. It’s pretty easy enough and this is how you do it – through media queries.

The second implementation strategy that you can use is something known as dynamic serving URLs. Dynamic serving URLs are not the preferred way of doing it; however, your mobile strategy can work just fine by using them as well. Dynamic serving is a balance – I think it’s a balance – between responsive website design and the third option, which I will touch on in a minute. It’s similar and it’s different. It’s similar in the fact that there is also one URL. People who access your website from a mobile device will see a mobile-optimized website and people who access your website from a desktop PC will see a desktop-optimized website. So in essence, what you’re doing is, when people hit your server, the HTML that’s being output is generated differently depending upon the user agent which is accessing your website. It’s pretty cool, I must say. Let me show you that on the screen, just so you can get a visual, and we’ll talk about it a little bit more from there.

Here we have dynamic URL serving. And in this photo which I put together using my fantastic art skills, (if I may say so myself) we see a desktop PC and we see a mobile phone right here on the left. I know it’s just a rectangle. Come on, folks – use your imagination. So both of them are accessing the server and what’s happening here is the server is generating different HTML output depending upon the device that is accessing the website. And those are the two arrows that you see pointing to each device. With dynamic URL serving, things to keep in mind: again, there is one URL. There is no duplication. Link consolidation and popularity are both huge bonuses and advantages in this particular instance. And it also has a better mobile experience than responsive website design, because you can specifically optimize and design a mobile site, as opposed to simply condensing and rearranging the information. Pretty cool! The downside, however, is that it can be technical and I do not recommend that you do this yourself. You will pull your hair out, especially if you’re not used to this kind of work and web-related installation.

A thing to keep in mind, obviously, is that dynamic serving URL uses… You might be wondering, “Well, how do I get two different versions of my website on the same URL?” This is done through something known as a vary HTTP header and I recommend that you have your tech team install it for you. The HTTP header is also a ranking factor used by Google to discover mobile-optimized content, and that’s something important to consider. Here is a simple example. You don’t have to copy this word for word. Obviously, your headers may differ a little bit, but this is the general idea. This is installed on your server and the server will dictate who sees what. It’s a great way to split your content but keep your link popularity and your marketing power all in one place.

So we’ve gone through option one, option two. We also covered a history or the background into mobile usage in general in terms of search, which reminds me I actually forgot to check it all off. There we go. We’re almost done with this one. I won’t check that off yet. But fear not – we’re getting there.

So the third option that you can use is a completely separate mobile website. This has a great advantage from the fact that, like dynamic serving URLs, you can completely design a mobile site specifically for mobile users. It’s a fantastic mobile browsing experience and you don’t have to suck out or take away any of the information that your main desktop website has. The downside – and this is a big downside – if you do it incorrectly, you run the risk of duplicate content and you run the risk, also, of technical errors and frustration in general. However, it is fairly easy to implement and I will show you that right now.

That you see here is a separate mobile website diagram, again, using my art skills. What we have here now, again, is the same desktop PC and the mobile device on the left. In the middle is the server and what you’re basically seeing is, depending upon the device that hits the server, it’s going to spit out a completely separate URL that is different. Here we have two URLs, as opposed to one URL that you have seen before. There is a mobile website and your normal website, and they’re physically two separate URLs. The issue with this: your link power and your marketing efforts are getting split right down the middle. So all of that power going into that great landing page that you’ve created – there is no power going to your mobile section, as well. So this can definitely hurt you, depending upon the particular strategy that you want to take and where you, as an organization, are deciding which URL to promote here and there, etc. Another thing to keep in mind: two times the pages means it’s two times the cost and double the time to maintain, unless, of course, you’ve created some sort of script that updates both websites at the same time. It’s a great mobile experience. However, due to the downsides, it might not be exactly recommended.

Other things to keep in mind: you want to make sure that you have a consistent URL structure and redirects are used. For example, on your desktop version you want to make sure that you are linking to the mobile site, and on the mobile site you want to make sure that you are linking to the desktop version. Let me go through this again really quickly. On the desktop version, as you can see on the screen – you see we have example.com/page.php. Your mobile site should mimic the desktop site and, as you see, m.example.com/page.php. The key here is that from your desktop version you need to make sure to add in link URL alternate and specify what the mobile page is. Likewise or vice versa, from the mobile version, you need to do a canonical link back to the desktop version. So this needs to be done on all of your pages. And I added… There’s specific code that you can use for feature phones. However, honestly, just use the smartphone feature and it seems to work, as the majority of people have smartphones nowadays. It could depend on your business, too. So this is something you definitely want to keep in mind.

Alright, so you’ve seen a mobile overview. You’ve seen three different strategies that you can use to implement mobile with your business. Last but not least, how do you know which one to choose? Well, I have created a flowchart for you. Based on the information which I have presented and using this flowchart you will be able to discern which strategy is best for your business, based upon your business’ needs and your technical abilities. So let’s cross this one off here. We did one and two. Let’s get to number three and I will explain the flowchart to you on the computer screen.

Here we are, at the flowchart. Basically, let’s start from the top. The mouse is here – this circle – same content on mobile, with a question mark. What this is asking you is, “Do you plan to have the exact same content on your mobile version as your do on your normal website?” If the answer is “no”, then you can head right away to dynamic serving URLs. If the answer is “yes”, then you need to ask yourself another question. “Will a site redesign be a problem? Will I be able to implement media queries and get my IT team to redesign the site in order to have it be responsive?” If the answer is, “Yes, it will be a problem,” then you need to head over to dynamic serving URLs. If it’s not a problem and you want the same content, you are free to go and you had better start up your responsive website design restructuring ASAP. Now in regards to dynamic serving URLs, if you cannot implement this feature, then it is suggested that you use a separate mobile website. If you can do dynamic serving, that’s all you need.

And there we have it, folks. That is your mobile overview – three different ways that you can implement mobile and the simple-to-use flowchart that helps you decide which strategy you want to use. One more thing before we go: you know that content is king, but not just content. It has to be unique, awesome, fantastic, primo content. Cream of the crop. Make sure to add it into mobile, especially – here is a handy tip, if you haven’t heard it already, although I’m sure you probably have – Google authorship markup. Authorship plays a role in search engine ranking factors as of today. It’s something to keep in mind. When someone comes to your website and they are reading your article, if you are a verified-authorship author and they hit the back button and they go back to the search results page, Google will physically update that search results page and show that person more articles written by you. So you’re getting free advertising if someone comes to your website, reads your stuff, goes back after x amount of time. They have to stay on your site for a bit of time, but if they do go back to the search results pages, these things will update, showing more of your content that wasn’t there before. It’s a great added bonus and it’s a great way to get yourself a little extra advertising for free from Google. Who would have thought?

That’s it for today. I’m Adrian Barrett with Powered By Search. I hope you enjoyed it and see you soon.”

If you want to learn more, have a Free 30 minute consultation with us.

Tagged with: Adrian Barrett, Mobile Marketing, mobile-friendly sites

About Troy Boileau

SEO Specialist at Powered by Search and passionate about SEO, marketing and networking. Always endeavoring to be a stronger developer, writer and conversationalist on the side. Follow me on Twitter, my personal website, or grab a copy of my book, The Conversation Handbook.