Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Breakpoints

In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. For example, when a website is viewed on a regular desktop screen, the user sees the whole navigation menu on the sidebar. However, if it is viewed on a mobile device screen, the smaller screen size will cause the navigation bar to appear on the top left of the screen as a menu.

Essentially, breakpoints are pixel values that a developer/designer can define in CSS, which is short for cascading style sheets. When a responsive website reaches those pixel values, a transformation (such as the one detailed above) occurs so that the website offers an optimal user experience.

When should a Responsive Breakpoint be added?

A good rule to follow in this regard is to add a breakpoint when the content looks misaligned.

Visualize a paragraph of text. As the screen gets wider, it starts to become distorted and readability lowers. Adding a breakpoint here would prevent this from happening. The point of adding any breakpoint is to make content easy to read. This applies to both increasing and decreasing screen width. Whenever the content becomes harder to read because of changing screen size, add a breakpoint.

How To Set A CSS Breakpoint?

The most challenging part is to select the CSS media query breakpoints. There are no standard rules or syntax since different frameworks use different breakpoints.

Here are the two approaches to apply CSS breakpoints:

  1. Device-based breakpoints
  2. Content-based breakpoints

Device-Based Breakpoints

CSS media query breakpoints can be selected based on the device on which the website is being rendered. However, this is not a preferred approach since new devices are released frequently, and keeping up with new ones requires substantial effort.

Moreover, when a new device launches in the market, developers need to add a new breakpoint to the newly launched screen resolution. Applying the same breakpoint repeatedly to every device can turn out to be a cumbersome activity.

Depending on your website’s intent and the target audience, you can cover at least all the popular devices and subsequently apply breakpoints to them. As per a survey, close to 50 percent of web traffic originates from mobile devices. Therefore mobile first web design has become an absolute necessity in today’s time where mobile devices have become an indispensable part of our lives!

Content-Based Breakpoints

Instead of using device-based breakpoints, it’s better to use the website content for covering more scenarios in order to apply CSS media query breakpoints. In this approach, we simply set a breakpoint at each point where the content layout is misaligned. This method greatly simplifies the implementation along with easing the management of media queries.

As shown in this example, on minimizing the screen size; the content begins to distort which in turn hampers the readability. To avoid this scenario, we insert CSS media query breakpoints to improve the readability aspects of the content.

A Designer’s Role Working With Breakpoints

As a designer, it is more important to understand the concept of breakpoint rather than defining it ourselves. In reality, we always need to work with developers in design handoff and see what they need from us.

For the most part, because there are so many breakpoints that can be added these days with the multitude of device screen sizes available, developers usually require 3 mockups from us as a general reference – desktop, tablet and mobile. The exact numbers aren’t as important to designers as long as we are in communication with developers so that we understand what size they would need. If they did not specify, it is a good idea to stick to size templates available on design programs.

Scroll to Top