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.
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!
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.