The Responsive Web Design Bookmarklet

Contributing Editor

Responsive Web Design — or RWD — has a number of benefits:

  • When used well, your site can be viewed on any device no matter what the screen resolution or orientation.
  • It’s an inexpensive solution compared to multiple web sites or native mobile apps.
  • It’s easy and fun. All the cool kids are using it.

While RWD techniques are well known, there are relatively few tools to help developers. Many are similar to Matt Kersley’s Responsive Web Design Testing Tool which show a single page in a variety of sized iframes. It’s useful, but limited to live websites. You can’t (easily) point it at a web server running on your own PC.

Ultimately, most of us resize our browsers an approximate mobile/tablet resolution. It works, but you’ll spend more time resizing windows than writing code.

Fortunately, French web developer Victor Coulon decided to address the issue with his free RWD Bookmarklet. Visit the page and drag the link to your browser’s bookmarks bar.

To test it, visit any responsive website. This one will do. Now hit the RWD Bookmarklet link — a toolbar will load where you can select typical tablet and mobile resolutions:

RWD bookmarklet

Click the icon which looks like a calculator and you’ll see a keyboard view. It’s a unique feature and one designers rarely consider when they’re creating forms in a responsive design.

RWD bookmarklet

While the views are obviously Apple-centric they apply to many mobile and tablet devices. The bookmarklet also works on sites developed on local or intranet servers (assuming you have web access to load it).

The RWD bookmarklet is a great tool. It may not be technically sophisticated or revolutionary, but it’s incredibly useful. Thanks Victor!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://markadrake.com Mark Drake

    It’s certainly a great tool. Good job Victor and thanks for sharing your work.

    Now the “I wish” part right? We honestly need tools that can emulate the rendering engine of these various browsers (Android has an SDK you can d/l at least, iOS you’ll have to have a Mac with XCode). Does anyone know of solutions that actually go the extra distance?

    On sites that have heavy mobile traffic, testing your CSS media queries aren’t enough. You should still take the extra time and effort (or outsource) the testing of your site in some of the more common or popular devices – tools such as Victor’s can miss bugs and typically don’t emulate the behavior of the device.

    For example – click events are still triggered instead of using their touch alternatives.

    • http://www.facebook.com/tameka Tameka Thomas

      Hi Mark.. Nice comment.. My name is Tameka, i just registered for an online course on programing and graphic designer. But its not really easy understanding it first hand.. You sound like someone who is a pro in the field.. I am hoping we could be friends, so i can enjoy the benefits of your company cause i bet it will always be productive. Please reply me @ tammy0147@yopmail.com … i don’t want my email exposed here.. That’s why I’m choosing that for now.. Hoping to hear from you there …

      Thanks.
      Tameka.

  • http://www.walliscommunications.com Toby Wallis

    A simple screen/window tool on http://www.walliscommunications.com/screen.htm – measure usable window size, open a URL in a new window with size specified. Uses JavaScript. Hope you finf it useful.

    ===Toby===

  • kohoutek

    The best way to test is by buying all the popular devices and then testing them natively. They don’t need to be new, they can be old devices that you can get for a few dollars on eBay.

  • Kay

    Damn! just spent two years teaching myself this bloody web stuff (Design / front end / back end /marketing ) in the hope of carving a new business path.

    Now that I consider that I might know enough to make myself useful, I’m realizing that the bottom end of the market is commoditised as the article states.

    I’ve been looking at businesses that have no brick and mortar presence but I am finding that they are mostly meeting their marketing needs with plug and play blogging platforms and social networks.

    The whole prospect of web design / development as a freelancer is looking increasingly challenging to me.

    Eagerly awaiting the follow up article

  • Kay

    Sorry Site point. Had two tabs open and commented on the wrong article. I meant comment here http://www.sitepoint.com/why-should-i-hire-you-when-i-can-do-it-myself/