Post navigation

Intentional 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.

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.

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.

Hi Allison Grayce,
Thank you for this great post
Responsive web Design is usually popular with Digital Marketing and Advertising today. Many of us have read the studies about how precisely many individuals are usually being able to access Internet sites via cell or maybe non-desktop devices

Roy, absolutely start using them in your responsive websites! Forget about pixels Treehouse has a great course on responsive web design that goes into detail on relative typography.

Hello! We're the teachers here at Treehouse. We produce video courses on everything from web design and web development to iOS and business skills. You can browse our full library of content to find the course that's right for you.

In the meantime, explore the free features, tips, tricks and videos here on our blog. Tell us what you think, we'd love to chat: blog@teamtreehouse.com

Stay Updated

Sign up for our newsletter, and we'll send you news and tutorials
on web design, coding, business, and more! You'll also receive these
great gifts:

checkArt and the Web: Line, Shape, and Form - An eBook by Treehouse Teacher Nick Pettit.

checkOn Freelancing - An audiobook about running your own business by Simon Collison.

Swift is a new programming language created by Apple to program iOS apps. If you are new to programming or to Swift then this course is for you. Learn about programming concepts like: variables, types, collections and control structures.

Ruby is a programming language with a focus on simplicity and productivity, and it's used to create some of the biggest websites in the world. Learn how to work with Ruby and write simple Ruby programs in this introductory course.

Interested in creating Android apps? Learn the Java programming language, a tool for Android development called Android Studio, and some very basic concepts of the Android Software Development Kit, or SDK.

Bring your big idea to life! Learn how to start a company on the right foot with an introduction to basic business concepts, including corporate structure, marketing, finance, and accounting. Then you’re ready for more advanced business strategies.