You no doubt are hearing the word “responsive” more and more when the conversation swings to website development and/or WordPress themes. It is quite possible that your site is already using a theme that is responsive. So, before making any changes, I suggest that you conduct some responsive website testing.
Responsive simply means that your site will respond to suit the type of device it is being viewed on. That is, it should look great on:
- a PC
- a mobile phone
- a tablet
Responsive Website Test
So how do you check if your site is indeed responsive?
- Check #1
With your site loaded, hold down the Ctrl key and tap the + key repeatedly.
Now do the same but this time with the – key.
As the page gets bigger and bigger or smaller and smaller, you should be able to see the number of words in a line shrink and grow to fit the screen width. In other words you won’t have a fixed number of words in a line.
- Check #2
If you prefer, you can use a responsive website tester such as this online tool.
Another tool I find very, very useful is How Responsive is Your Website.
You might get quite a surprise when you use this tool because it will show you exactly how your site would look if loaded on one of these mobile devices:
- small phone
- iPhone or equivalent
- small tablet
- iPad Portrait or equivalent
If you see a slider, you definitely know that your site is not loading correctly. But just eyeballing the results will tell you immediately.
What Can You Do to Make a Website Responsive
If your site is non-responsive, there are a number of solutions, not all of them easy.
- If your site has been created by a web developer, then you would need to discuss the options available to update your site.
- If you have a WordPress site, you can look at plugins, but this is not an easy find because themes vary so much. So it is not a case of ‘one size fits all’.
- You can upgrade your WordPress child theme (many companies are releasing updates to their child themes to make them responsive).
If you have purchased a theme, then this is probably the easiest solution of all.
- You can tweak the code yourself using this tutorial (but this is very tricky if you are a non-coder).
- You can start with a new theme (most themes being created now are responsive).
You might be wondering if it is worth the effort. Well you only have to study your analytics data to see the amount of traffic that is coming into your site from mobile devices.
And Google is judging sites now according to whether or not they are responsive.
Using the tool above, I was quite happy to see that my site, www.brightgifts.com, is indeed responsive (as a result of the theme updates) but disappointed, at the time of publishing this post, to see that this blog, websitetips4u.com, was very non-responsive.
So, I need to get to work and fix it. My steps that I follow, as I convert it, can be the input for an upcoming tutorial.
Update: Since publishing this post, I have converted this blog into a responsive mobile site. It is still undergoing some tweaking but is definitely loading more quickly and certainly displays more readily on a variety of mobile devices.
Once you have either converted your theme or purchased a new responsive theme, then you will want to upload your own logo or keep the logo that you have been using all along.
But, surprise, surprise, your logo won’t be automatically rendered as responsive for you. This means that when you run a responsive test again, using the tools mentioned above, you will most likely find considerable logo overlapping on most of the mobile device tests.
For example, when I first loaded a new logo on this site, the responsive tests failed miserably for the header section.
You can see that the logo is already being chopped off at the right in the Nexus test:
And the truncation is even worse with the iPhone test:
But there is a solution. In fact, a search on the web will uncover a number of different approaches, some sound some not so effective. But here is the solution that I have implemented on this blog. It is an excellent tutorial by Jessica Barnard that shows you how to make your logo responsive for your Genesis theme.
I found that my child theme was a little different from the example in Jessica’s tutorial but she covers all contingencies very well so I simply had to read the alternative options provided and I was off and running.
Results After Making Logo Responsive
The Result? Well here it is. Again this screenshot shows the result for the Nexus test but the results are very different this time as you can see:
And this screenshot shows the result in the iPhone test:
If you are looking for a different approach, or you are not using a Genesis theme, you could check out Adaptive Images. or this post on CSS Tricks which explores the wide range of solutions that are possible.
Responsive AdSense Ads
If you have monetized your site with AdSense ads then you might find that some of your graphic ads appear misaligned when you convert your site to a responsive theme.
Fortunately, we now have Responsive AdSense ads. This means that a different sized ad will be displayed, depending on the device your site has been loaded on.
Responsive AdSense ads also have the extra advantage of loading more quickly. So, with respect to CTRs, it is a win-win. Just remember that this type of AdSense ad should be used only on a site that has a responsive theme.
Let’s know if you have already made your website responsive.
If so, what did you do to make it responsive?