It’s 2011, the way we consume the internet has changed quite a bit over the past few years. We’re now dealing with a whole new range of web capable devices: smartphones, tablets and TV’s, just to name a few. Yet for the last couple of years websites are designed and built for a 1024 px screen resolution. This so called standard is no longer accurate and if we keep making products for this old screen resolution, a lot of people will feel discriminated. When someone gets their hands on a brand new device and they are still presented with an interface which is no longer relevant, chances are they won’t be very happy.
That’s why it’s time for responsive awareness. The presentation included in this blogpost exists out of three parts and is intended for everybody with an interest in responsive web design and development, designers and front-end developers. Are you ready to make the switch? Do you want to deliver optimal user experience at all times? Get responsive already.
Demo
Look ma, no javascript. Without scripting however IE6, IE7 & IE8 won’t display properly. If you would like to see this work in every browser known to mankind simply include respond.js. While viewing the demo, screen resolutions are displayed in the upper left corner. Depending on your screen size you can see up to seven different layouts. The css is dynamic thanks to less.
Presentation
This presentation aims to shed light on do’s and don’ts for both designers and front-end developers. You can expect some tips on how to approach a responsive project, how to optimize the website for speed and plenty more.
I just wanted to point out that it’s better to bundle all your CSS in 1 file and wrap the corresponding rules in their media queries instead of having multiple files and including a media attribute.
The problem is that network stuff gets initialized before the browser determines what resolution it’s at (at least afaict). This results in most browsers downloading all stylesheets anyway, so might as well save some requests and serve it all in 1 go, right?
-> chrome 16 hard refresh at fullscreen http://i.imgur.com/BTAfN.png
sorry, previous comment wasn’t really a hard refresh, although the result is pretty much the same -> http://i.imgur.com/PywTF.png
I see what you are saying, however i deliberately chose to split them up. For bigger websites it should be better to split them so different devices don’t end up loading unnecessary code. I think with javascript, modernizr and respond.js enabled resolutions should only end up requesting their appropriate file. haven’t tested though, will try to get back on that.
It’s 2011 and this presentation does not work on an iPad.
that’s because of the slideshare implementation. follow this link to check it out on your ipad. http://www.slideshare.net/mobile/onehundred_be/responsive-awareness