Join Justin Seeley for an in-depth discussion in this video Building a responsive template in Illustrator, part of Illustrator for Web Design: Core Concepts.
- In the previous movie I talked a little bit about break points and how I determine exactly what experiences and devices I target with my break points inside of Illustrator. In this movie what I'm going to do is actually follow up on that a little bit and show you how I build a responsive design template inside of Illustrator that suits me. I'll also show you how I save it and then how I use it each time I create a new project. Let's get started. I'm going to click on the File menu and choose New. Once I'm inside of the New Document dialog box what I'm going to do is I'm going to set up a base Size.
So for this what I'm going to do is choose Surface Pro 2, that's going to be my base Size, that's going to be just my regular old desktop size. I'm going to ignore the 5K Imax screen for now. Why am I ignoring that? Because it's not really penetrated the market just yet, not a lot of people have them, so I don't necessarily have to create a targeted experience just for that right now. Especially for let's say whatever this project happens to be. Now I'm also going to change the number of Artboards. I want to do a desktop experience, I want to do a tablet based experience, and I want to do a mobile experience, along with what I call a not so smartphone template.
So that's going to be desktop, tablet, phone, not so smart phone, four. So I need 4 Artboards. I want to make sure that they are one right on top of one another or arranged by row. Arranged by row is probably the best. I'm going to space them out pretty good, something like 100 px I think sounds good. So I'm just going to knock that up until it hits to 100 px. And then I'm also going to make sure that for now they're in Landscape Orientation. Why? Because I want my desktop to be in Landscape.
Because most people don't rotate their monitors. So then I'm just going to hit OK. Once I do that I get four Artboards set up just like this, in a row, exactly like I want them. Then I can take the Artboard tool and I can target individual Artboards and change them. So for this one, it's going to start with the desktop, it's going to move into the tablet, on to the phone, on to the not so smartphone. Or if you would prefer to work on a mobile first mentality, you can start over here and start changing them based on that. So let's change this. Let's select this first one, go down and let's change this to, we don't have a not so smartphone template in there.
So what I'm going to do is just come up here and change the width of this one to 320 and the height to 480, hit Enter, and then we'll move it down until it's flush with the rest of them, set it over kind of like that. This one right here, this is going to be my regular smartphone, so we're going to target something like the iPhone 5S. We're going to make sure it is in Portrait Orientation and we'll set it away from that one, kind of like that. Next up, we're going to target a tablet. In this case I think what we'll choose is something like, well let's choose the Nexus 7.
Again, make sure it is in Portrait Orientation. That's how most people hold these. Set it right there. And then finally, this one is of course my Microsoft Surface Pro 2, So we'll just position that somewhere like that, that's my traditional desktop layout. So these are the ones I have. Now I'll go into my Artboards, and I have Artboard 1, 2, 3, and 4. Well Artboard 1 is the not so smartphone, so I'm just going to double-click on the word Artboard 1 and I'm just going to call this Mobile.
Artboard 2, let's double-click that one so you can see it. I'll double-click the name and we're just going to call this Smartphone. Artboard 3, double-click outside there to see it, this one is going to be Tablet. And then Artboard 4, double-click, Desktop. So I've set up all of these Artboards, I've named them specific things, that way I know exactly what experience I'm actually targeting at any given time. Now I'm going to go up to the File menu and I'm going to choose Save as Template. It is going to save it inside of my Templates folder, you could also save this out to a desktop environment, share it to Dropbox, where ever you wanted to save it and you could share it with multiple people.
In this case though, I'll just call this responsive-mobile- tablet-desktop, that way I know exactly what this is. It's a responsive template that includes mobile, tablet, and desktop layouts. I can hit Save and now that has been saved. I can close it up. And then any time I need to use that navigate to the File menu, choose New from Template, there's my responsive template, I can see it, if I extend this a little bit I can read it a little bit more.
So there's responsive-mobile-tablet-desktop, that's what I want, hit New. That's going to create a new document for me. It's going to say it's missing a color profile right off the bat. If you get this just say Assign current working space sRGB. There we go, that way it's converted over to the right sRGB color space and now I have all of these with my Artboards already pre-named and I can continue working. Now I might also go into the layers panel of my template and actually add in some layers that correspond to the different screen sizes and experiences that I've targeted.
Making it easier for me to aggregate content to those layers and keep everything together. So you might have a layer called Mobile, a layer called Smartphone, a layer called Tablet, and then sub-layers inside of there that correspond to things like headers, footers, content blocks, etc. All of that will make a more developer-friendly file that you can then deliver and the developer can look at it, they can see exactly which one of these Artboards corresponds to what experience you're trying to target, they can go into the layers panel, they can find all of the bits of content, and they can see how you've organized it. If you're not sure how to do that, go back and watch my movie that I did earlier in the course on creating developer-friendly files that will walk you through my process for renaming and aggregating bits of content into your layers panel to make it a little bit easier to read.
So there you go. This is how I do almost all of my responsive design templates inside of Adobe Illustrator. I target specific experiences, I built Artboards that go along with those experiences, and then I name those very specifically so I know exactly what I'm targeting and when.