Skip to main content

Most website owners dream of ranking in the top 10 of Google for certain keywords. Not only does this massively increase traffic, but it can prove highly lucrative for the website owner.

Many give up because they’re not seeing results by following the tried and tested formula that’s worked for so many others before. The days of backlink building and meta tag optimisation are behind us now, these are simply a given. Now Google expects more, your users expect more. It’s time to turn this from a hindrance into your advantage against many other faltering website owners.

In this article I’ll take you through how to improve and optimise your website to generate huge traffic gains versus the competition.

You’ll learn how to make sure your website is best suited for Google’s latest algorithm, and if not I’ll show you how to make the necessary improvements to beat the competition. This was one of the biggest changes to search in years. Is this really THAT big a deal? Absolutely.

The Facts about Mobile Search

Mobile search facts

Getting Started with Google’s Mobile Search Update

Google recently announced a huge change to the way people search, dubbed by many as Mobilegeddon.

This update prioritises mobile friendly websites for mobile search results. This sounds like an obvious progression, but it’s a huge change.

Why’s that you may ask?

Last year Google announced that in 2015 mobile search would overtake desktop search. Not only that but mobile search results would become more lucrative for Google.

With that in mind, Google’s April 2015 update for mobile search results isn’t a minor update, it’s a huge shift change in search results. Think about how Google’s PageRank previously worked for your website. Now consider this; PageRanks are getting a huge overhaul, with each website having a desktop PageRank and a mobile PageRank.

I’m not saying that these two rankings work independently, of course one will influence the other. But, if your website lacks the ability to cater to the mobile market then you’ll be hit with a dramatic reduction in visitors.

Google has previously confirmed that they’re working on a mobile based search index. Could this be what they were discussing? I doubt it!

Everything we already know has been about increasing your desktop PageRank. Yes there’s overlap. But are there new ways to increase your mobile search rankings?

Welcome to the new world of Google Search. This is only the beginning.

Optimising Your Website and CSS for Mobile Friendly Search

There are some very easy ways to prepare yourself and your users for this update. Below are 6 simple steps you can take to make sure you’re not only ready, but you’re better than the competition.

Here’s what we know already about the April 2015 mobile search update –

  • Google is currently working on a dedicated mobile index
  • Mobile readiness is determined at the page level, fixing one page isn’t the solution
  • Responsive design is not more beneficial than a correctly coded mobile site
  • Googlebot must be allowed to crawl CSS & JavaScript to pass the “mobile-friendly” test – see below
  • Tablets will not be affected by this update – yet!

1. Mobile Readiness Test

The best place to start is by testing your website with Google’s mobile readiness tool. Remember, Google must be able to crawl your JavaScript and CSS files. If there’s an issue with this then expect to see a false result.

Google does admit this tool isn’t perfect, but ignoring it would be a bad move. If all goes to plan you will be presented with this screen –

Mobile readiness example

Now if we take a website that currently ranks well with Google (PR5), but the website owner hasn’t updated it since 2009 – Pixel2Life. The plan here isn’t to name and shame, but to show you that no-one is safe from this update. The CSS is still using many of the CSS 2 techniques around in 2009, and needs updating to the new CSS 3 standards to help boost mobile usability.

Mobile readiness failed example

Not only does this show you what to expect if you’re not ready, but you can see some of the reasons of why websites are failing the mobile friendliness test.

  • Text too small to read
  • Links too close together
  • Mobile viewport not set
  • Content wider than screen

Each of these points seem obvious once you think about it. But did you consider before today that the size of the text could affect your search ranking? I know I didn’t.

2. Adaptive Web Design vs. Responsive Web Design

Early on in your mobile journey you need to decide whether to go with an adaptive or responsive CSS approach to mobile readiness. Both will help improve your search ranking for mobile friendliness.

Adaptive Web Design

Adaptive web design is when you send the user to a standalone part of your website that’s been purely designed for mobile users. What better way to be mobile ready than to send users to a website designed only for mobile?

