Top 7 Mistakes With Mobile Friendly Web Design

HigherVisibility Publisher Channel Content by
HigherVisibility



mobile friendly Web design

Unless you’ve been staying away from the Internet these last few weeks, you know that on April 21 Google is going to be rolling out a mobile optimization algorithm (and if you need more information, we’ve covered the announcement here). According to Google’s Zineb Ait Bahajji from the Webmaster Trends team, this is going to be one of the biggest updates we’ve seen from Google to date in terms of how many people will be affected — bigger than Panda and Penguin — although no specific number was given.

While April 21 is the day that’s since been labeled the “Mobile-Pocalypse,” it’s important that small businesses start putting mobile best practices into action immediately. The efforts you’re making now will matter come April 21, and if you wait until just a few days before, it could be too late. Fortunately, Google is making this update very easy for us by telling us exactly what mistakes most businesses are making when it comes to mobile.



The 7 Most Common Mistakes Webmasters Make When Optimizing for Mobile

As discussed above, Google actually created a guide that outlines all of the most common mistakes that they find Webmasters make when they try and get their websites mobile-friendly. And so, without further ado, below are the top seven mistakes straight from the horse’s mouth along with links that take you to a full report for each specific point:

Blocked JavaScript, CSS, and Image Files

If the Googlebots are unable to access JavaScript, CSS, and image files, indexing is going to be harder because the Googlebot is not able to see your site like the average users. This usually occurs if your site’s robots.txt file disallows crawling, which again, poses a problem for indexing and will bring down your rankings:

How to fix it: Use the Fetch as Google feature in Google Webmaster Tools so that you can see how a Googlebot is seeing your content. You should also check your robots.txt in Google Webmaster Tools and test your mobile pages with the Mobile-Friendly Test. All three of these options will help you identify any indexing problems.

Unplayable Content

The last thing Google wants to see is a video that is unavailable to users because that is an annoying experience. Many content types, such as Flash, do not work on all mobile devices and therefore cause unplayable content.

How to fix it: Use HTML5 standard tags for animation and use video embedding that is playable on all devices. Google Web Designer can help make it easy to create animations in HTML 5 so that your content is more widely accessible.

Faulty Redirects

This happens most often if you have separate mobile URLs because it forces you to redirect mobile users on each desktop URL to the right mobile URL. Unfortunately, many companies do this wrong and send every mobile user to the desktop homepage, for example, which is incorrect because that isn’t what the mobile user asked for when he/she clicked.

How to fix it: The solution here is easy: Use a responsive web design. This will automatically serve the same content for both desktop and smartphone users. You can also check the Smartphone Crawl Errors of your Webmaster Tools and you can simply see if any faulty redirects were detected.

Mobile-Only 404s

Sometimes companies have their websites setup so that users can see a page on a desktop, but when they try to visit that same page on a mobile device there is a 404 error. The key here is to make sure that you have an identical page that can be served on mobile (see number 3 above) and then redirect users to that URL instead of serving a 404 error.

How to fix it: Check the Crawl Errors report in Webmaster Tools and look at the smartphone tab to see if any URLs are 404 errors. Once again, a responsive Web design should also fix this problem.

App Download Interstitials

If your business has a native app, it’s important that you make sure you don’t have any indexing issues when promoting that app. In other words, make sure that users can still see the page’s content and not just a large app advertisement. Visit the link above to see a great screenshot.

How to fix it: Use a simple banner to promote your app inline with the page’s content. Google recommends Smart App Banners for Safari to help.

Irrelevant Cross-Links

It makes sense that if you have mobile URLs and separate desktop URLs to try and link to each on the opposite platform. Unfortunately, many companies are linking to URLs that are irrelevant, such as the homepage you would see on a desktop when someone is reading about a product on mobile.

How to fix it: Always check your links to make sure they’re pointing to the most relevant (or identical) pages!

Slow Mobile Pages

This one is pretty self-explanatory. If your pages are loading too slowly this is especially problematic for mobile search because people are usually on the go.

How to fix it: Use Google PageSpeed Insights to see not only what might be causing your pages to load slowly but how to fix the issues.

The Takeaway

In the end, anything you hear from Google should be your first move. If you were unsure how to even begin preparing a mobile presence, start with the tips above and go down the list. Once you’ve fixed some of these common mistakes, you should be able to see clearly other things you can do to enhance your efforts. Do you have any thoughts on some of these tips from Google? Are you ready for the mobile update in April? Let us know in the comments below.


Google Mobile Photo via Shutterstock


More in: 14 Comments ▼

HigherVisibility HigherVisibility is part of the Small Business Trends Publisher Channel, offering a full range of professional interactive marketing services. The mission of HigherVisibility is to provide clients “Valuable Solutions with Visible Results.” HigherVisibility works with companies of all sizes, offering advice on topics ranging from keyword research to algorithm updates.

14 Reactions
  1. Make sure you have several people, preferably not employees, check the mobile site from different places and with different devices & operating systems. A few checks will usually uncover the majority of issues before customers start complaining.

  2. One comment on responsive web design. There’s an interesting question here: Why are Ebay, Amazon and – yes – Google themselves NOT using responsive design? – I think the answer is pretty simple: Because if you take mobile seriously and want to get most out of it, you still need a dedicated mobile website and, yes, a native app (if you are really looking at customer preferences). –

    What generally does not seem to be known is, that there are many services (such as mine) that offer a fast and cheap way to go mobile respecting all mobile challenges, including the above mentioned. Just saying… 😉

  3. You are absolutely true about website speed. It is one of the most essential tactics to facilitate UX. Unfortunately, it can not be enough to check Google Page Insights, though these recommendations are usually pretty good. Here http://www.motocms.com/blog/web-design/increase-website-speed-tools/ you may find nice advice on how to boost website speed, which resources and tools to use on the regular basis to control your site speed.

  4. Site Speed vs Responsive Design: Which is Important?

    • JayRO-Greybeard

      Re: Site Speed vs Responsive Design – This is not an “or” choice. They are both important. It’s fairly easy to have a site that is both quick AND responsive. Easiest method is to keep image and multi-media content as minimal as possible.

  5. I believe a responsive web design is the best option for a comparatively smaller site A RWD makes things easier to manage, do not include any additional overheads like canonical or 301 redirections etc and this is comparatively budget friendly than a mobile separate site or an App. Always test the site using Google Webmaster’s mobile site testing tool and check the usability errors on WMT. Site speed is another big thing and should be taken care of properly.

  6. Can ‘table’ structure effects or delay rendering in mobile devices?

  7. One of the best ways to make sure your WordPress or Joomla site is mobile friendly, try using a paid template like S5, YOO, or Rocket. Check out my site at http://www.trigwebdesign.com, I use a YOO and have a great mobile version. Also, try to avoid all Flash, you can hide flash elements in your mobile version with some simple CSS, or through your theme, if you have an advanced one.

  8. Very interesting read! Now that more and more people are viewing websites from their mobiles, it is so important that all websites are mobile friendly.

  9. Great post, we have just changed over to https so relevant information. Thanks again!