Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

CSS transitions & media queries

Posted on 31 May 2011 14 comments

Article illustration for CSS transitions & media queries

While coding up the site for our Insites Tour, I happened across an accidental feature: a smooth transition on growing / shrinking type and image sizes when I resized the browser window. This isn’t particularly groundbreaking and has probably been put into use by others, but as I personally haven’t seen it used elsewhere on the web, I thought it’d be good to make a note of this happy accident.

The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize?

A note about relative sizing

On recent sites that I’ve designed responsively, such as the one for Ampersand, I’ve employed a simple technique of shrinking the body type as the browser width decreases. Since the font size is declared in ems and thus everything is relative to the body, this has the result of cascading down to the other elements and shrinking them, too. It’s nice and simple and looks something like this:


body { 
    font:1em/1.5em 'Verdana', 'Arial', sans-serif; 
}
@media screen and (max-width:800px) { 
    body { 
        font-size:0.8em; 
    }
}
@media screen and (max-width:400px) { 
    body {
        font-size:0.7em; 
    }
}

In our example code above, the media queries kick in at 800px (reducing the type down to 0.8em) and at 400px (reducing the type even further to 0.7em). To see that in action, have a look at demo 1 and resize your browser window.

Adding the transitions

The code for initiating the transitions is extremely simple, and is only this long because of the vendor prefixes:


