How To Make Your Life More Awesome With CSS3 Media Queries
TWITTER WEB @superhighfives charliegleason.comWho 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 designerand 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 ﬁve me. Allare valid forms of communication.
SO, UH... What are they?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 stylesbased 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 anexternal 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 threeminutes 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 youare a busy fabulous person who should be sipping margaritas on a beach while rose petals fall from above.
AND MORE IMPORTANTLY Why should you use them? EVERYONE ON THE INTERNET! YOU!Why should you use them? What are the beneﬁts? Progressive enhancement?The beneﬁts are simple. Less code, more devices. It’s not even difﬁcult to implement - just a couple of extra lines of CSS.The magic of using CSS3 media queries is that you can deﬁne 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 ﬁre it up when the display is of anappropriate 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 shouldhave 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 aplugin like jQuery Media Queries, which adds support to IE. Shiv that, Microsoft.
YOUR WORKFLOW:UI REVIEWS LOLCATS DEVELOPMENT UX TESTING BAD EMAILS RESEARCH CSS3 MEDIA QUERIES DESIGN BEER O’CLOCKGOOD EMAILS PLANNING COFFEE STEPHEN FRY TWEETS CREEPY EMAILS TESTING IE HATING IE PARALYSING SELF DOUBTHow should you integrate them into your workﬂow? 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. Theearlier 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 aglobal 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.
DEMO TIME! How to (and an introduction to the Less Framework)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 sizeyou’d like!
A QUICK DIGRESSION On mobile testingA digression on testing for mobilesRather 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, theOpera 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 kaftanfrom the gold label is not going to pay for itself.
THANKS, AWESOME HUMANS! TWITTER WEB @superhighfives charliegleason.com Lovingly typeset in Lato, an open source Google Web Fonts fontface by Łukasz DziedzicConclusionSo, 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!