Although this sounds like the obvious choice, there are also many stumbling blocks that could trip you up.

  • Duplicate content and META tags – both of these will count against you in the world of SEO, make sure you correctly identify which pages are duplicates.
  • Increased development costs – not only will you be creating your normal website, but you’ll also be creating a whole 2nd website… this isn’t the cheap option.
  • Ongoing maintenance – you’ll need to maintain both websites, taking up twice as much time, and even more money.
  • No guarantees they will work with future browsers – especially with Microsoft starting again with Project Spartan.

Responsive Web Design with CSS

Responsive web design is a newer technique that uses multiple stylesheets depending on the size of the screen. I have a tutorial on how you can create a basic responsive website.

Responsive websites are great, and may websites use this technique as a standard. Yes, even this one uses a responsive design (so that probably makes me biased). They’re highly flexible across multiple devices and even Google recommends this as the preferred method for creating mobile ready websites. As you’ll only be running one website with two designs that means there won’t be any duplicate content or effort, giving you less maintenance and more time to focus on your content and users.

There are some downsides to responsive designs that you should consider –

  • Higher upfront costs – because it’s harder to split the two websites like with adaptive web designs, you’ll find yourself paying for everything at once.
  • Lower conversion rates – responsive web designs can sometimes come across as lower quality, usually resulting in less sales. This could be easily fixed with a higher quality design, but that’ll cost more.

The key with both of these options is to make sure you pick something and stick with it. You know what Google recommends, but if you’re purely focused on conversions then you have other considerations.

3. Dynamic Text Sizing

The first issue highlighted by Google was that the text was too small. What displays nicely on a desktop or laptop may become very hard to read on mobile and tablet devices. The way around this is to use elastic text sizing instead of setting pixel values. Here’s what I mean:

[css]
body {
font-size: 17px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
body {
font-size: 18px;
}
}

h1 {
font-size: 2.5em;
}
[/css]

The CSS above sets one pixel value for the body text – the text for the whole website. Then we say we want the headings to be x2.5 the size of the default text. Additionally I’ve used a media query to increase the font size for mobile devices. This then trickles down to the headings, maintaining the x2.5 size value.

4. Links too Close Together

A common issue when you’re browsing the mobile internet is that links suddenly become the most awkward things in the world. Why can’t people create block links or buttons!?

Now you’ll find Google asking website owners that same question.

I’m not saying that links within paragraphs suddenly need to be converted into buttons, but you need to make the key links easy to click. Start by making your navigation bar finger friendly. Here’s how I’ve done it –

Mobile readiness example

The key points to take in here are –

  • The size of the text – it’s clear and easy to read
  • The space between the text – users will find it hard to press the wrong link; unless they have fat fingers
  • The clarity of the buttons – you can clearly see where one link starts and ends

5. Mobile Viewport Not Set

Don’t forget to set the viewport meta. This is a very important when you’re trying to make your site mobile friendly.

To set a mobile friendly viewport scale you need to add the following between your two <head> tags.

[html]<meta name="viewport" content="initial-scale=1">[/html]

What does the viewport meta do?

When you browse your website on your mobile device you may notice that it seems very zoomed out, and it starts acting funky when then device changes orientation. Setting the viewport addresses this issue and makes sure that your site looks as you intend it. Not doing this will give your users a variety of different experiences for the same CSS file, which is never good.

Let’s take a look at the responsive website design I created in a previous article. Below are two examples that I’ve taken directly from Google Chrome on my iPhone. The first is what the website looked like without the viewport meta tag, the second is with the viewport meta set – that’s the only difference in the code.

Mobile readiness exampleMobile readiness example

As you can see, such a small piece of code makes such a huge difference to your users. That could be the difference between making and losing a sale.

Why does this happen?

The simple answer is that it’s down to an assumption on your browsers part. When you visit a website on your mobile or tablet device it will guess that you’re after the full desktop view. Not only that, it will try to stuff that desktop view into your little screen – thanks! Our job with the viewport meta is to tell the browser not to assume this, do what we want it to do.

The Different Types of Viewport Meta Tags

