Google has undergone some radical changes to how ranking works with regard to mobile page viewing in an attempt to be more in-tune with today’s rapidly evolving technology. Sites who weren’t mobile-friendly will get decreased rankings in mobile search results.

These days, more people access the web, and by extension – Google, through their cellular phones or tablets. This is especially true for the youngest generation whose mobile technology usage has tripled since their predecessors. 62% of these people have used their smartphone to look up information on a health condition, 57% have done their online banking all by their app on their phones, 44% have used it for looking up real estate listings, 43% to look up job information and listings, and plenty more as covered by the 2015 Pew Research on smart phone usage.

This has left web designers with plenty to do, making big efforts to both please Google, and reach a new group of potential clients by making mobile friendly sites. This is full of pitfalls however, since making a site mobile friendly is more than just a label Google gives next to your site in the search results, and through trial and error people have learned some of the best and worst ways to handle this new wave of the future. What follows are the best tips to follow to ensure that you’re doing the most you can to make your site mobile friendly, including things most never even think to check, and the biggest mistakes that are made while trying to make something mobile friendly so you will know what to avoid.

THE TIPS!

1. No need to make a whole new mobile site

Don’t concern yourself with this to the point that you need to create an entirely new site, because doing so means you need new content, or you risk running headlong into “duplicate content” which Google hates and will penalize you for. This only means that you need to make the content you’ve already written and designed more easily accessible by mobile technology.

2. Responsive design helps differently sized devices

Having responsive design ideals in place will ensure that no matter where your clients or potential clients access your site from, they’ll all be seeing it as though it was custom-created just for them. This actually reduces the work of website developers. This means you should be using layouts that are flexible, images which will auto-resize and media queries that will cascade within the style-sheet. By using responsive design, you allow the visiting person’s screen size and orientation to be detected, then automatically changed – resulting in an ultimately pleasing user experience.

3. Use viewport meta tags every time

The viewport meta tag will communicate to the browser that the page needs to fill the screen. You can change the configurations of the viewport, but we recommend using this one:, which allows the content to be rendered by the browser by scale and size of the incoming connection, and it’s critical in designing for multiple devices. If you don’t use it, it’s not going to work well on mobile.

4. Use the right fonts and sizes

Buttons and fonts only work when they’re the right size. For mobile use, your fonts should be a minimum of 14px, which might seem huge to you but you don’t want them having to zoom in to read the content. Buttons work the same way. Making it a bit bigger means the users fingers won’t end up missing the button altogether, and end up hitting the wrong thing. Imagine that is the button that contains your “add to shopping cart” – and someone misses it, hits something else and doesn’t bother going back. By having the right sizing, you leave little room for error and no lost sales due to site issues. Buttons should be at least 44px by 44px.

5. Use images that are ultra-high resolution

As new phones are released on a yearly basis or less, they come standard with the latest and greatest in image software which has high definition screens. These screens need images that are double the resolution of a laptop to appear crisp and defined, so be sure that the images you’re sourcing and using are the most ultra-HD you can get for the best user experience.

6. Get rid of the zoom

You don’t want auto-zoom, it’ll mess up tons of your layout elements, most specifically your navigation buttons and your images which will end up looking abnormally large or small and may completely obscure your page. Using the viewport meta tag again, will help you build customized variables that will ensure this sort of mess cannot happen to you. This is the one:

7. Feel more than free to post those videos

Using YouTube videos helps solve all the problems with how users see videos on your site. Often it can be difficult to see, or doesn’t change the orientation, the volume cannot be changed and overall it’s a bulky issue that most will give up on before watching even part of it…if they can even get it to work. YouTube videos fix all of that by having a responsive embed code that is built in from YouTube itself, so upload your videos to YouTube and let them post for you within your site – saving yourself a lot of hassle.

8. Give the option to go to “Full Website” always

Even if you’ve done everything perfect for your mobile visitors, you won’t want to exclude the ability to check out your full website, because some users still prefer to go this route. Though it may be few people who prefer to see the site this way, it’s worth not losing a sale or potential client over, so inclusion of a button at the bottom that lets them “go to full website now” is a perfect solution.

THE MISTAKES

Have a read about what the Google developers page has to say about common mistakes in mobile friendly web sites.

1. Interstitials will get you penalized

Interstitials are terrible, annoying and unnecessary bits of fluff that people were adding to their sites in an attempt to fool Google into thinking they were mobile friendly, when in reality this interstital just asked people to install an app in order to view content, or see the page they requested, which is a sneaky and backdoor method that Google is done with. They no longer allow interstitials in their new algorithm, so sites who are posting them will be hit hard for allowing it to remain. Don’t use them, there’s much better ways to get someone to download your app without force feeding it.

2. Having JavaScript, CSS and Image Files blocks

If Google cannot crawl the site properly because your content is not accessible, you won’t be indexed well. Check your sites robots.txt file to see if it is disallowing crawling. You can use the “Fetch as Google” feature within Google’s Webmaster Tools so you’re able to see your content from Google’s point of view. Test your mobile pages also using the Mobile-Friendly Test.

3. Content will not play

If your video is unavailable due to Flash issues, or Silverlight, or anything else that might keep a user from being able to just open the video and watch it with a touch, you’ll end up penalized for unplayable content. Be sure to use HTML5 standardized tags for your animations and use video embeds as mentioned earlier – like YouTube – which makes it playable on all devices.

4. Redirect problems

You’ll get faulty redirects if you have separate mobile URLs, usually when you’re not using a responsive web design. If you used the tips above this should not be an issue. Too many companies still send mobile users to the PC homepage, which still doesn’t help the mobile user. Responsive web design solves all those faulty redirects by not having to redirect in the first place. All your content will appear as it is meant to, regardless how it is accessed. There’s also a Smartphone Crawl Errors section in Webmaster Tools that can check for faulty redirects.

5. 404 errors

Again comes Smartphone Crawl Errors to save the day. You can check to see if your URLs are 404 errors, which – just like faulty redirects – can be solved using responsive design. Sometimes these 404s only show up on mobile, when they worked normally on a desktop environment, so be sure you check!

6. App issues

This works hand-in-hand with interstitials. If your business uses an app as a native part of your business, you need to ensure you’re not being penalized in your indexing potential just for promoting it. There’s ways to get the word out about your app and get others to download it without forcing them to do so, like using banners. Paid banners will help you to allow the app to appear, but as an offering, not a requirement.

7. Cross-Links that make no sense

If you are using separate mobile and desktop URLs (we hope this has convinced you not to) then you could end up with troubles with cross-links, where your URLs link to something irrelevant. If someone is looking at a mobile webpage, then gets linked to a desktop site, they aren’t going to an identical page anymore. Mobile should go to mobile, desktop to desktop.

8. Page is slow

There could be countless reasons why your page might load slowly on mobile, but the last thing you want to have happen since busy people won’t be waiting ages for your page to load. Though the problem can (at times) be on the user end, you want to ensure it’s not on yours. Using PageSpeed Insights from Google will help you see the issues that are causing your page to load slower, and help you speed things up as much as possible on your own end, for lightning fast load times and an ultimate user experience associated with your brand name.

Conclusion? Google Says. As long as they remain the kings of content, we’ll be listening to their sage advice and following the best practices rules of the trade. By making sure you follow these tips and watching out for mistakes to avoid, you can create a mobile experience for your users that will set you leagues ahead of the rest and give you that coveted “Mobile Friendly” listing in Google’s search results.