Skip to main content

The Responsive Web Design Bookmarklet

By Craig Buckler

Programming

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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!

Related Articles

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Integromat Tower Ad