How to handle Artboard sizes designing web
I’m often asked about which Artboard sizes and layout settings to use designing web by my students and some colleagues. In most cases it’s quite enough default Artboard sizes and default layout setup but to be honest there are some tips and tricks.
The critical mass was reached when my job was to design music streaming service Louder.me while keeping in mind which elements should be visible on first sight and smaller than default layouts due to two menu and player wrappers on both sides.
I was pretty sure there is enough such information on the internet. But I didn’t find any complex tutorial so I decided to make it myself.
While writing this I also realized that it gets too long and complex so i decided to separate Artboards and layouts in two different stories.
So, there are several templates in Sketch, but is this enough? And which one should you choose to start? And it would be better to be sure, isn’t it?
What about Artboard width?
The Bootstrap grid system has four classes:
xs — for screens less than 768px (phones);
sm — for screens =< 768px (tablets);
md — for screens =< 992px (small laptops);
lg — for screens =< 1200px (big screens).
This classes helps on front-end development to define layout conditions for each case. Sketch has default ‘Responsive web’ layouts for each of them also.
‘Mobile’ with 320px width for ‘xs’ class. 320px is the smallest popular mobile screens width, like iPhone 5–5s with 320x568 resolution and enough for wide range of Android devices line starting with 360x640. Formerly there were also screens with 240px width considered but that times had gone. Like 320px will do soon and relinquish it’s place to 360px.
Situation is quite similar for tablets — 768px width ‘Tablet’ Artboard. Enough for small tablets and mobile landscape mode.
There is two more formats for iPad and iPad Pro with 768x1024 and 1024x1366 respectively. And don’t forget it’s only portrait mode and they also have landscape. And one extra format for small Android tablet with 600x900.
768x1024 and 1024x1366 are quite similar for desktop, but this devices will be autodetected as mobile. You should keep it in mind if your mobile and desktop web versions are separated and different.
With desktop screens and ‘md’+’lg’ classes everything is a bit more interesting. Sketch offers ‘Desktop’ with 1024px width for ‘md’ and ‘Desktop HD’ with 1440px for ‘lg’.
To find out what are the most popular desktop screens now let’s check the most popular screen sizes. Excluding 1920x1080 these are 1280x800, 1366x768 and 1440x900.
And that’s for the case when you need different layouts for every screen width (like me). Basically for all of them you can use default 960px layout columns grid about which i plan to talk more in the next article.
There is one more little thing. The scroll bar. On Mac it’s overlay and don’t affect your page. But on Windows it takes 17px and cuts them from the overall width. That’s why your page will twitch if the page will suddenly get or loose scrollbar due to content change.
And what about height?
Usually you can take any height you want, but it would be right if you prioritize visible elements and check what exactly users would see.
On landing pages that don’t have so much sense. You can use the right average screen height to adjust elements in blocks and plan which element will change their sizes. Than your developer can assign height for every block in percent of actual user screen size (in vertical height points like 100vh for 100% of the screen available) and that’s done.
But for interfaces it is gets much more important to achieve user centered elements order. Previously we defined the most popular desktop resolutions as 1280x800, 1366x768 and 1440x900. So the we’d better use the height not more than 768px for each display-screen.
Average user also have a windows start bar on the bottom, a window header at the top and browser panels. According to desktop operating systems market share statistics Windows have something about 84% (July, 2017) so we’d better focus on it. Average windows taskbar height is about 40 (it’s adjustable) and Chrome main bar height (Chrome has 67+% usage) equals 66px and 104px with bookmarks bar. And it’s possible that user will have some extra bars.
So, designing with any screen height we need to exclude 120–150px. For 768px it’s 648 w/o bookmarks and 618 px with them.
Finally, for most popular resolutions average visible height is:
1280x800 – 650-680px;
1366x768 – 618-648px;
1440x900 – 750-780px.
But what about mobile devices?
Navigation bar takes 70px, and 44px for tabbar in Safari browser portrait mode on iPhone. That works if you don’t scroll. When you scroll down tabbar disappears and navbar minimizes to 40px.
That means if you want some content to be 100% visible on iPhone 5/5S/SE portrait mode you should count on area with like 454px height.
On Android browser situations is quite similar. When you scroll up navbar with status bar takes 70px and bottom bar takes 56px. When you scrolling down bottom bar doesn’t disappear while navbar does and we have only status bar there for 20px.
On iPad there is no tabbar in Safari — the elements are in navigation bar, but the navbar has tabs to switch between pages here.
Now you can use artboards more flexible with deep understanding and regarding your personal case.
Hope i didn’t miss anything.
P.S.: The most gorgeous result for me will be your feedback guys. Especially if it will force me to rewrite and improve some parts of the article. I’ll be glad to see you in comments or on Facebook!
Tnx for reading!
