Web Design & Development Blog

RSS Feed
Subscribe to my
RSS feed

The Web Design & Development Blog is written, coded and maintained by Duncan Midwinter. It regularly features articles on HTML, CSS, Javascript, PHP, Web Design and more…

ResponsiveResize – a Safari Extension to help with responsive design

Responsive ResizeThe ResponsiveResize extension for Safari help 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.

Responsive Resize Safari Extension

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.