body { 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

Once that code is added, you’ll see that the resizing happens smoothly (over 0.2 seconds) instead of jumping suddenly. For proof, check out demo 2. Mmmm… bendy.

Doing it for images

You can add a transition to virtually any element you want (although be aware of how resource-intensive this might be), and applying one to images results in an even more obvious effect as the image grows and shrinks. To try it out, I’ve added an img tag into my markup and amended the CSS as you’d expect:


body { 
    font:1em/1.5em 'Verdana', 'Arial', sans-serif; 
}
img { 
   width:400px; 
}
@media screen and (max-width:800px) { 
    body { 
        font-size:0.8em; 
    }
    img { 
        width:300px; 
    }
}
@media screen and (max-width:400px) { 
    body {
        font-size:0.7em; 
    }
    img { 
        width:200px; 
    }
}
body, img { 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

You can see the final thing in action by visiting demo 3 and watching how both the type and image grow and shrink as you resize your browser window.

A word of caution

As with anything that relies on relatively new, still-in-flux technology, be sure to exercise caution if you decide to put this into practice. Browser support is not universal (and behaviour is still inconsistent, even when supported), and as I mentioned above, applying transitions to multiple elements can be a little resource-intensive. In fact, the only reason this works alright on the Insites website is because the whole thing is a very simple, type-driven page. I’d be wary of putting this into practice on larger sites with more elements to contend with.

File this under ‘UI effects that are essentially rather useless but add a nice little touch if anybody happens to notice them’.

14 comments

  1. Dan Rubin

    Dan Rubin

    31 May 2011 @ 05:54PM #

    Excellent stuff, Elliot. I played around with something similar last year for a simple workshop demonstration (http://webgraph.com/2010/) but the transition is for orientation change on iOS devices (and anything else that supports orientation in a media query). The example also sizes all text (and the layout) relative to the body type size (all positioning was done in ems as an experiment — works fairly well but has its issues).

    I love that people are discovering less-obvious uses for transitions — smoothing the resizing experience is a good effect, as long as people don’t take it to extremes and make the interface feel slow, sluggish. There’s a second meaning to “responsive web design” that needs to be discussed: that of speed and literal “responsiveness” when using transitions :)

  2. Ben Bodien

    Ben Bodien

    31 May 2011 @ 05:58PM #

    A nifty trick, but I’d agree with your filing category at the end ;) This is definitely easter egg territory.

    Don’t get me wrong though, you know as much as anyone that I love my easter eggs, but I’d point out that it’s pretty much only web designers/developers resize their browsers to view layout changes (just like only web designers view a site in more than one browser to compare differences), and that the primary purpose of a responsive design is to cater for different display resolutions.

    I worry a bit that we web folk are losing sight of such a fundamental point.

  3. Kev Adamson

    Kev Adamson

    31 May 2011 @ 06:00PM #

    Nice idea. I can see this being a useful effect when switching between orientation, as it is more likely to be seen.

  4. Jason Gross

    Jason Gross

    31 May 2011 @ 06:01PM #

    Unfortunately I don’t find the application of this particular practice to merit the work of putting it together. Sure, responsive designs are intended to work with a wide variety of browser shapes and sizes but how often will our users actually be changing the size of their browser enough to see these transitions?

    Of course what is appreciated (and perhaps the primary point) is the thought process behind executing this code. I love Dan’s idea of adding a similar type of transition for changes in device orientation and I think continuing to extend our creativity with how we use new features in CSS often leads to some inspiring stuff.

  5. Ben Bodien

    Ben Bodien

    31 May 2011 @ 06:07PM #

    @Kev Adamson Good point, it does make a nice effect during orientation change on the iPad, although I’d be wary of the performance implications for a more complex DOM, as I find orientation changes triggering media queries to be a bit “chuggy” most of the time.

  6. Brendan Falkowski

    Brendan Falkowski

    31 May 2011 @ 07:20PM #

    Jeremy Keith’s work for St Paul’s School is nice demonstration of animating the transition between media queries. It’s rightly applied to select elements only. The performance hit of { transition-property:all; } would bog down pages more complex than Insights Tour (which is lovely).

    I think it’s worth observing when responsive sites are/not resizing text for different viewports. It’s a complicated relationship between pixel density, reading distance, and physical character height. Readability in a browser at 320px won’t necessarily be optimal on iPhone et al.

  7. TheFella

    TheFella

    01 June 2011 @ 11:42AM #

    Great tips there Elliot! It’s the little touches such as this that can make a really good site great.

  8. Jesse Gardner

    Jesse Gardner

    01 June 2011 @ 12:38PM #

    Great tips, Elliot. This falls in to the “delight” category, things that cause tiny bits of excitement when they’re discovered.

  9. Chris Cox

    Chris Cox

    01 June 2011 @ 02:07PM #

    Good call, but for forwards compatibility I’d recommend always putting the vanilla CSS rule as the last declaration after the vendor-specific prefixes, so when (for example) Firefox 6 supports the property the -moz prefixed version is automatically superseded.

  10. Jenna

    Jenna

    01 June 2011 @ 03:44PM #

    I stumbled across this too with a responsive layout and also filed it away as basically useless. Reading the comments here makes me want to try something with it again, especially for transitioning between device orientation changes, or applied in a way more like the St. Paul’s School example. Here’s my example if you want to take a look.

  11. Jason Neel

    Jason Neel

    31 May 2011 @ 07:11PM #

    Nice! I’ve noticed this on some other websites, specifically some of the responsive designs Clearleft has developed.

    One point though. For your transition declaration, isn’t it still best practice to put the property without a vendor prefix last, ensuring that the standard version trumps all others when available? Like so:

    body {
    -o-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -webkit-transition:all .2s linear;
    transition:all .2s linear;
    }

    It’s probably me being nit-picky, but just thought I should bring it up.

  12. Micheal Anderson

    Micheal Anderson

    25 June 2011 @ 05:43AM #

    CSS3 rocks man. Many new features are coming and all are amazing. I love them all. Thank you man. I specially liked media queries. With them, no need to redesign your work for cell phones and devices. Just use media queries and everything is done! I also like CSS3 Animations. They come really handy.

  13. Andrew Browne

    Andrew Browne

    25 June 2011 @ 02:56PM #

    This is great. I’ve been playing around with media queries and responsive web design for little while now. Still learning but tips like these are timely. I agree with the general sentiment: Use with caution.

  14. John Smith

    John Smith

    27 June 2011 @ 10:25AM #

    I reading your blog! Also thanks for this article!

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.