Responsible Plugin Adds a Responsive Testing Kit to the WordPress Admin Bar

January 2014 marked the first month that mobile traffic has overtaken PC traffic on the internet in the US, accounting for 55% of Internet usage. As mobile traffic is on the rise, designing in the browser has become more popular, as it offers better tools for testing sites against various devices.

Responsible is a plugin that adds viewport resizing to the WordPress admin bar with support for six different device sizes. If you’ve ever used a browser bookmarklet in the past to test how a site appears in different devices, the Responsible plugin essentially replicates that same experience within the WordPress admin. It adds a little viewer icon to the admin bar, which refreshes the page with the viewport resizing panel.

responsible

Clicking on the device icons will automatically resize the site, whether in the admin or on the frontend. Below is an example of viewing a website at iPhone dimensions:

responsible-test

Responsible includes the following common viewport sizes for testing, in addition to custom sizes:

  • Mobile: 320×480 (Portrait), Ratio: 2:3
  • Apple iPhone 5: 320×568 (Portrait), Ratio: 40:71
  • Small Tablet: 600×800 (Portrait), Ratio: 3:4
  • Tablet (e.g. Apple iPad 2-3rd, mini): 768×1024 (Portrait), Ratio: 3:4
  • Widescreen: 1280×800 (Landscape), Ratio: 8:5
  • HDTV 1080p: 1920×1080 (Landscape), Ratio: 16:9

If you prefer using the the tool as a bookmarklet, the plugin comes with a filter that allows you register a custom bookmarklet. You can then generate your own bookmarklet using the Viewport Resizer tool.

Responsible is perfect for designing in the browser with WordPress or for some quick responsive testing when you don’t have access to all the different devices. Download it from WordPress.org or add it to your site via the admin plugins screen.

9 Comments


  1. This sounds like a great way of gently nudging a client to think about mobile devices. Their MS Word instincts always seem to kick in and when I go back to perform updates I see they’ve tried to cram as much as they can into a menu or a text widget or whatever, completely forgetting that people will be looking at their site on a phone.

    Report


  2. I’ve been using the bookmarklet. It’s great to see it’s converted into WordPress plugin!

    Report


  3. Thanks for the great review! really chuffed :)

    We find it’s a great tool for getting site editors to consider their content on a range of devices. It is also useful for us when developing a site. One extra bonus is that your developer tools remain at a decent size whilst viewing the smaller screen sizes.

    I hope you all find it useful and a big thanks to Malte Wassermann for the bookmarklet.

    Report


  4. While Firefox (and other browsers) have several responsive plugins, it is difficult to get a client to install and use them. The advantage here is it is integrated into the client’s website and makes it easier for the client to understand the value of a responsive theme or mobile design.

    Report


    1. pretty sure thats just a setting in the general category, maybe you need buddypress to see that option though.

      Report


    2. I am wondering why you would want to offer this to public visitors? It is a testing tool for editors/developers and I cannot see many situations where it would be useful to a site visitor.

      Report

Comments are closed.