What screen sizes to use for desktop, tablet & mobile web design
Questions
Student Gallery
Course info
Overview
- You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous design skills are needed.
- No previous Illustrator skills are needed.
- 45 lectures 4 Hours 7 minutes of content!
- You'll learn to design a website with in Adobe Illustrator.
- User Interface essentials.
- 27 Completed files so you never fall behind.
- Learn how to wireframe at all levels
- How to design for a responsive website.
- Downloadable exercise files & cheat sheet.
- Forum support from me and the rest of the BYOL crew.
- Techniques used by professional website designers.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
- This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.
Course duration 4 hours
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
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.
What artboard sizes should I use for desktop, tablet and mobile web design in Illustrator?
A practical starting point is 1200 pixels wide for desktop, 768 pixels for tablet and 400 pixels for mobile. Set up one Illustrator artboard for each layout, and let the height depend on your content. These are working sizes rather than universal rules, so agree any project-specific requirements with your developer first.
What Screen Sizes to Use for Desktop, Tablet and Mobile Web Design in Illustrator
Key Takeaways
Choose sensible starting widths for your three web layouts.
Use CSS dimensions rather than physical screen resolution when researching devices.
Create, duplicate and resize artboards in Illustrator.
Name each artboard clearly and save your project with a version number.
Choosing screen sizes can feel a bit tricky. There are loads of devices, and the list keeps changing. You could spend ages hunting for the perfect dimensions before you have designed anything at all.
I like to start with three useful sizes: desktop, tablet and mobile. That gives us a manageable set of layouts to work on, without creating an artboard for every phone and tablet out there.
Layout | Artboard width | Artboard height |
|---|---|---|
Desktop | 1200 pixels | Adjust to suit the content |
Tablet | 768 pixels | Adjust to suit the content |
Mobile | 400 pixels | Adjust to suit the content |
These are starting points, not compulsory sizes. If someone else will be building the website, ask them which widths they need before you get too far into the design. Their requirements might be different, and that is absolutely fine.
Research CSS Widths, Not Physical Resolution
A useful reference is mydevice.io/devices/, which lists device dimensions. The important thing is to look at the CSS width, rather than the physical pixel width and height.
For web layout design, the CSS width is the figure we want to work from. A device can have a much higher physical screen resolution without giving the website that same number of layout pixels across.
Use the CSS width column to choose your web layout dimensions.
Take the iPhone 7 as an example: its CSS width is 375 pixels. That gives us a useful reference for a mobile design. The iPhone 6 and several earlier models also sit at or below that width.
Why I Start Mobile at 400 Pixels
I often use 400 pixels wide for my mobile artboard. It gives me a little room beyond the 375-pixel example, rather than tying the design to one exact phone width.
It does not include every phone. Larger examples, such as the iPhone Plus models, Nexus 6 and BlackBerry Passport, show why one mobile width cannot represent everything. For this three-layout approach, I leave those larger phones to the tablet layout rather than making a separate artboard for each one.
The point is to choose a useful working size. A 400-pixel artboard is not a promise that every mobile device has a 400-pixel screen.
Why I Use 768 Pixels for Tablet
For tablet, I use 768 pixels wide, a useful reference from the iPad-sized devices in the device list.
I do not try to squeeze every tablet into that category. The large iPad Pro example is closer to a desktop-sized layout, so I leave that one to the desktop design in this workflow.
Again, you can choose a different width if your project needs it. The device name matters less than having a suitable layout size agreed with the person building the site.
Why I Start Desktop at 1200 Pixels
Desktop is a little more open-ended. Illustrator offers several web presets, and you can use one as a starting point without being stuck with its dimensions.
My preference is 1200 pixels wide. It is a useful desktop design width, and it divides neatly for the grid work we will build on later.
Height is a different matter. Your page might need more space as you add content, so there is no need to settle its final height now. Start with the default and adjust it as the design develops.
Create the Desktop Artboard in Illustrator
We will make the desktop layout first, then add the other two artboards to the same document.
Choose File > New.
Select the Web category.
Choose a web preset as your starting point.
Set the width to 1200 px.
Leave the height at its default for now.
Choose Landscape orientation.
Leave bleed at 0.
Make sure the colour mode is RGB.
Click Create.
That is our first layout area. Illustrator calls these artboards, rather than pages. We can keep all three sizes together in one document.
Move Around the Workspace
As you add more artboards, a couple of navigation shortcuts make life much easier:
Zoom out: press Command and the minus key on a Mac, or Control and the minus key on a PC.
Pan: hold the space bar, then click and drag.
Scroll: use the workspace scroll bars if you prefer.
Zoom out a little so there is room to place the tablet and mobile versions beside the desktop.
Add a 768-Pixel Tablet Artboard
The Artboard Tool lets you both change an existing artboard and create another one.
Select the Artboard Tool in the toolbar.
Click New Artboard in the options bar.
Your cursor carries a new artboard matching the existing dimensions. Click in an empty area to place it.
With the new artboard selected, set its width to 768 px.
Leave its height for now, or give yourself extra room for the content.
Move it beside the desktop artboard, with some space between them.
Use the width and height fields, not the X and Y fields. Width and height change the artboard’s dimensions. X and Y change its position in the workspace.
Do not stress about how tall the tablet artboard is at this stage. We are setting up the layout width first. The content will tell us how much vertical space we need.
Duplicate an Artboard for the 400-Pixel Mobile Layout
You could click New Artboard again, but there is a handy shortcut I tend to use instead.
Keep the Artboard Tool active.
Hold Option on a Mac or Alt on a PC.
Drag the tablet artboard into an empty area to create a duplicate.
Select the duplicate and change its width to 400 px.
Place it beside the tablet artboard.
The cursor changes to indicate duplication while you hold the modifier key. You can repeat the same action to make more versions, but three is all we need here.
The mobile artboard will now be much narrower. Its height is still flexible, just like the other two.
Keep the desktop, tablet and mobile layouts side by side in one document.
Name Your Artboards Clearly
Artboard 1, Artboard 2 and Artboard 3 are not terribly helpful names once you start sharing the file. Give each one a label that explains both its purpose and its width.
Open the Artboards panel.
If it is not visible, choose Window > Artboards.
Double-click the first artboard’s name and rename it Desktop 1200px.
Rename the second Tablet 768px.
Rename the third Mobile 400px.
Those numbers are just labels. Typing 1200px into an artboard name does not resize it. The dimensions still need to be set through the Artboard Tool.
Including the width makes the file easier to understand. Anyone opening it can see which size each layout is intended for without checking every artboard’s settings.
Save Your Illustrator File With a Version Number
Choose File > Save and create a folder for the project. For this portfolio example, I use a folder called Dan’s Portfolio, with a file called Dan’s Portfolio v1.ai inside it. Use your own name for your own portfolio.
The folder can keep the simple project name. It is the file that needs a version number.
Do not call it final. That is asking for trouble. Before long, you will have names like Final Two, Final Revisited and Final New, and none of them will feel particularly final.
Use v1, v2 and so on instead. Numbers or letters are fine, as long as there is a clear way to distinguish the versions.
Click Save, leave the Illustrator options at their defaults for this setup, and click OK.
You now have a saved Illustrator document with three clearly named artboards, ready for your desktop, tablet and mobile web designs. The widths are established, and the heights can grow with the content.
Key Terms
Artboard
An individual layout area within an Illustrator document. Here, each artboard holds a different screen-size version of the website design.
CSS width
A device’s width expressed in the pixels used for web layout. This is the dimension to check when choosing a design width, rather than the physical screen resolution.
RGB
The red, green and blue colour mode used for this screen-based design document. Select it when creating the web design file.
Bleed
Extra space outside an artboard boundary, commonly associated with print setup. We do not need it for these web design artboards, so leave it at zero.
Version number
A file-name label such as v1 or v2 that distinguishes successive versions of a project. It is more useful than repeatedly naming files final.
FAQs
Do I need an artboard for every device?
No. This workflow starts with three representative layouts: desktop, tablet and mobile. Add or change sizes if the project or your developer requires them.
What height should my web design artboards be?
Let the content determine the height. You can begin with the default height and extend the artboards as you build the layouts.
How do I duplicate an artboard in Illustrator?
With the Artboard Tool active, hold Option on a Mac or Alt on a PC and drag the artboard to an empty area. Then change the duplicate’s width as needed.
Does renaming an artboard change its size?
No. An artboard name is only a label. Change its actual dimensions using the width and height controls with the Artboard Tool.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
