In my first post on this topic, "Everyone’s talking about responsive design, but what does it mean?" I discussed responsive web design and the use of various essential techniques:

• Fluid Layout
• Media Queries
• Viewport

A key aspect of achieving responsive web design is the successful use of Media Queries.

Media Queries allow web developers to target a specific width of device/browsers, so that they can apply the appropriate styling and sizes for a predetermined width. This results in one code base and a number of style sheets, allowing a webpage to be rendered appropriately across multiple devices, browsers and platforms.

So far, so good.

But depending upon how you implement your site and apply Media Queries, very often you are able to see the transition between the various Media Queries, that take place when you resize the desktop browser. Sometimes the transition can be clunky and jarring.

So how can you improve this? One answer lies in how you use Transitions.

Transitions are a method of informing the browser how to animate from one state to another using CSS. Combining Media queries with transitions, when the browser resizes to a point where a different Media Query is applied, the changes to the page elements can be animated, adding a little more smoothness and visual finesse to your site.

To demonstrate this we have created a couple of pages one using Media Queries only and a second with Transitions also applied. For the purpose of the demo we have identified three sizes where styling and transitions change, these are 480px wide (mobile) 1024px wide (tablet) and greater than 1024 pixels wide (desktop). 

The demo pages contain a header, body content  (a number of pseudo articles with an image) and a footer. For each of the different device/browser widths mentioned, the page’s font size, image size and article widths are dynamically adjusted.

As you will see from the demo, using Transitions adds that extra finesse to your site.

However two considerations are:

• Not all browsers support Transitions, below is a list browsers and versions with CSS3 Transitions supported
• IE10
• Firefox 4+
• Chrome 4+
• Safari 3.1+
• Opera 10.5+
• iOS Safari 3.2+
• Android browser 2.1+
• Animating a lot of items on your page may look fine on your desktop computer however, use less powerful devices such as netbooks, tablets and mobiles, and you will notice the animations slow down and judder a bit.
• If you are planning on making your website responsive across devices and platforms, then consider using Transitions appropriately to add an extra finesse to your user experience.