I had a truly geek moment. I sat literally on the edge of my seat at AEA in 2010 while Ethan Marcotte unstoppablerobotninja.com and known on Twitter as @beep spoke of flexible and responsive design and how he incorporated css media queries to make a flexible and responsive site. When he pulled up robot-or-not.com as his freshly created demo site I can actually remember leaning over to the guy next to me and stating with the utmost certainty “This shit is going to turn front-end dev on its fucking ear.” after that I had a tough time focusing on nearly anything else.
I of course tried to take it back to my company at the time and see if there was ANY way to leverage it with any current or upcoming clients, but alas it was not quite ready for prime time. However, it was fully ready for what we consider progressive enhancement! If we followed the ideals of progressive enhancement we could use certain technologies straight away and the hell with IE, the fallback is the same desktop page they’re already seeing!
So now some time has passed and the technology hasn’t only matured, it’s been nurtured and encouraged to grow and flourish. With the advent of helper libraries and frameworks such as html5shiv (big thanks to Remy Sharp), modernizr and even respond.js you can utilize the technology in some way shape or form with success in nearly any target browser! I couldn’t literally mention each and every way you can jam this technology into your page as that would require multiple pages of links so you get the idea.
So what are some standards and such? There are a lot of ways to target specific screen sizes, as well as devices, orientation and even color support. Before we used to know that the hip trick was to provide separate stylesheets for screen and print but it’s a whole new thing to target a browser or even window size.
I bookmarked webdesignerwall.com/tutorials/css3-media-queries a while back because it was a perfect example of how to quickly get a css document started with media queries, it covers the most common sizes. However you can also grab really great starter frameworks like Less Framework 4 or Skeleton to get you moving in the right direction.
Here’s a list of some pretty great representations of Responsive Design:
- CSS-Tricks* a Web Design Community
- Developer Drive blog, news and tutorials
- Mobilism web conference
- Smashing Magazine writing and resources
- mediaqueri.es find more responsive sites here!
Final not, read up on some standards in media queries in the following pages: w3.org/TR/css3-mediaqueries, developer.mozilla.org/en/CSS/Using_CSS_media_queries and a nice reference lookup at @media">dochub.io/#css/@media. Speak up and let us know what resources you find that are helpful!
Quick Update, this site is now Responsive using Media Queries, I’m at this point still tweaking some of the smaller resolution versions however the basic changes are there.