What screen sizes to use for responsive web design – Adobe Illustrator CC 2017 [09/45]

Articles, Blog

What screen sizes to use for responsive web design – Adobe Illustrator CC 2017 [09/45]

What screen sizes to use for responsive web design – Adobe Illustrator CC 2017 [09/45]

Hi, my name is Dan. In this video we’re going
to be using Illustrator… to build UI and web graphics. There’s lots of free stuff here
on my channel, please subscribe. Hit the little bell next to this
subscribe button to get notifications. If you want more, lots is more. Check out bringyourownlaptop.com, or
check out the link in the description. Hey there, in this tutorial we’re going
to make these Artboards in Illustrator. This is going to be our desktop size,
this is going to be our tablet size… and this is going to
be our mobile size. So let’s work out what
sizes we need to use. You make these first, and then we’ll
go and build them in Illustrator. We need to work out what sizes to use,
and that can be a little bit tough… because that changes over time,
there’s so many device sizes… but I’ve got some basics for you to
use, that’s what most people use. If you want to be more informed
about what’s coming out… what devices are there, there’s a really
cool site called mydevice.io/devices. So go do that whole
url there in one go. It just gives you interesting
stuff about what sizes– Now, ignore these physical heights
and widths, use these CSS widths. This is what we use as
designers, this is pixels wide. And we can see that the new
iPhone 7 is 375 pixels wide. So that gives you a good gauge of… “Okay, maybe my mobile
needs to be about that… or at least include it because it’s
one of the more popular phones.” You can see, the 6 Plus, the big
giant phone is even bigger. I kind of ignore that one, I let
him deal with the tablet size… because it’s such a big phone,
it’s that big phablet thing. It covers iPhone 6, and you can
see, all the earlier ones as well. Don’t get above 375. I often just pick my mobile size to
be 400 to include all of those… but you will be excluding a couple,
the big giant phablet one. I think there’s someone
down here, Nexus 6. It’s slightly bigger, it’s a big phone. It covers most of them.
Blackberry Passports are massive. So that’s for mobile, you can see down
here, for tablet’s, just underneath. You can start looking at these ones. I kind of ignore the iPad Pro
because it’s as big as a desktop. If you’ve ever gone into an Apple
store and seen the iPad Pro… they’re massive, so we don’t
design for those for tablets… I leave those to use the desktop
size, but I do cover this one. That’s the size I use for tablet, 768. Now there’s no reason why you can’t
specifically pick other sizes. If you’re working with a
developer or a web designer… after this project, ask them. Say, “Hey, I’m designing this
site, what sizes do you need?” And they might give you
ones that are different… from the ones I’m giving you here,
but these would be really typical. So 400 for the mobile,
768 for the tablet. And then you get on to desktop. Desktop’s a bit of a different one. It’s about what you
want to design for… and I’ll give you what I do, so
let’s go and do ‘File’, ‘New’. And we’ll start with the
desktop as our first design. You can see, if we go to ‘Web’, we’ve
got a lot of different sizes here. There’s ‘Web’, ‘Minimum’,
‘Large’, ‘Common’. You can pick any of these,
it doesn’t really matter. What I like to start
with is ‘1200’ wide… mainly because it’s
divisible by our grids… that we’re going to learn
about a little bit later on. It’s still a common size. The height is going to change
a lot when we’re working. So we’re going to leave it at whatever
height it defaults to, and we’re… going to change it afterwards
because it depends on the content. Orientation’s going to be ‘Landscape’. We’re not going to add
any ‘Bleed’ or anything. We’re going to make sure it’s ‘RGB’. Let’s click ‘Create’. So this is page 1, I’m going
to zoom out a little bit… holding ‘Command -‘, zooms out. Now I’m going to move around holding the
‘Spacebar’ key, clicking and dragging. We hold down the ‘Spacebar’ key and
you keep on clicking and dragging… or you can use these
little sliders around. So, I’ve got this first one, and they’re
called Artboards instead of pages. What I need to do now is create
another Artboard for my tablet size. So what I’m going to do… there’s a couple of ways,
the easiest way is up here. There’s one called the
‘Artboard Tool’, click on him. And that kind of allows me to change
the size of this if I want to… but what I’m going to do is… I’m going to click this little option
here which says ‘New Artboard’. And you can see my cursor becomes
loaded with a duplicate of this guy. I’m just going to click it anywhere. I’m going to say, “You live there.” I’m
going to slide across using my spacebar. Now, how big should a tablet be?
I’m going to deal with– we’re going to do the
width and height… not the X and Y co-ordinates,
we’re on the width and height. We kind of talked about it before. How wide is it going to be?
It’s going to be 768. How tall is it going to be? It’s going
to be dependent on the content. So we’re going to design it
probably a little bit longer… but we’re not worried about
that at the moment… so don’t stress how tall this is. I’m going to move it across a little
bit. So it’s next to my desktop. Now I’m going to do my mobile version. Now I can go to ‘New’ again, but
that’s easy, you’ve done that. If you hold down the ‘Option’ key on
your Mac, or the ‘Alt’ key on your PC. You can see the cursor changes
to that little double arrow… that means it’s going to duplicate it. And I find that’s the easiest
way to drag another version. You can keep holding ‘Alt’ and
drag out lots of versions. I just want three at the moment… so I’m going to have my desktop,
tablet, and now my mobile. So the mobile version, we talked
about it before, we’re using width. The width in this case is going to
be 400, it encompasses all the new– iPhone versions, they’re upto 7 now… but who knows what 8’s going to be, so
it gives us a little bit of play room. If it ends up being something
stupid like 380… we don’t have to go back and
redesign our site for mobile. and the height is going to change… depending on the content,
it’s a lot thinner. So, what we’ll do before
we move away from this– we’ve created our pages, we’ve got our
mobile tablet and desktop versions. Let’s go and name them. You need to go find your Artboards tab. If you can’t find it, go to ‘Window’,
and go down to ‘Artboards’. My first one, ‘Artboard 1’,
I’m going to double click it. And this one’s going to
be called my ‘Desktop’… and I’m going to give it a name… so everyone knows that I’m using
1200 pixels; ‘Desktop 1200px’. Doesn’t change anything,
just the label. Artboard 2 is my ‘Tablet’. 768 pixels wide; ‘Tablet 768px’. And my ‘Mobile’ is going to be
400 pixels; ‘Mobile 400px’. Great! I’ll zoom out, remember,
‘Command -‘, or ‘Control -‘ on a PC. ‘Spacebar’ to move it around. We’re getting there. We’re going
to save it, ‘File’, ‘Save’. For this course, I’m going to
put everything on my desktop. I’m going to make a new folder, and
this is going to be ‘Dan’s Portfolio’. And I’m going to give it a
‘V1’, ‘Dan’s Portfolio V1’. Actually it’s the folder name, so we’re
just going to call it ‘Dan’s Portfolio’. Click ‘Create, and now the
actual name with this. This is going to be
called ‘Dan’s Portfolio’. Give it your name because we’ll
build you one while we go along… and give it ‘V1’, never call it– It means it’s some sort of version
number, it can be numbers or letters. Never call it file, file
is the kiss of death. You’ve probably got files called Final
2, Final Revisited, Final New… so just V1, and you’ll end up
with lots of different versions. Let’s click ‘Save’. We have everything
by default here, let’s click ‘OK’. That my friends is how
to pick the sizes… and create your first
Artboards for our design. How good was that? If you want more, go check
out bringyourownlaptop.com Or check out the link
in the description.

9 thoughts on What screen sizes to use for responsive web design – Adobe Illustrator CC 2017 [09/45]

  1. When it comes to exporting, my 800×320 pixel artboard is becoming squashed on the screen due to the rectangular pixels of the screen. How do I avoid this/accomodate for the rectangular pixels?

  2. I've been using _v1, v2, v3 and so on for some quite time now. But I remember my colleagues in college and the "Final is the kiss of death." cracked me up. In the middle of the office. x,D "Final 2, Final revisited, Final new". Classic

  3. Hi. For mobile you used 400px width. But on the devices table sizes, there are 320px width. Why not use 320, if theres the risk of the content not be displayed correctly using 400px page size artboard layout? Thx

  4. @Bring Your Own Laptop If I were to spec/redline the finished mobile designs for iOS, for example, would I need to spec/redline every single screen size that I designed for? Or is there one screen size I can spec that will somehow account for all other screens as well?

Leave a Reply

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