The Responsive Web Design Bookmarklet

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:

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.

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!