• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Wenmin Chen

  • Portfolio
  • About
  • Services
  • Blog
  • Resources
  • Contact
  • Email
  • LinkedIn
Wenmin Chen, Boston based freelance web designer and developer
Designing for different devices and screen sizes

Responsive Web Design

October 20, 2018 // wenminchen

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.

Related

Unit of measurement
Px, Em, and Rem
November 24, 2018
Categories: Design
Photo depicting wireframes used in ux design
User Experience (UX) Design 101
July 30, 2018
Categories: Design
Photo showing different fonts
Typography Basics
April 4, 2018
Categories: Design

Footer

About

Hi, I am Wenmin, a freelance web designer and developer based in Greater Boston who specializes in WordPress sites. Whether it’s an information site, a blog, or an eCommerce website, I can craft a one-of-kind website that appeals to your target audience. If you are interested in my website services, please check out my portfolio and contact me for a custom quote.

Featured Porfolio

  • Rob Cross | by Wenmin Chen, Boston freelance web developer & designer
  • Tom Davenport | by Wenmin Chen, Boston freelance web developer & designer
  • Sunshine Nursery School | by Wenmin Chen, Boston freelance web developer & designer
  • Lier Chen Photography | by Wenmin Chen, Boston freelance web developer & designer
  • Nepf Lab at MIT | by Wenmin Chen, Boston freelance web developer & designer
  • Martin Lab | by Wenmin Chen, Boston freelance web developer & designer
  • Gehring Lab | by Wenmin Chen, Boston freelance web developer & designer
  • Lab for Infant Development and Language | by Wenmin Chen, Boston freelance web developer & designer

© 2023 · Wenmin Chen. All Rights Reserved.