I recently did a presentation to the Darwin Web Standards Group on Responsive Design. I stole gleamed a lot of the ideas from John Allsops famous “Dao of Web Design”, Jeremy Keiths talk on Responsive Web Design as part of the ASYNCJS group in Brighton, work I did with Imogen Levy during the rebuild of Westminster Abbey with HTML5 and Media Queries, and finally the kick arse book written by Ethan Macote, Alist Aparts Responsive Web Design.
Two relatively annoying things happened with regards to the last peice of muse….
- The book wasn’t released until 2 days before the presentation leaving me practically no time to read, absorb and repeat (in my own words) what I had heard was amazing reading.
- The internet connection in my office went out the day before the presentation for 12 hours.
Fortunately these things worked brilliantly together, allowing me to focus on reading the now released book securely downloaded on my iPad2 while not being distracted by email, twitter and the rest of the online world.
I wrote the presentation in narrative form using IA Writer for Mac while swiping through the very informative and entertaining book, while also slowly changing a design from fixed to a responsive layout.
I found it great to be able to refresh the design on the iPad and iPhone and Laptop as I rebuilt the site, but alas I had no Internet connection so only the iPhone on 3G worked and the iPad wifi was useless.
I could resize the browser manually, but it was difficult to be able to guess the size of the browser when changing the width.
There is a saviour for this problem with Firefox. If you’ve got the Web Developer Tools as part of your install (if you don’t, then you probably wouldn’t have read for this long) you can select TOOLS – WEB DEVELOPER – RESIZE.
From here you can enable “Display Window Size” or “Display Window Size in Title” to check what width you have resized the browser. Going one step further, you can select “EDIT RESIZE DIMENSIONS…” which allows you to create a set of predefined sizes for your testing.
The draw back with this is that you need to adjust it every time you want to check the changes.
I did a few searches for a tool that would allow me to be able to view the different widths in one place but came up empty (or I was using the wrong search terms…. please let me know).
Yesterday afternoon I decided to do some testing to see if it was possible to set up iPhone Portrait/Landscape, iPad Portait/Landscape and a Desktop View as well.
It turns out it was very simple indeed. With a couple of iframes set an exact height a width, a background image to show the device a VOILA….. Responsive Design Preview Tool.
It’s rudimentary at best. If you want to update the site then you just update each of the iframe src sections.
I’m going to build on this,
- allow for other dimensions to be added easily
- Put in presets for each major device (this apple fan boy will include the androids)
- Single input for the site url, rather than updating the html.
Would love to hear feedback, if you think it’s a useful tool. You can improve on it yourself through GitHUB