HOW TO MAKE YOUR LIFE MORE AWESOME WITH

CSS3 MEDIA QUERIESWith your enthusiastic host, Charlie Gleason

that’s me

Introduction

Hi, friends. I am here to tell you a little bit more about the sheer overwhelming joy of using CSS3 media queries. CSS3 media queries make it super easy to design and develop resolution independent sites and applications using one code base. That means you can build one HTML page that renders correctly on an iPhone, an Android tablet or a desktop computer with nothing more than some sneaky CSS. Combine that with the power of JavaScript and you are going to be so awesome that the very earth you walk upon will rumble and shake. People who were mean to you in high school will rush your door, thrusting gifts into your well manicured hands, while kittens multiply at random everywhere you walk. Let’s get started, shall we?

WEB

charliegleason.comTWITTER

@superhighfives

Who am I?

Firstly, who am I? My name is Charlie Gleason, a design graduate currently studying a masters of Computer Science in an attempt to prove once and for all that one can be a hybrid designer and developer, and that a HECS debt can last forever. I am a full time freelancer, and if you have any questions later on please don’t hesitate to say hi or tweet or email or high five me. All are valid forms of communication.

What are they?SO, UH...

What are CSS3 media queries?

In a sentence, they are a simple declaration in your CSS that allow you to use different styles to appropriately cater for the device accessing the page.

Media queries have existed as a part of good old HTML4 and CSS2, allowing style sheets for different media types. CSS3 media queries extend that functionality by allowing different styles based on features like width and height. And that, friends, is where the magic comes from.

What it means is that we can have a set of styles for a screen that is really tiny, like an iPhone, and a completely different set of styles for a screen that is terrifyingly enormous, like an external display - all using one HTML page and one stylesheet. So say goodbye to awkwardly zooming in on an address on your mobile, and to giant fancy backgrounds that take three minutes to load on your 3G connection. You can serve resolution independent applications and websites, without having to build one for each size. Because that would take ages, and you are a busy fabulous person who should be sipping margaritas on a beach while rose petals fall from above.

YOU!

EVERYONE ONTHE INTERNET!

Why should you use them?AND MORE IMPORTANTLY

Why should you use them? What are the benefits? Progressive enhancement?

The benefits are simple. Less code, more devices. It’s not even difficult to implement - just a couple of extra lines of CSS.

The magic of using CSS3 media queries is that you can define how each device displays your content. Don’t want a user on an Android phone to have to scroll through laborious text? Simple, show the important bits and allow the user to expand them with jQuery. Want to have a big fancy scrolling parallax animations? Sure, just fire it up when the display is of an appropriate size. The best bit is that the user only sees what you serve them. They may not even know that the site could look different on another device, and nor should they. They should have the best possible user experience for the device they are on.

Also, because older browsers will ignore your CSS3 media queries, you can make the IE6 friendly layout (I giggled as I typed that) the default, and override it for your other sizes, or use a plugin like jQuery Media Queries, which adds support to IE. Shiv that, Microsoft.

DESIGNRESEARCH BEER O’CLOCK

DEVELOPMENTLOLCATS

YOUR WORKFLOW:

PLANNING

UI REVIEWS UX TESTING

GOOD EMAILS

BAD EMAILS

CREEPY EMAILS TESTING IE HATING IE PARALYSING SELF DOUBT

CSS3 MEDIA QUERIES

COFFEE STEPHEN FRY TWEETS

How should you integrate them into your workflow? And when should you not?

Working with project managers, designers and developers alike, I often get asked how I get my hair to look this good, and where CSS3 media queries come into the lifecycle of a project. The earlier the better.

I generally focus on the desktop-friendly design, and once the client has approved it, roll it out across the other sizes. Generally in this credit crunching emotional roller coaster ride of a global economy you’ll keep the same look and feel but make it accessible to phones, tablets and desktops.

And your design can roll with the times too - CSS3 media queries and webkit allows support for iPhone 4 retina displays. Your co-workers will think you are as brilliant as I do.

ExamplesLET THEM EAT CAKE!

Examples

I’m going to quickly run a couple of sites I have build using CSS3 media queries, and talk through some of the main goals I had.

Vaudeville: uses isotope, supports five sizes (a big display size on top) and uses javascript to reorganise things.Charlie: uses parallax at its largest, and simplifies everything when smaller.

How to (and an introduction to the Less Framework)

DEMO TIME!

How to (an introduction to the Less Framework)

It is as simple as adding a conditional statement to your existing stylesheet. Let’s review less framework as an example, but you could easily write your own media queries based on any size you’d like!

On mobile testingA QUICK DIGRESSION

A digression on testing for mobiles

Rather than buying a million mobiles, there are a options available for testing from your local machine. For iOS, download XCode for the iOS simulator. The Android SDK, Opera mini, the Opera mobile browser, and a quick Google search will reveal emulators for most major mobile operating systems. So save your pennies, friends. Because that Vivienne Westwood kaftan from the gold label is not going to pay for itself.

WEB

charliegleason.comTWITTER

@superhighfives

THANKS,AWESOMEHUMANS!

Lovingly typeset in Lato, an open source Google Web Fonts fontface by Łukasz Dziedzic

Conclusion

So, go forth and enjoy the unadulterated happiness that CSS3 media queries can bring to your life. Start with a small project and have a play. Your users and clients will thank you for it.

I should mention, this presentation was lovingly typeset in Lato, an open source Google Web Fonts fontface by Łukasz Dziedzic. Again, if you have any questions, feel free to come say hi. And a big thanks to John and Maxine for putting on this incredibly rad night. See you all at Web Directions in Sydney.

Thank you!