ResponsiveResize – a Safari Extension to help with responsive design

Responsive Resize IconThe ResponsiveResize extension for Safari helps speed up development of responsive design by automatically re-sizing the Safari viewport with pixel precision to one of several preset widths. In each case the space taken up by the scroll bar is accounted for. If the particular width you want to work to is not one of the preset values there is also in input field to type your required viewport width.

Basically I’ve been working on some responsive site designs recently (including a ‘soon to be completed’ re-design of this site) and I was annoyed to discover that the Safari window can’t be resized smaller than 376px – no good if you want to check your design at 230px!. After a bit of experimentation I found out you can take it right down to 84px if you do it programmatically, and so the ReponsiveResize extension was born.

Most of the presets cover iPhone (230px by 480px) & iPad (768px by 1024px) as these were the target for the sites in question.

The style of the extension toolbar borrows the ‘iOS’ theme from my ButtonBar+ multiple bookmark bar extension.

You can download the ResponsiveResize Safari Extension from my downloads page.