Clicky

Tutorials

How to Improve Mobile Responsiveness of Website Using Tools

With more and more internet users accessing websites on their mobile devices, it’s never been as important to ensure your website is usable by this growing segment of the global population. However, the benefits of making your website mobile-friendly aren’t just related to improving the user experience. If you fail to provide higher responsiveness of the website, then your site could also suffer a dip in the number of visitors it receives.

Google is set to make mobile-friendliness much more of an important factor when determining where to list websites in its search engine. This means failing to ensure your website is optimized for smartphone and tablet users could have very real negative SEO consequences for your website and online presence.

So with that in mind, here is a selection of different tools and services that can not only tell you whether your website is mobile-friendly or not, but also give you the ability to experience your websites as a mobile-user would.

Is My Site Responsive or Not?

The tools detailed in this article will do a lot more than simply tell you if your website is mobile-responsive or not. They also do a good job of emulating the user experience of the mobile visitors to your website.

However, if you just want a quick yes or no to the question of whether your website it mobile-friendly or not, then Google has created a handy tool that will tell you in an instant. Simply visit the relevant Google webpage and enter the URL of your website to run it through the Google Mobile-Friendly test.

Responsive Testing Tools Google Mobile-Friendly Test

Looks like I’ve still got some work to do on my website. Thankfully Google has published some documentation for WordPress users who want to make their website mobile-friendly. Alternatively, you can simply install a responsive WordPress theme, or enable the mobile theme from the Jetpack plugin.

The Browser Testing Tools

Responsive Testing Tools Chrome DevTools

If you are using the Google Chrome browser, then you can use the built-in Developer Tools feature to emulate a range of screen sizes, through which you can view the website you want to test.

This feature of the Chrome Developer Tools can be accessed by loading up the website you want to test, right-clicking on it, and then selecting ‘Inspect element’ from the menu. You can then click on the ‘toggle device mode’ icon, before choosing from the selection of devices. The list includes tablets and smartphones and is fairly up to date, with the latest iPhones, but not the newest handsets from Samsung.

While this tool is fast acting when it comes to resizing websites, the wealth of other features might be overkill for simple testing.

For quicker access to a responsive design testing tool, it might be more convenient for you to install a purpose built browser extension. These extensions usually add a button or menu item to your browser, which allows you to quickly change the viewport size to match common mobile-device screen dimensions, such as tablets and smartphones, or even those of specific devices.

Responsive Testing Tools Mobile-Responsive Web Design Tester

The Mobile/Responsive Web Design Tester extension for Chrome is a good choice. It’s easy to use and, at the time of writing, includes many of the most popular and latest devices.

Clicking on the browser icon, and then selecting the device, opens a resized browser window displaying your website of choice. You can also enter custom dimensions to test devices not listed.

For those looking for an alternative for other browsers, the Viewport Resizer responsive design bookmarklet covers Firefox, Opera, Safari, and Chrome. However, while it doesn’t include the latest mobile devices, it does let you enter custom dimensions.

The Website Testing Tools to Check Responsiveness:

Responsive Testing Tools StudioPress

There are many websites out there that let you enter the address of your site, and then see how it renders on a range of screen sizes. However, as this is a WordPress blog, the responsive testing tool on the StudioPress website – the makers of the Genesis Framework and many of its child themes – is our recommended choice.

The device or screen size choices might be a bit more restrained compared to some other online options. However, the service is fast and allows you to see how your website will look through a range of viewports simultaneously.

The StudioPress testing tool is very easy to use. Simply enter the address of the website you want to examine, and then select either screen width or device size to view the mobile-versions of your website.

The WordPress Plugin Testing Tools

Responsive Testing Tools WordPress Plugin

Installing a plugin on your WordPress website is another option for carrying out mobile-responsiveness testing. This option is perhaps best for developers and those working on the design of a website. This is because it provides constant access to the testing tools, as well as being available offline when working locally.

Installing one of these free plugins can also be helpful to bloggers who want to ensure that each post they publish will look great on all manner of screen sizes. With the Responsible plugin, a selection of buttons are added to the WordPress admin toolbar. These buttons will resize your website in order to match a number of pre-defined device sizes. You can also enter custom values for the dimensions of the viewport.

Other mobile-testing WordPress plugins include Easy Responsive Test and WP Front End Developer.

Conclusion

As you can see there are a number of options for testing the mobile-responsiveness of your website.

The website testing tools are probably the best choice for those who want to just quickly test their website to see how responsive it is. There is nothing to install here: simply visit the website, enter the URL you want to test, and then view the results.

As the browser testing tools don’t require an internet connection, it makes them a better choice for those who are carrying out development work locally. Resizing the viewport is never more than a few clicks away, and you get access to some great pre-defined screen sizes.

Installing a responsive testing WordPress plugin on your website is a good way to add a functional reminder for yourself and other users to check how the content being published and design choices being made will look to mobile visitors.

With Google increasingly working on encouraging website owners to focus more on catering to mobile web users, it’s good to know there are plenty of tools out there to help you test the responsiveness of your WordPress website.

If you have any questions about mobile design testing, or how to make your WordPress website responsive, please leave a comment below.

Additional Reading: Using skeleton screen to enhance UX

Share this Story
  • Responsiveness
    Tutorials

    How to Improve Mobile Responsiveness of Website Using Tools

    With more and more internet users accessing websites on their mobile devices, it’s never been as important to ensure your website is ...
Load More Related Articles
Load More By Joe Fylan
Load More In Tutorials

2 Comments


  1. Kakoma

    April 22, 2015 at 12:21 pm

    Great suite of tools. Thanks

    Reply

  2. MATT MAGGEW

    April 28, 2015 at 3:51 am

    Thanks!

    I was recently introduced to MobileTest.me by a friend. I really like it but there is a plethora of
    options out there.

    • http://mobiletest.me

    Still, my favorite is Screenfly by QuirkTools plus the bookmarklet tool out there on the web.

    • http://quirktools.com/screenfly/

    Reply

Leave a Reply

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

Join Over 50,000+ Subscribers

Interested In
  •   
  •           
  •                      

Search