Mobile responsive is a must and Google says so.

What to walk away with in this article: Mobile responsive is a must and Google says so.  As a website developer myself, any website I create from now on will come out of the box doing so.  Lets learn why…

In my last article, I discussed “validation” and I named the article “How to Understand Proper Website Validation Techniques“.  You’ll note that #9 of the “Website Validation Techniques” points out mobile responsiveness and mobile design.  After looking at several websites around on the web, I felt it a necessity to point out this very necessary website must.  If you need help, I would be more than happy to give you some advice.  Feel free to contact me, but I digress.

Did you know Google shows mobile-friendly websites higher than non-mobile websites? Why do you think that is?

That part is really simple and it makes really good sense if you ask me.  Google shows precedence over those websites that aren’t mobile responsive.  They’ve built an algorithm specifically to do so.  If your website is not mobile responsive than you will miss out on those core users/buyers/readers, etc. that may see your company because Google will show “mobile-friendly” websites higher in Google queries.

Fun fact: I’ve found this especially true for local businesses whose users are searching for their local business when they are out in the town. You could reach those who may be finding your business through a query of your products near their location.  Most of the time, users will probably find your business from Google My Business, but they may go the extra mile to ensure there going to the right place by visiting your website too.

You may be asking yourself, really?  Google is now telling me that I need to update my website?  To put it bluntly, yes.

There is a sure fire way of knowing this yourself.  If you currently have Google Webmaster Tools tied into your website, you may have been notified via email from Google that Google wants to see a mobile responsive website.  Google sent the email out to all of its users who have been using Google Webmaster Tools and basically said, “Hey, were checking now to see if your website is mobile friendly. Your website was not”.  Ok.  They obviously said it much more professional, but you get the point.

This is actually what the email may have sent to you.  They would have given you real page numbers and percentages: “Fix mobile usability issues found on “websiteurl.com”.  Google systems have tested # pages from your site and found that #% of them have critical mobile usability errors.  The errors on these # pages severely affect how mobile users are able to experience your website.  These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users”

To help you find out whether or not your website has a mobile responsive website design, visit Googles mobile-friendly tester.  Here is the link, and if you would like to see how my dustinface.com website stacks up follow this link.

How do I make my website mobile responsive?

To be honest, for us to know some basic principals of creating a mobile responsive design, than we should probably know what mobile responsive really means.  To do this you’ll need to really understand what mobile responsive is, how it functions and some basic things to look for right now to see if your website is rendering properly with mobile devices.

The idea with mobile responsive design is that you should create a website that looks similar on a PC as it does with your mobile device.  The branding should be the same, the colors, the layout, etc. should be similar as well, but render on something smaller than a monitor.

Want to check to see if your website is mobile responsive? Whenever a user views your website on a PC they should be able to make the website larger by changing the zoom.  To do this quickly, hold down CTL and + together on your keyboard.  You’ll note that your webpage will begin to zoom.  If the website is mobile responsive you will notice changes to the page as the two buttons are pushed together.

You can also see a mobile responsive design on a website by viewing the webpage on your phone or mobile device.  You will note that if you flip your device from vertical to landscape that the layout will likely change.  This is because the webpage is now 100% of the width of the device and screen resolution.  What this means is that the no matter what type of device you have in your hand, the website will render properly.

Here are the main things you may notice whenever you would compare a mobile responsive design to a typical website design:

• Images may become larger or smaller depending on the full width of your devices screen.
• Items that were next to one another are now below each other.
• The long menu bar (primary navigation) may disappear at the top (header) but a new mobile menu is now visible.
• Images can be scrolled through if linked to a slideshow.
• The only swiping you do left and right are to:
  • Open the primary navigation
  • Scrolling through images
  • NOT to see the rest of the page

Going into methods and specific of how to create a mobile responsive design in your coding its much more difficult to explain in just one article.  I can however, provide you some key points if you are using a WordPress CMS to rebuild or to edit your current website.  I can also offer you some advice if you are knowledgable in the development of websites and that is to find mobile responsive design templates.

1.)   Mobile Responsive menu – Your navigation is at the top of your website, you’ll note this by seeing “Home | About | Contact | “ , etc. at the top of your own website.  This menu should be restructured and rebuilt specific to mobile devices where the screen is much smaller.  You’ll also want to consider whether your navigation is too heavy (too many navigational elements/links) for mobile device users.  Then, once the mobile menu is activated you can edit out some CSS specific to the header.  That way elements that were originally showing, such as the primary navigation inside the header are removed.  Once completed when viewing on a mobile device the header is not showing and hindering your websites mobile visibility.
Note: A standard website with no mobile responsive design will ultimately force a user zoom or scroll left to right to view or read additional text on your page.

2.)    Create containers and use the “float” element – I mentioned above that some CSS techniques specific to mobile responsiveness can be solved using float elements.  Basically your using CSS techniques with containers that are telling browsers to render your website a certain way.  This is similar whether you are using a PC or mobile device.  Your containers may be a certain width (a typical CSS command may look like this “width:100%;” on mobile devices), but having the float and widths within your containers with the float command tells the PC or device how to render this.  You may have seen a website with products under a slider with 3 or 4 squares outlining their products.  If you visit the same website and it is mobile responsive you may notice that the squares are no longer horizontal from one another, but instead vertical.  This would be a perfect example of containers and float elements.

3.    Know your screen resolutions – Understanding what size users typically use to render your website will give you a much better idea of how to style your website, where elements should go and how they will move if a user does view the website with a mobile device.  I actually view the websites I develop a little more in detail specific to each browser, operating system, mobile device and mobile phone.  You never really know and your website will more than likely render differently.  I still see Windows XP users and Windows XP visits in my analytics.  Honestly though, if you have Windows XP go buy a new computer or upgrade.  XP does not have the capability to render some really awesome stuff going on in the website design/development industry.

You can also check the resolution and website rendering in Google Chrome by inspecting the element.  Once you right click on the page and choose “Inspect Element” you can then shrink the window horizontally.  When changing the horizontal size you’ll notice in the upper right hand corner numbers.  Those numbers are actually the widths and heights of the website your currently viewing.  This is a perfect way to visually inspect the website as you would with mobile devices.  Remember some browsers may render your website differently, so you want to ensure you are still inspecting the website with all of the other browsers out there too (ie; Internet Explorer, Mozilla, Safari, Opera, etc.).

Side note:  If you use Google Chrome as your default web browser, awesome, me too, but check the websites especially with Safari and Internet Explorer.

Here is a mobile responsive fun fact:  Roughly 30% of your users are going to visit your website with their mobile devices.

My number is not a “figured number”, but statistically throughout the websites I manage as a freelancer these numbers are a good solid average to base your own interpretation on.

If you do not believe my number, than I am sure you will want to read this directly from Google on what they’ve seen on mobile-friendly websites and mobile devices specifically for searches: “In the USA, 94% of people with smartphones search for local information on their phones. Interestingly, 77% of mobile searches occur at home or at work, places where desktop computers are likely to be present.”

I know I’ve given you a lot to chew on here, but building websites correctly isn’t for the faint of heart.  If you are a website designer there are things you must be sure to include whenever you are building any website these days.  Back in the day it was a much different world in website technology industry, but now, things are different and you need to stay up on the demands or else you could be left behind.  We all know, that’s not good for business.

If you’ve found your website is not mobile responsive it is imperative that you consider an upgrade.  Although you may be looking at a complete redesign, if you are not using WordPress or another CMS system than this is a perfect time.  Feel free to contact me, I would be more than happy to go through what it may take to convert or rebuild your website to a mobile responsive design.