It's Time To Make Your Sites Mobile Friendly

Google just released a brand new algorithm update that should hopefully give a tiny bit more credibility to websites that follow proper mobile standards. I assumed that they've always done that, but this time it's more official. Making your websites readable on desktops, phones and tablets will help keep your visitors on your website, and not stumble around looking for the "Desktop View" button that are still very popular. Your bounce rate goes down and your time on site goes up and you'll appear more frequently in mobile searches, so it's a win all around.

There are several ways to go about this, from using popular 3rd party frameworks like Bootstrap to using Media Queries to even using an entirely new mobile version of your website, which I don't recommend doing. My preferred method is media queries, because they give you much more control over your layout. You also don't have to worry about having multiple versions of your HTML or about having duplicate spare pages either.

Set Your Viewport

Setting your viewport properly with the following meta tag is important, as it gives the browser instructions on how to scale and set dimensions for the users particular device.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without it on your webpage, mobile browsers will try to render your pages at a desktop screen width. So before you do anything else, set your viewport accordingly.

Select Your Mobile Strategy

There are 3 main ways to create a mobile design on your website, each with their own pros and cons. I mentioned media queries above, which are perfect for making responsive layouts. But there are simpler ways of doing it, which require more maintenance making them more error prone.

1. Create A Responsive Layout

This is probably the toughest approach, because it requires your layout to be flexible from the start. Everything you add on your page needs to be able to "respond" to the screen size and look readable in any format. This is also the preferred method for Google, for several reasons. It offers better performance, since the only thing that changes is which style rules get used. Also by using the same page you won't need a separate URL for a mobile version and thus removing the problem of having duplicate content on your website. You can accomplish this by using percentages, instead of fixed sizes on your page elements. And you can get more control by using media queries.

Here is a desktop view of this website:

Compared to its mobile equivalent:

The best part is that I didn't change any of my code to make this happen. All of the elements are percent based and all of the mobile style rules get applied as soon as the device screen meets a certain condition. The main content takes up 100% of the mobile screen, minus some padding, and the content on the right side got pushed to the bottom of the page. No content was lost and it's readable across the board.

2. Dynamic Pages

Dynamic pages will render different HTML based on the current device being used. It is a bit trickier because you need to know, server side, the dimensions of the users screen, which isn't the most fool proof way of doing it. The main trick to use is to get the name of the users User-Agent and compare it with a collection of known browsers and take a wild guess as to whether the user is on mobile or not. This was a popular method some years back and several of my websites had this implementation. It's not full proof and it requires more code than usual, but Google still respects it as being mobile friendly as long as its crawlable.

3. Create A New Page

This was a popular method a few years ago, when there really weren't many alternatives. Many a time this made an appearance as either an m.domain site or a domain/mobile/ site. You can create an entirely new mobile experience for your users and 301 them there if and when a mobile device is detected. A few issues (more than a few) with this method however. For one, we have that same issue of detecting mobile devices, which isn't as easy as it sounds. But more importantly, you now have 2 separate websites to maintain. If you have big changes added to your desktop version, then you'll have to recreate the same for your mobile layout. Aside from that, you'll end up with multiple duplicate pages which Google frowns upon, but you could of course just use a canonical URL.

So choose your poison, but we're going to go with #1, and as I mentioned it's Google preferred method, however they are all perfectly acceptable as long as you take the right steps in your search engine indexing.

Use Media Queries

Media Queries solve all of your mobile detecting issues and were something that was much needed in the CSS standard. They consist of a media type and at a minimum one expression that will limit the scope of the style sheet.

When a media query is true, for example max-width: 600px, then that particular queries style rules will be observed. Any other time, they just sit there in your CSS files waiting to be called. To read more on how to implement media queries, you can check out my post here for a quick beginners guide.

Size Your Tap Targets Correctly

It's not just about having a nice looking mobile and desktop experience, it also needs to have a good user experience. While not something that's a massive issue, it is something that Google looks at. Tap targets are pretty much any page elements that a user can click on, such as links, buttons and form fields. Obviously on a smaller screen we want users to be able to click on them without any issues. The official Android guidelines recommend using a tap target size of roughly 48px or 7mm.

Test Your Website

Google offers several tools to help you find out if your website is indeed ready for this mobile algorithm change. One can be found here. And for more seasoned developers that want to know more about how their websites rank, they can visit the PageSpeed Insights page here.