How to Make Your Blog Responsive

Many of my blogger friends asked me how to make their blog responsive?  They often do not realize the importance of responsive blog to different device and browsers. The result is they lose a major percentage of readers and traffic. In this post, I will explain the benefit of the responsive blog and how to achieve it.

What is the Responsive blog?

Responsive blog means you blog adapt to a different browser. You do not have to create a different site for different devices; the content will be automatically resized and rearranged accordingly.

responsive device

Why is a Responsive blog required?

The internet is now reaching to a bigger readers base and they use all type of devices to access it like a smartphone, tablet, laptop or PC. You never know if your reader is using desktop or smartphone to access your blog. Unless your blog is ready for different devices, you will lose the visitors and traffic.

Let’s see this Infographic first:

Phone growth
Click on the picture to see complete Infographic

So as you can see the number of mobile users and share are increasing in last year. You need to make sure your blog is accordingly adjusted and ready for any type of the devices.

So what are the benefits of Responsive blog:  [stextbox id=”info”]

  • Your blog will work with all devices
  • Your blog will work on different type of browsers
  • Google will consider your blog mobile friendly and rank better in mobile search
  • Your readers will feel easy to navigate on any type of the devices
  • You will get more shares and traffic for your blog
  • You will be trusted in blogging community[/stextbox]

How to get the Responsive blog?

# WordPress Responsive theme 

The easiest way is to switch to a WordPress theme which is built with the responsive feature. Ninty percent of the time these themes are paid one and you have to buy it. These themes designers regularly make changes to the themes and make sure it works with every WordPress release.

8145106535_4519061bc6_z

Paid responsive themes always work with every devices and browser. You do not have to work technically to manage your themes or code to make it work on every device. As I said earlier, a blogger primary job is to work on content creation and not on managing design or tweaking the code.

If you are working with free WordPress theme and your blog is not responsive, doing it by yourself will be quite difficult. You also need technical knowledge of HTML, CSS and PHP to work with WordPress theme.

[stextbox id=”info”]My suggestion- If you do not know CSS and PHP, do not put much of time in making your blog responsive. Get a paid responsive theme.[/stextbox]

Recommended Responsive theme:

[table id=4 /]

 

#Using WordPress Jetpack Mobile theme –

WordPress Jetpack plugin comes with the mobile theme. You just need to activate it and then configure some options.

mobile themes

You can’t customize much using this option, but your blog will look good on all type of devices. For my blog, I have chosen this option.

 

How to check if your Blog is responsive?

To check how your blog looks on different devices, you can use online emulators like Mobiletest and Responsinator. You can also use Google mobile-friendly test to see if Google considers your site mobile friendly.

emulator

I would suggest going through below blog post for more info about how to test your Responsive blog:

How to Test Your WordPress Website for Responsive Design

How to fix the issue with your blog?

Once you discover the issues with your blog on different devices and browser, it is time to fix the issue. The issue may be different depend on your blog themes, but I would mention some of the common problems.

The Pictures on your blog is not resized – 

This is a very common problem with most of the blogs. It happens mostly when your pictures do not fit in smaller size devices and crop from the right. This makes your pics looks ugly.

media

Fix: There is two probable fix for this issues.

  • Reduce the size of image in the original post
  • use plugin like RICG Responsive Images to automatically adjust the size of the image according to device resolution

The menu looks ugly on small devices – 

You can see this issue when your blog’s menu looks longer in small devices and create a horizontal scroll.

Fix:

  • Remove menu completely for mobile devices. You can modify CSS code to achieve it
  • Use some WordPress plugin to create mobile menus like ShiftNav – Responsive Mobile, WP mobile menu, Slicknav mobile menu etc

Horizontal banner ads do not resize for smaller devices –

Again very common issue if you use Google Adsense within your post or in header and footer. It creates a horizontal scroll bar in your blog and makes it difficult for readers to view.

Fix:

  • Disable the ads in mobile devices (Recommended)
  • Resize the ads for mobile devices (requires code update in CSS theme files)

Embed videos like Youtube does not resize itself in small devices – 

Very similar problem like images. Your video looks longer than a paragraph and makes it difficult for readers to view.

youtube

Fix:

  • Reduces the width of the video in original post
  • Use WordPress plugin like Responsive Video Embeds to resize the videos for different devices

Here is a small video explaining how to disable or resize element of your blog using CSS code:

 

There are a lot of other issues may happen to a WordPress blog depending on the type of theme you use. I would recommend running a responsive check on your blog to verify possible issues with your blog.

You need to find solution one by one with possible issues you find.

My Recommendation:

If you are having too many issues with your blog themes, I would suggest switching to paid responsive themes. Or else If you want to continue with the free or existing theme, try to debug and resolve issues one by one on mobile devices. [stextbox id=”info”]The future of the Internet is the smartphone, tablet and small devices. Unless you make your blog compatible on these devices, you will lose visitors, traffic and page ranking of your blog.[/stextbox]

 

I would love to hear comments from you. How you check whether you have a responsive blog? Once you found responsive issue with your blog, how you resolve it?

  • >