How does it work?

Using CSS Media Inquiries, the design elements will display a certain way as the screen width narrows or expands. In fact, many components used by Bootstrap are automatically responsive.

What does this mean for a designer?

Now, more than ever, people are moving to devices of all different sizes, which means we can't be designing for a specific screen size (i.e. desktop). What this means for designers, is that we have to think fluidly about our designs. How do they change when "scrubbing" the browser width down?

In my prototypes in Sketch, I have 3 separate prototypes - desktop, tablet and mobile - which generally provide enough context to developers to build at the consecutive breakpoints. I imagine prototyping will allow for more fluid design workflows in the near future.

If you're using a UI kit on a Scrum team, be mindful of how your patterns live in all widths

If your mockups don't match the behavior of a kit that is being implemented, and you're using a QA service, Quality Assurance will definitely find defects, which can slow your velocity of your scrum team if you're in an Agile environment. Additionally, if you're evolving a dated kit, make sure all patterns are device-agnostic, which means they'll be usable regardless of breakpoint.

You can future-proof your designs by incorporating fluid breakpoints now

If you're working in an organization that doesn't prioritize mobile-first design, chances are these designs may be used in mobile in the future - so it is best to solve for all responsive breakpoints today to lessen workload later. Disclaimer: this may not apply to everyone's projects.