Website and Mockup Size Guide

A guide for clients and designers for choosing website widths.

Most modern websites are wider than their predecessors, and often have background elements which stretch to the full width of the device.

Within the full width of the browser window there are two main container widths to consider when designing for large devices.

The Two Widths

Outer Width

Within the full width of the screen is the website container, an invisible box which constrains the outer elements such as elements in the header.

Content Width

Inside that, the content wrapper is a narrower container which holds the page's content elements, such as text and images.

Website Width Guide - Container and Content Only

Outer Width

The choice of outer container size comes down to how widely spaced you think the outer elements - usually elements in the header, such as the logo and navigation - should be on a large screen.

Mockups should be provided which are slightly wider than the container to show what happens on wide screens. A container of 1366px would require a mockup which is around 1500px wide for example.

If the container was 1200px wide then a mockup of 1280px wide would suffice for both desktop and laptop sizes.

Website Width Guide - Container and Content

Content Width

The width of the content container also comes down to the specific requirements of the website, in this case the requirements of the content.

What is the best width to be able to comfortably read the body copy at the font size it will be on the final site?

Does the website use columns, or a grid system?

If so, decide how many blocks or columns there should be, and how wide they should be.

Design questions such as these should serve to determine the content width.

Which Device Sizes to Mock Up?

Once the widths have been chosen, and a design mockup has been done for wide devices, then the next device-size down the list should be considered.

The decision whether to provide a mockup in one of these smaller sizes comes down to whether there are significant changes to the design at that size to warrant mocking it up.

Device sizes

Desktop

Larger than 1280px

Tablet / iPad Landscape

1024px

Tablet / iPad Portrait

768px

Smartphone Portrait

320px

(768px usually covers smartphone landscape, so depending, there's probably no need for a mockup of smart-landscape.)

For Example

This laptop width is smaller than the outer website width, so padded header elements sit close to the edge of the screen. However the smaller size does not significantly impact the design, so a mockup would not necessarily be required for this device size.

MacBook Pro-01
Do NOT follow this link or you will be banned from the site!