Posted June 16, 2015
Cathy Sirvatka
(Note: I wrote most of this on April 21 when Google began implementing their changes. However, rotator cuff surgery made completing it difficult. Time to get it out there now – it’s still valid!)
Mobile-friendly, or responsive, websites are the law… at least as far as Google is concerned.
G-Day is here. That is the day Google implements their newest algorithm which will favor websites that are mobile-friendly, or “responsive.”
If you have a website that has not been updated in the last couple of years, it may not be mobile-friendly and your website will actually move down in its search ranking.
Click image to read Google’s announcement.Why are they doing this?
Google is actually doing a service to web viewers to make their website viewing experience the best possible. Viewing a website on an iPhone 5 that was created to look good on that small screen is a much more pleasurable experience than seeing a large layout made for a desktop monitor squished down to fit.
These non-responsive websites appear too tiny to read or to “click” a button with your finger. Yes, you can enlarge the page in the screen to see better, but this creates a negative experience for the viewer. You want your viewers to have a pleasurable experience on your site no matter what device they are using.
You may feel that this is a slight against you, the business owner, and I’ve seen a lot of headlines that make it sound that way. But it’s really not. It’s an enforcement of a standard that is here and now. We have had smart phones that could surf the web since 2007 and…
64% of American adults now own a smartphone of some kind,
up from 35% in the spring of 2011. – Pew Research Center (April 1, 2015)
Terminology
Responsive
A website that is developed to fit in all various device screens that are used today is called responsive. This sometimes means some information is removed; the layout will be different; text and navigation will be larger so you can read it, hopefully without having to enlarge the screen. This website’s look will be different depending on the size of the screen, and whether it’s landscape or portrait.
Adaptive
Many people might think their website is “mobile-friendly” or “responsive” when it is actually adaptive. A website is called adaptive when it will fit the entire web page into any screen size without making you have to scroll from side to side. Yeah, it’s all there, but… you’d have to have Superman’s vision to read it. So you have to pinch and move the screen around to read the content. This is especially bad on the older, smaller phones. It’s just not a good experience.
Examples
This is a non-responsive, non-adaptive web page. Notice the horizontal scroll bar. Blech!
This is an adaptive web page. You can see the page laid out just like on a large computer screen, but … so, so tiny.
This is a responsive page. Laid out differently; navigation has become a small drop-down menu to take up less space and be easily accessed; the type is larger and the layout more simple.
So what do you do?
You need to determine if your website is responsive or not. If you are not sure, here’s how you can tell.
- One way to tell is if you view your website in a browser on your desktop computer (or laptop), and adjust the width of the browser window smaller, you should see different layouts that fit the new size. No horizontal scroll bar should appear, unless you have used a WordPress plugin like I have; this test won’t work for that. My website currently uses a plugin called WP-Touch which converts the website layout to be responsive. It only appears that way on the actual device.
- Another way to test your website is to go to Google’s Mobile-Friendly tool. You can enter your web address and Google will analyze your site. Within 30 seconds or so, depending on the size of your site, the tool will return results that either congratulate you on your mobile-friendly website, or tell you it is not mobile-friendly.
https://www.google.com/webmasters/tools/mobile-friendly/
Your website must be responsive to all the devices in use today, from smartphones to tablets to laptops to desktops.
Okay, so what if your site needs to be updated. If it’s old enough that it isn’t already mobile-friendly, then it’s way past the time it should be updated anyway. Responsive WordPress themes have been available for years now.
It’s really important to view your business website as an integral part of your marketing plan, and you should treat it as such with by keeping a website budget available every year. Even if you don’t need a complete overhaul, you should be updating the content at least quarterly. And if you have a blog you should be writing articles, at the very least, monthly.
If you have a Flash-based website, you definitely need a website redesign. Flash cannot be viewed on any of Apple’s mobile products (iPhones, iPads). It is very common for voice over professionals to have old Flash websites created in the mid- to late 2000’s. It was very fun and animated and trendy. But the cute, kitchy look of Flash sites is now out of trend, as well as not being search engine optimized and not working on the iPhones and iPads.
Consider this: Adobe stopped supporting Flash for the web shortly after Steve Jobs said he would not allow it on his Apple products.
How Do You Make Your Website Mobile-Friendly (Responsive)
Either Apply a Responsive Theme or Redesign Your Site
It is probably worth your time and money to have your website professionally redesigned and developed. Purposefully developing your website to be responsive will make a really distinctive impression in the web world. That would be the best choice.
You could apply a plugin such as WP-Touch which will suffice for now, and Google won’t down rank you.
There is another plugin called Duda Mobile (as in mobile phone, not an automobile). This plugin essentially creates a second website based off your main site, but it gives you complete control over how each page will look. It comes with a price (monthly fee or purchase outright), but it’s affordable. The folks at Duda Mobile assure us that this “second” website does not get you in trouble with Google.
There was time when developers literally made two different websites – one for the computer and one for mobile. But having duplicate content on the web meant getting penalized by Google. But applying Duda Mobile to your existing site will not cause any issues, and in fact, will help you out if your site isn’t responsive.
I find the best way to make a website mobile responsive is to use Bootstrap 3.0 There is only one free Bootstrap GUI that I found which is Pingendo. It is basically drag and drop but shows you the Bootstrap code as well which you can modify.
Pingendo has helped me learn the Bootstrap code so I rarely use the drag and drop elements anymore because it’s not 100% accurate but the code generation is.
There are alot of free Bootstrap plugins on the internet to spice up your responsive design.
Norm, you are absolutely right about Bootstrap. It’s a strong, tried and true framework. I’m seeing it utilized more and more.