When I started out in responsive web design, I was unsure 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 that allows web pages to respond differently when viewed on devices of varying sizes. The devices could be desktop computers, laptops, tablets, or smartphones. As more and more people are using smaller-screens to access the web, responsive Web design has become essential for anyone with an online presence. 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, making responsive web design an essential component of SEO.
What screen sizes should I target?
What screen size to target 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 essential 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?
Screen 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, you should always keep in mind to design your site based on the resolution most of the site’s target audience use.
