Wanna buy a WordPress theme or using a theme ? You should know about the responsiveness feature of a theme. Now a day’s growth of mobile internet usage has exploded like anything. People prefer to use mobile rather than desktop. They just want to access the website on their device in easiest way. They don’t want to click on tiny elements or wait while the page is loading with heavy stuff. It is always a good practice to make your website responsive. So lets see,

How to check a WordPress Theme for Responsive Web Design at Client end?

There are several simple ways to check the responsiveness of a WordPress theme. Before that we need to know some basics of responsiveness and need of Responsive WordPress Themes.

What is Responsiveness?

Responsiveness is an approach of building website suitable to work on every device and every screen size, no matter which device you are using whether it is small or large, mobile or desktop, your website should be adjustable with each screen size. In a simple way, a responsive design should provide consistent user browsing experience no matter what device they are using.

Responsive Web designs are the need of the time as 2015 U.S Digital survey says: Smartphone usage is up 394 percent, and tablet usage is up a whopping 1,721 percent as these platforms now combine to account for 60 percent of digital media time spent.

Benefits of Responsive Web Design:

  1. Users get full experience of your website content irrespective of the device they are using.
  2. Responsiveness of website serves better SEO thus helping you get better search engine rank.
  3. You can get a compact form of your original website layout.
  4. Most important it makes website content easier to read on all sort of devices.

How should a responsive WordPress theme behave on devices?

Basically, there are 4 screen types – desktop, laptop, tablet & smartphone. If you are using a WordPress theme, It should look same on each variant screen. Following are some basic points which matters in responsive theme,

1. The width of the site must re-size constantly as the screen width re-sizes.

2. The responsive layout should apply to all content types in the site, not just pages or posts.

3. Nothing should disappear or end up hiding behind any other element, at the break-point. Breakpoints are set at the points where the design of screen changes according to width of screen.

4. Content should be very easy to read on all device types. The text should not display in tiny or huge format.

Elements of the theme we should check while checking the theme for responsiveness

Above points are some basic points, while checking the responsiveness of the WordPress theme you should check the behavior of all the theme elements on different devices. Elements like menu, sidebar, main content, grid, footer, slider, tabs, images, font etc all matters while testing theme responsiveness.

Menu : Navigation menu should not take up the whole screen or obscuring content and will ensure users can click on navigation links using a finger or thumb.

Main Content : Your content should not hide from user on mobile devices. It should be easy to read and easy for people to find new and related content on all devices.

Images : Images should display in smaller size without losing its quality.

Fonts : Sometimes you may find that your font displayed on devices are inconsistent, takes too much time to load or just don’t read well. It should not happen in responsive theme.

Slider : Your slider should change its size as we re-size the screen. It should be adaptable with each screen.

Footer : Footer widgets should be next to one another when the screen is big but should be below one another on smaller screens.

Chrome extensions can be used to test the theme’s demo url for responsiveness.

There are various ways to check the responsiveness while checking the demo of a theme. Luckily there are options available to do so in few steps. You can use chrome extensions for that purpose. It is very quick and easy way to test responsiveness of a theme. You just have to add chrome extension on browser and while checking the theme demo test it on different screen by selecting device in extension. Here I have tested responsiveness of “Divi WordPress Theme” by Elegant Themes using chrome extensions and using Chrome developers tool.

Below given are a set of responsive chrome extensions and some screenshots that you might find useful during testing WordPress theme :

1. Responsive Web Design Tester :

Responsive Web Design Tester is a well known and efficient chrome extension used for the testing of responsiveness of a theme. Using this you can easily test your web design on different devices. It also uses user agent, but it does not render web pages in the same way as on mobile devices. Primarily it is for developers for quick preview of web design. It supports external as well as internal network(localhost). You can even add your own device if you want to.

Nexus 7 landscape Screen

2. Mobile/Responsive Web Design Tester :

Mobile/Responsive Web Design Tester extension allows you to test your web design against common mobile or any devices by emulating the user agent & screen resolution. It easily switches between portrait and landscape mode. You can test multiple devices at the same time. It has a unique feature that it not only emulate the resolution, but also the devices user agents.

Galaxy S6 Screen

3. Viewport Resizer:

Viewport Resizer is yet another extension to test your designs with ease. It is an open source. A developer can refer the code or modify in order to add some new features. It also comes with different device sizes. It has handy plus and minus buttons to change custom screen dimensions, on either side for rigorously testing media query breakpoints.

Tablet Screen

Chrome Developer Tools can be used to test the responsiveness of the demo url.

You can also use Google developer’s tool to check whether that theme is responsive or not while checking it’s demo. If you are unaware of using developer tool then follow following steps,

  1. Click F12 or open Chrome’s menu > More tools > Developers tools.
  2. To activate device mode, simply click the device icon in the top left corner of the Developer Tools Window.

A toolbar will appear from where you can select a device in which you want to check responsiveness of the theme. There are few more options other than select device like screen resolution, Display rotation between landscape and portrait, Set the device pixel ratio, Fit the display within the visible viewing area or display, Set it at full size etc.

Developers Tools

Conclusion: For a website it is more important to have a responsiveness in order to get a traffic. Besides traffic, responsiveness of a website template is also important to perform better in search engines like Google. There are so many themes are available for free as well as premium theme which comes with Responsive Layout.

Leave a Reply

Your email address will not be published. Required fields are marked *