Adobe Illustrator Responsive Web Design Template

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).

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.

9 thoughts on “Adobe Illustrator Responsive Web Design Template”

  1. There is a small hiccup though – older non-CSS3 browsers aren’t going to respond to the media-queries and thus will be served the standard 960 grid even if they are resized. In the spirit of graceful degradation though, I’m going to let this be instead of trying to implement a JS solution. If you are interested in one though, try the respond.js polyfill .

    1. Yes I guess that is a reasonable decision. Personally I have always used the polyfill so I get older browsers to work too. I don’t really see much of a downside to this to be honest. But I guess your way at least modern browsers on phones and tablets should get the benefits of your responsive layout anyway.

  2. Looks like just what I need – thank you! But can you help though – when i open the template fil in Illustrator CS6 everything is fixed and I can not edit anything?

    1. @Maria: some of the layers are locked. If you want to edit the background or the device graphics, you would need to unlock those layers first. Otherwise, you can just add your own new elements in the ‘Content’ or ‘Structure’ layers.

  3. Seems that Im having a hard time opening this file. I use CS3 and I know that this file was made for a later version of Illustrator. However, when I opened the file, it just gave me a blank page with:

    This is an Adobe Illustrator File that was saved without PDF content. To place or open this file in other applications, it should be re-saved from Adobe Illustrator with thee “Create PDF Compatible File” option turned on. This option is in the Illustrator Native Format Options dialog box, which appears when saving an Adobe Illustrator file using the Save As command.

    1. @Mary: the file is an Illustrator Template file, not a standard Illustrator file, and AFAIK when saving as a template there is no option to enable or disable PDF content. I think the error you are seeing is just due to the fact that it was created in a newer version. Sorry about that. If you send me an email I will try to find a moment to export a CS3 legacy version for you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Help me make sure you\'re not a machine * Time limit is exhausted. Please reload the CAPTCHA.