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.
Interesting about using ems, maybe I missed that when learning responsive design but totally makes sense to use that instead of px. Will be switching all my font sizes to ems now
well, you should go and read about “rem” now, -> blows your mind 😀
I wouldn’t recommend learning rem before em. I think it’s important to understand the basic principles before you reach out for more. I know a lot of devs who use rem on a daily basis but struggle to explain what exactly an em is and why we should use it.
There is a nice series of articles about web typography by tutsplus http://webdesign.tutsplus.com/sessions/a-z-of-web-typography/ and imho one of the best articles about web type by Tim Brown http://alistapart.com/article/more-meaningful-typography
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.
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
arete additionally here to share Responsive Web Design services and Online Digital Marketing services
Interesting approach. Transitions have become common in UI’s and they do provide for a cleaner, sophisticated and pleasant experience. Thanks for sharing!
Thanks Grant! Glad you like it! Hope you can find a way to use this technique in your next project 🙂