If you have been living under a rock, then you might not know about a great feature of CSS3 called @media. This allows for “responsive design” capabilities based on the size of the browser window. This is a great feature when your website needs to target both the desktop browser and the mobile browser. Today most websites accomplish targeting mobile and desktop browsers by having two separate websites, each website targeting a particular device.

Here are a few examples:

iPhone

@media screen and (max-width: 340px) {
   /* styles in here for this screen size */
}

Landscape (mobile)

@media screen and (orientation:landscape) {
}

This will target devices in landscape mode like the iPhone and Android mobile devices. This allows for the designer to create a fluid interface that will respond to the devices resolution restrictions. No matter what size the screen is the website can still be very readable and easy to navigate based on creating a set of CSS rules based on the media restrictions.

A great example of this is www.colly.com by Simon Collison, his website responds to the users browser window size or mobile device’s screen size. Repositioning page elements and hiding items is needed in order to create a more readable website no matter what the screen size is.

Many of you should be use to the following:

<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />

But with media queries we can do this in the CSS file:

@media print { }

Since “all” is the default media type, we can add a @media print to target printer output. @Media Queries uses good old Boolean logic (true|false) to determine if the CSS properties will be applied.

Why is this GOOD?

Well why is this NOT GOOD should be your question! The gained flexibility in design, reacting to the users’ browser or device allows for the website to render and display in a manner that is one readable, and secondly viewable to the user no matter the resolution or device. Hence the current “buzz” word in the industry: RESPONSIVE DESIGN. But this is a great buzz word, when did we have the capability to on the fly rearrange the websites content based on the users resizing of the browser (without JavaScript) or device orientation? For designers and developers this is something to be excited about and really look to use in your everyday development/design of web applications. Endless possibilities…

Sounds Like The Past

This reminds me of what Sun’s Java tried to promote years ago, “Write one, run anywhere”. In this case its, “Render Once, Respond to anything”.

References

If you are really bored feel free to read the W3 specification for @Media Queries.