You will see a number of different implementations of the viewport meta tag on your travels around the internet. Here are the basics to help improve the usability of your website.

[html]<meta name="viewport" content="width=325">[/html]

This will set the width of the website to 325 pixels, which is great if you only want to display content for that width.

[html]<meta name="viewport" content="width=device-width">[/html]

This is a great alternative. It scales the website to the width of the device it’s currently being viewed on. The only problem is that this doesn’t work very well when switching between portrait and landscape orientations.

[html]<meta name="viewport" content="initial-scale=1">[/html]

Make sure the site isn’t zoomed out like in my example above. This will keep the 1:1 scale that you initially intended all users to see.

You can even prevent the user from zooming in like so:

[html]<meta name="viewport" content="maximum-scale=1">[/html]

Surely this is the answer? No. Preventing the user from scaling in goes against basic accessibility design principles, which is another tool Google uses to rank websites. The best option is to set the initial-scale and build your CSS around that.

If on the other hand you want to use CSS for this then you can use the following:

[css]
@viewport{
width: extend-to-zoom;
zoom: 1.0;
}

@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
[/css]

But, this is currently only being pushed by Internet Explorer. Personally I think it’s best to use both for now until the verdict is out, and most probably we’ll see things tilt towards the CSS alternative.

6. Content Wider than Screen

Having content wider than the screen is a big no no for Google. Typically this will be down to one of thee reasons:

  • Non scalable images
  • Non scalable Google Ads / ads in general
  • Fixed width content combined with a responsive design

Let’s have a look at how to solve these.

CSS: Responsive Images

Creating responsive images with CSS is easy, and it will very quickly improve your website and it’s mobile friendliness.

By combining max-width and height we can make the images scale down in line with your responsive design. Here’s how you do it:

[css]
img {
height: auto;
max-width: 100%;
}
[/css]

This works across most browsers, but Internet Explorer 8 requires a hack to give your website responsive images. Given how out-of-date Internet Explorer 8 is you may decide to ignore this, but I know some of you like to cover all bases.

[css]
@media \0screen {
img {
width: auto; /* IE8 */
}
}
[/css]

Responsive Google Ads

Google has recently rolled out their responsive ads on the Adsense platform. They’re no different to implement or setup, simply select “responsive” when creating the ad.

Unfortunately there’s currently no way to switch your ads to responsive ads without creating new ones with new code. There’s plenty of documentation on Google’s developer area, which shows you how to create an ad, change the size, and all the different options for your new responsive Google Adsense ad.

The documentation also takes you through how to style the responsive ads with CSS so you can really customise the user experience on your website. Not only will this look good, but it will help your conversion rate and help build more trust with your users.

Fixed Width Content on a Responsive Design

The final point here is to make sure if you’re using fixed widths that you don’t make it larger than the whole page. This really covers the basic of CSS design, but it’s common mistake.

For example,

[css]
.wrapper {
width: 80%;
}

.content {
width: 800px;
}
[/css]

In this example you can see that we’ve used a fluid wrapper, setting the width to 80% of the screen. We’ve then created a content area that’s 800px wide. What if the screen is 400px wide? We’d be left with the wrapper aiming for 320px whilst the content area is going to be 800px. Hopefully you can see how much of a mess this is going to become.

If you are going to use fixed widths with fluid layouts then do one of two things:

  • Make sure there’s a min-width value for the highest element and keep the fixed width less than that
  • Use media queries to change the fixed width as the screen changes

Conclusion

If you follow these tips and make the necessary improvements to your website then you’ll quickly see the benefit of making your website mobile friendly. If you take these tips and combine them with a well built CSS mobile solution you’ll find even more success.

Subscribe for Updates

Get notified about my latest content first and receive invitations for subscriber only competitions.

One Comment

  • Desiree says:

    Hi Adam
    I’m so glad I found your site. I’ve been trying to find tutorials on how to make a mobile first navigation bar, and I am looking forward to trying the other tutorials on your site.

    I would also like to say that I really like your website layout. It’s very refreshing without any ‘noise’. Like a Zen space.
    regards
    Desiree

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.