LearnIntentional Breakpoints with CSS Transitions

Responsive Web Design is more than just a few lines of code in your HTML & CSS. It’s an approach to building websites that requires us to think about the entire user experience. This means accepting that the user won’t use the site the way we want them to. If they can break it, they will. They will use outdated browsers, slow internet connections, zoom in and out, and resize the browser. It’s our job to not only prepare for those scenarios, but add thoughtful design around them as well. One way to do this is with CSS transitions.

Media queries allow us to change up the layout, swap out images, and change text size at various screen resolutions. But media queries alone can create a pretty jarring effect if you move from one breakpoint to the next. This could be by resizing the browser, zooming in and out, or rotating a device from landscape to portrait. Introducing CSS transitions alongside media queries in your responsive website can smooth out those breakpoints, making some design decisions appear less like a mistake and more intentional.

Getting Started with CSS Transitions

The best way to get started with transitions in your responsive website is to add the property to the body in your stylesheet, targeting all styles.

body {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}

Essentially what this small amount of code does is add a nice transition effect to all body styles as it changes from its original state to the new state defined within the media queries. I have chosen a duration of .5 seconds and a transition timing function of ease-in-out, but you can play with these settings to get the desired result.

It’s important to define all text in ems (the preferable unit of measurement for type in Responsive Web Design) so everything is relative to the body. This ensures the rest of the text throughout the responsive website will shrink proportionally, creating a cohesive transition effect.

But while this is a great start, sometimes adding the transition property to the body targeting all styles doesn’t give us enough control. What if we don’t necessarily want all styles to transition? In that case we would instead replace “all” with specific styles you’d like to add a transition to, separated by commas.

body {
-webkit-transition:font-size .5s ease-in-out;
-moz-transition:font-size .5s ease-in-out;
-o-transition:font-size .5s ease-in-out;
transition:font-size .5s ease-in-out;
}

Similarly, the body element alone is not always the end all be all. Continue exploring the possibilities with transitions in your responsive website, using the same code on other elements that are affected by breakpoints. But avoid some headaches and make sure to read up on which elements support css transitions first.

Moving Forward

As you’re playing with CSS Transitions and Responsive Web Design, make sure that your design decisions add to the overall user experience rather than take away from it. Going overboard with transition-delays and transition-timing-functions could give the illusion of slow performance and quite literally be the opposite of “responsive web design.” Instead, focus on making CSS transitions subtle and purposeful.