How To Make Your Life More Awesome With CSS3 Media Queries


Published on

My presentation from What Do You Know, Melbourne, 31st August, 2011.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How To Make Your Life More Awesome With CSS3 Media Queries

  1. 1. HOW TO MAKE YOUR LIFE MORE AWESOME WITH CSS3 MEDIA QUERIES With your enthusiastic host, Charlie Gleason that’s meIntroductionHi, 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 resolutionindependent 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 withnothing 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 whowere 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?
  2. 2. 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 five me. Allare valid forms of communication.
  3. 3. 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.
  4. 4. AND MORE IMPORTANTLY Why should you use them? EVERYONE ON THE INTERNET! YOU!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 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.
  5. 5. 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 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. 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.
  6. 6. LET THEM EAT CAKE! ExamplesExamplesI’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.
  7. 7. 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!
  8. 8. 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.
  9. 9. THANKS, AWESOME HUMANS! TWITTER WEB @superhighfives 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!