Responsive Web Design is a challenge for the traditional processes of visual design, where the standard Photoshop (or Illustrator) mockup tends to be geared towards a single fixed width view of each page. One way to meet this challenge is to decouple the overall look and feel (or ‘design system’) from the layout by using style tiles. I think this method has a lot of merit and is generally the best way forward.
Sometimes, though, it may still be useful or necessary to mockup how a given page will look at different sizes, before you reach the HTML stage. This might be the case if you’re still working at the branding and design system stage and want a bit more context for your style tile. Or maybe you need to show a client a quick preview of an important page.
If you’re like me and prefer Illustrator to Photoshop for web design work, you might find this template provides a couple of useful shortcuts. I’ve included five standard view sizes each on their own artboard and with device chrome for iPhone, iPad and a desktop browser (The device graphics come from Teehan+Lax who were kind enough to let me use them here).
- Download responsive-template-1.ait.zip (1.4 MB, zipped Illustrator CS5 template file)
I’ve also included a sample grid on its own layer, which represents a fluid grid with a maximum width. This is unlikely to be exactly the right grid for you, so you’ll probably want to delete all the columns and start again. I’ve found that the easiest way to create grids in Illustrator is just to use the Object > Path > Split into Grid command – although it can be a bit fiddly to balance gutter and margin widths if you want to end up with whole pixels!
In practice I tend to find that five sizes is too much and I usually end up deleting a couple of the artboards. Let me know if you find it of any use or have any suggestions for how to improve it.