When designing a responsive website, we have to consider various breakpoints in CSS in order
to optimise our websites’ viewing experience for different devices.
The latest version of the popular CSS framework for mobile, Bootstrap 4, has breakpoints as follows:
if the end user’s screen is smaller than 576 pixels, show the smartphone layout. If the screen is
larger than 576 pixels but smaller than 992 pixels, show the tablet layout. If the screen is larger
than 992 pixels but smaller than 1200px, show the regular desktop layout, and if it is larger than
1200px, show the extra-large desktop layout.
We have found out that as of 2019, the most common resolutions
are as follows:
Desktop: 1366x768 and 1920x1080
With this information, we find that the widths to design our breakpoints at, as recommended by
Bootstrap 4, are still highly relevant. Height is secondary although we should always consider that
important information remains above the fold; in other words, it can be viewed without scrolling.
However, we observe that the desktop resolution of 1920x1080 is getting more popular, and hence
designing for these HD screens will require visual assets of greater dimensions for sharper display.
As digital marketers, it is important that we monitor the common device resolutions as screen
technology advances rapidly and the new decade could unravel new standards that our websites will
have to constantly adapt to or we shall risk falling behind more agile competitors.