Website Dimensions, Best Practices

With the help of CSS3 and mediaqueries you can change the layout of your website based on the detected screen size of the device (be it a computer screen, tablet, smartphone,…).

Devices & resolutions, common questions.

  • What browsers do people use?
  • On what kind of devices?
  • What is their screen resolution?
  • How much space is taken by the browser toolbars?
  • What does it mean for me as a web site developer?

The mediaqueries workflow.

First we will define our so called ‘breakpoints’ in our CSS file. These breakpoints target the screen resolution, and more specifically the width.

We could instruct our web site to act as follows:

  • If the end user’s screen is smaller than 480 pixels show the smartphone layout
  • If the screen is larger than 480 pixels but smaller than 1024 pixels show the tablet layout
  • If the screen is larger than 1024 show the regular desktop layout

Why target the width, not the height ?

  • We want our site to fit in the browser window without horizontal scrollbars
  • The height is relative (we are used to scrolling these days)
  • Vertical scrolling feels natural, horizontal scrolling does not

Can we ignore the height?

That depends on the content of your website. Very important information should be ‘above the fold’ which means: visible without scrolling. So it’s always good to know the available height on the most used devices, to avoid cutting off banners in the middle or putting that very important call-to-action button out of sight.

What can I change ?

Simply put: every CSS rule.
You can make a ‘normal web page’ look like a native app on smartphones if you’d wish.

  • Change font, colors, spacing,
  • Change images
  • Show / hide elements
  • Change column widths, layouts, …
  • The look of elements like buttons, form fields… and so much more

Current desktop screen resolutions in use (worldwide)

This table can be your guideline for your mediaqueries.

Screen widthSmallest screen heightIn use worldwide
1024 px768 px3%
1280 px800 px11%
1360 px768 px2%
1366 px768 px35%
1440 px900 px6%
1600 px900 px6%
1680 px1050 px3%
1920 px1080 px20%
2560 px and up1440 px1%

CSS Breakpoints: where & how many?

You don’t need to write mediaqueries for every possible screen resolution. To keep things simple you could target four groups:

  • smaller than or equal to 768 px (smartphones)
  • larger than 768 px (small devices, tablets)
  • larger than 992 px (medium devices)
  • larger than 1200px (large devices)

Those are the breakpoints as used by the very popular Twitter Bootstrap framework.

Commonly used breakpoints?

Not all web sites use the same breakpoints. Needless to say they all have their reasons. Microsoft for instance will not use the iphone and ipod breakpoints, for obvious reasons.

CSS breakdown of some major websites.

Here is an overview of six well known websites. As you can see: all work with media queries, but they all have their own preferences.

Note: these are the major breakpoints, that is: where the look of the site drastically changes. Some of these sites have more, less important breakpoints.

WebsiteCSS breakpoints in pixels
5406006407007367688989929601008102410681280144017002100#
bbc.com4
cnn.com5
apple.com5
mercedez-benz.com2
microsoft.com3
adele.com2

All above figures will be updated regularly.