Two bookmarklet for testing your responsive design

What really is a bookmarlet? 
Basically a bookmarklet is JavaScript code embedded in a web link. Generally they call an external JavaScript file/library in order to add features to your current browsed web page. The advantage of these is that you just have to drag the link into your bookmark bar and every time you hit it some features appears on your page. So, no plugin, browser-independent and if you sync your bookmarks you will have it in all your browsers on every machine you have. A more complete explanation about bookmarklets are available on wikipedia.

I have started to used bookmarklet for a while now, they are very useful only one click on your bookmark bar and *bam*you have access to great features without having any plugin installed. I use particularly two bookmarklets for testing my responsive designs.

Responsive design test bookmarklet

Available here

I have taken http://bradfrostweb.com/demo/mobile-first/ as exemple, here are the “regular” desktop version.

Once the bookmarlet is actived a nice toolbar appears on the top and you can switch between possible views. Here in portait tablet size:

and here in portrait mobile size:

Resizer // A responsive design bookmarklet

Available here

The second one is basically the same thing but it can be useful to have a look if you don’t know how to add bookmarklets to your browser.

Enjoy testing your responsive design 🙂

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

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