Skip to content

Responsive Design bookmarklets

November 16, 2011

I’m currently working on a project that requires some media queries. Resizing your browser by dragging is quickly becoming a pain. Here are a few solutions for this.

Chris Pederick’s Web Developer Toolbar

Now available for both FF and Chrome, I always install this. Yeah, everybody uses Firebug, but this is still a great add-on to have, and it has a menu for resizing the window. You can store a large amount of x by y dimensions and create your own.

Check it out. While you’re there, grab his User Agent Switcher, another great add-on for responsive design work.

Window Size Bookmarklet

Joss Crowcroft created a neat little bookmarklet that lets you see the current screen dimensions in a little overlay at the top-left corner. Great for seeing when a media query is about to kick in.

Other bookmarklets

Creating a bookmarklet that resizes the screen isn’t hard. Here’s a quick tutorial on the subject, and another one that focusses on iPhone sizing.

And here’s the mother of all bookmarklet link dumps.

Got a link to a tool? Drop it into the comments.

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: