When I first started out in responsive web design, I was rather confused as to what breakpoints to use in my media queries for CSS. In today’s post, I will briefly explain what responsive web design is, what screen sizes to target, as well as popular screen resolutions to consider when building a responsive website.
What is responsive web design?
Responsive web design is a way of designing websites whereby the web pages respond differently when viewed on devices of varying sizes. The devices could be desktop computers, laptops or small screen devices such as smartphones and tablets.
Responsive Web design has become essential for anyone with an online presence due to the fact that more and more people are using smaller-screens (smartphones, tablets and other mobile computing devices) to access the web; that number is expected to continue to increase at a rapid rate. Search engines like Google has even made responsive web design a factor when deciding what to display in web search results and in what order.
What screen sizes should I target?
The answer depends on your target audience and your priorities. With so many devices out there it is obviously impossible to target every screen sizes. To keep things simple, you should define the breakpoints in your CSS to target a limited number of screen resolutions. In particular, you should target the width not the height. Why would you want to do that? The reason being that our content should fit in the browser window without having to use horizontal scrollbars. While people are used to using vertical scrollbars, horizontal scrollbars don’t feel natural to us. That being said, it is important to make sure important information are “above the fold,” meaning visible without vertical scrolling.
Possible breakpoints to consider
Not all websites use the same media query breakpoints. Some designers prefer to target the following four breakpoints, which is used by the Twitter Bootstrap framework:
- Smaller than or equal to 768px (smartphones)
- Larger than 768px (small devices, tablets)
- Larger than 992px (medium devices)
- Larger than 1200px (large devices)
Another popular option is to use the following breakpoints:
- Smaller than 480px (smartphone)
- Greater than 480px but smaller than 1024px (tablet)
- Greater than 1024px (regular desktop)
What are the popular screen resolutions?
Resolution is the maximum number of pixels that can be displayed on a monitor, expressed as (number of horizontal pixels) x (number of vertical pixels). According to StatCounter, below are the screen resolution stats worldwide as of October 2018:
- 360×640 – 19.99%
- 1366×768 – 11.85%
- 1920×1080 – 9.43%
- 375×667 – 5.06%
- 1440×900 – 3.26%
- 1280×800 – 2.6%
While it is important to keep abreast of the latest screen resolution stats when designing and developing a website, the key point to keep in mind is that you should always design your site based on the resolution most of the site’s target audience use.