< Back to Blog

Device-Based Layout

Development LA

With the advent of zeplin.io, turning a design into layout has become simple and easy — the created design can be easily viewed in detail. You no longer have to wonder which font, font size, thickness, letter spacing and line height are used. Determining the spacing between blocks and getting the image slicing has become easy as well. Things seem to be getting better. But not everything.

The problem area is still the layout for different screen resolutions. In theory, it’s a piece of cake, but weird stuff can still be seen in projects quite often.

To make the layout, the designer creates three different designs—mobile, tablet, and desktop—depending on the width of the screen. The designer chooses three standard sizes (usually 320px, 768px and 1280px), but the website works with any screen resolution.
Below is a list of about 30 screen widths which can be found on smartphones, tablets and desktops with either screen orientation.

Rule one — your website must look good with any screen resolution. Do not focus on the specific screen resolutions, pixel-perfect is expensive and there is actually no point.

Making Media Queries
In most projects, I see a max-width cut-off for smartphones with a subsequent min-width cut-off for tablets and desktops.
Don’t do that! It creates a large terra incognita between the styles that you have defined for mobile and tablet devices and complicates the reading of styles.

Rule two — the designer always draws the page as it should look at the minimum specified resolution. Your task is to make the site look the same at the specified or greater resolution.

Rule three — mobile first.
Always specify in the CSS what the screen must look like on a smartphone and then redefine it for larger resolutions if necessary (like a tablet or desktop).


.block {
 ...styles for a smartphone...  
@tablet({    
... override for a tablet ...
 })
 @desktop({     
... override for a desktop ...  
})
}

Looks beautiful and clear, doesn’t it?

Rule four — use a preprocessor.
There is no significant difference whether you use LESS (as in the example above), SCSS, PostCSS or something else. Basically, they are all the same both in terms of the syntax and extra features.
Mixins will be useful in any case:


.tablet (@rules)   {
  @media (min-width: @ tablet-breakpoint) {@rules (); }
}
.desktop (@rules) {
  @media (min-width: @ desktop-breakpoint) {@rules (); }
}

Rule five — use rems (even though they’re already dead and buried). Forget about pixels.
When it comes to scaling a website it’s better to control the root element than all the elements separately. I prefer to have the default set to 1rem = 1px, but this is a matter of taste. When you have 2048px it makes sense to scale up to 1.2px or 1.5px.