Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
No matter if you are a seasoned web professional or simply someone who is dipping their toe for the first time into the web design pool, you are going to run across this buzzword called responsive web design. It is everywhere today. Everybody wants their site to be responsive. So in this movie I'm going to be exploring how to create a responsive design template, but I want to first address exactly what responsive design, is in case you are not aware. Traditionally when we think about designing web sites for mobile and tablet and desktop experiences, designers have created, in fact, three different versions of the site.
There was a mobile site, a tablet site, and a desktop site, or maybe just a mobile site and a desktop site. Responsive design looks to throw away the traditional model of creating individual sites for individual targets and rather makes this one singular site adaptive so that no matter what different screen size it's being displayed on, it always looks to be properly designed for that particular medium. A responsive design is the single web site that changes its appearance and rearranges itself and displays different content based upon the screen size in which it is being viewed, and it does so via something called CSS media queries.
And if you're interested in CSS media queries or responsive web design, my suggestion would be to take a look at James Williamson's CSS courses on lynda.com. James covers a lot of different ways to utilize CSS for media queries and also some responsive web design in his courses, and they're fantastic. Now, how do we set up a responsive design template in Illustrator? Well, Illustrator is actually a great candidate for setting up a responsive design, unlike other programs like Photoshop. In Photoshop, I would actually set up three separate documents or use a funky grid system that maybe didn't make a whole lot of sense, but in Illustrator I can actually create one single document that contains multiple artboards that mimic a responsive layout.
So let's take a look at how we can do that. The first thing I'm going to do is I'm going to create a new document. I'll do that by going to File > New. When I go to File > New, I'm going to drop down from the Profile section and I'm going to choose Devices. And once I select Devices, I am going to go down and I can pick iPhone, because the iPhone, the traditional iPhone, is 320 x 480. That is a traditional mobile- phone-size screen. And so that's going to be basis of my overall design, because in most cases people need to think in terms of mobile first.
Mobile first indicates that you are only going to be focusing on the most important content and displaying that prominently to the user, and then as you start to go bigger, like to tablet size or desktop size, start to add in a little bit more of the extra content, the eye candy if you will. So mobile first is what we need to focus on. So I'm going to start with an iPhone screen, and I'm simply going to hit OK. I don't need to create any extra artboards or anything like that right off the bat because I've got my basic design all ready to go. Now I'm going to hit Command+1 or Ctrl+1 so I can see the exact size of this.
That's just going to back this up to 100%. And then I'm going to temporarily hold down my Spacebar key and just kind of pan this over like so. So there is my first document right there. I'm then going to go over here to my Artboards, and if you can't see your Artboards, you can go to the Window menu and bring up Artboards. And if you are using the Essentials workspace, your Artboards are going to be down next to the Layers workspace. I am actually using my custom workspace that I created in a previous movie. And so in the Artboards panel, I'm just going to click on the New Artboard icon right here.
That's going to add another artboard right here next to it. So that's going to be my tablet layout. And so once I have that done, I'm going to collapse the Artboard panel for a moment, and I'm going to come over here and I'm going to grab the Artboard tool. And with the Artboard tool selected, what I'm going to do is actually change the size of this artboard. And I can do so simply by clicking and dragging this out a little bit. So I'm going to click and drag this to the right, and I'm going to keep dragging it out until I get to 768 pixels. And you see that little heads-up display that I'm getting right there.
It tells me exactly how wide I'm going. And when I release, it does so just like that. You could have also come up here to the control panel and just typed in 768. Now for the Height, I'm going to change this to be 1024 and hit Enter or Return. And then I'll switch to my Selection tool, and I'm going to zoom out quite a bit. There you can see I've got my mobile and now my tablet. Now if you wanted these to be aligned at the bottom, you could certainly do that. I can grab my Artboard tool again, click on this, and then just shift it up till it meets.
Something like that. Now I've got this Artboard created, so I'm going to open the Artboard panel again, and I'm going to click on the new Artboard icon one more time to add another artboard. Depending on the artboard I have selected, it automatically duplicates that size and setting. So I'm good to go there. So now I'm going to move over to the right, and I'm going to drag this out just a little bit, so I'm going to drag this out to about 1200. And if I wanted to keep this in line with my blog design template that I usually create, I'm going to stretch this out to about 1280.
If you can't get it right on the money, that's okay. You can just come up here to the control panel and type in "1280" and then hit Enter or Return. And then for the height on this one, I'm just going to zoom out a few times and I'm going to stretch this up until it gets to about 2000 pixels tall, once it hits 2000. There we go. And if it's got a little decimal point on it, you can just take that off, just like so. There we go. And so now I have three artboard--a mobile, a tablet, and a desktop--all ready to be used in this responsive layout.
Now if they're too close to one another, which these seem to be for me, you can always take the Artboard tool and move them around. So I'll take this artboard and I'll hold down Shift and just kind of nudge it over with my arrow keys to create some space. Same thing with this one. Select it and then I'll just hold down the Shift key and hold down the arrow key until I get some space that I like. There we go. And if you wanted to, you could also rename the artboards by going into the Artboards panel. And so Artboard 3, that's this Artboard here, I can double-click and I can call this Desktop.
Artboard 2, that's the one in the middle. If I double-click, on that I can call this Tablet. And then Artboard 1, double-click on that, and I'll call this Mobile. Here we go. So I've got all three artboards ready to go. Anytime I double-click on the artboard, it automatically switches over to zoom in on it. It allows me to do that. I can also rearrange them any way I want. Now I've got my responsive design all set up. So my site is going to look this way on a mobile device, this way on a tablet, and this way on a desktop, theoretically. And so I want to save this so I can instantly have this set up anytime I need it.
I'm going to go to the File menu and choose Save as Template. I'm going to call this responsive and I'll save it into my Web Design folder. You can just save it any folder you want if you don't have the Web Design folder created. And so now anytime I need a responsive design with these three breakpoints or screen sizes, all I have to do is go to the File menu, choose New, Templates\web design\responsive, and hit New, and there we go. I get three artboards, each one representing the different screen size target that I'm trying to hit. And then in my Artboards I have Desktop, Tablet and Mobile, each and every time.
It should be noted that you should take some time to understand responsive web design as well as the different break points that you might want to design for, and by break points I mean screen sizes that you're trying to target. You may target different screen sizes than I have here, and that's okay. The beauty of responsive web design is there are no real set rules. It's all up to you. So you make your web site respond to any screen size that you want and set up your own templates and make your workflow that much easier.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58306 Viewers
119 Video lessons · 67584 Viewers
84 Video lessons · 16866 Viewers
125 Video lessons · 29762 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.