What The Heck Is Responsive Web Design?

Wow, what a nice surprise to see my creation on HN.<p>To all the critics, I built this to be a slide deck on responsive web design, not a responsive website itself. Its main purpose is for me to launch full screen on Chrome and show on a projector or tv. Its for educating my co-workers on the subject (haven't even had a chance to actually give a presentation yet). Can I at least get some points for using rem's? That's pretty cool, right? haha<p>Anyway, I did this over my winter break - as well as creating Scrollorama and scrolldeck.js and taking care of a new baby (yay! my 2nd son was born dec. 6). Thanks for checking out my stuff. Hope it is useful for some of you!<p>By the way, I'm currently rebuilding this using Bartek Szopka's excellent impress.js framework. <a href="http://bartaz.github.com/impress.js" rel="nofollow">http://bartaz.github.com/impress.js</a>

For a web design to be truely responsive and mobile friendly you need to do more than just move pixels about and change the size and layout of DIVs with media queries. A truely mobile-friendly site will serve a more contextually sympathetic experience to a person holding a mobile device, an experience that avails of all the additional contextual hints that you have available to you on mobile: location, heading, device orientation etc.<p>You can ignore all of this and create something that will render on a small screen, and say your mobile site is "done" but to do so is to miss out on the opportunities that mobile web presents. Doing this right is much harder of course, but there's a reason why almost all of the Alexa top 100 sites serve entirely different HTML to mobile devices, rather than taking a media queries approach.<p>There's a summary of all the ways to achieve these goals here: <a href="http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques" rel="nofollow">http://mobiforge.com/starting/story/mobile-web-content-adapt...</a>

Wow. For an article with that topic, that sure was painful to read on an iPad. Since a bunch of content entered the page on scroll (and iPad pauses DOM changes while scrolling), I had to constantly scroll small amounts to make sure I wasn't missing anything.

I figured out you could use the space bar to advance through the "slides", which made the presentation just about usable. I then instinctively - and possibly stupidly - tried to use backspace to go back a slide. Obviously, I arrived back at HN. I didn't go back to finish reading.<p>Interesting subject matter, poor presentation.

Terrible website, I gave up reading in frustration.

It wasn't until I came back here that I found out you should use arrow keys to navigate. Scrolling with the scroll wheel is so bad most people would think it was broken. With the arrow keys it works but doesn't make up for the first impression of it being broken.

For those interested in some neat examples, <a href="http://mediaqueri.es" rel="nofollow">http://mediaqueri.es</a>

For anyone having problems with that site, check out these examples. It should convey the idea:<p><a href="http://mediaqueri.es/" rel="nofollow">http://mediaqueri.es/</a>

<i>“Stop Thinking in Pages. Start Thinking in Systems.”</i><p>I actually prefer browsing pages than systems.

Oh my, this site failed so miserably on my browser (luakit)... All the animations just went wrong, bits of the page were missing or cut beyond the screen, stuff got jumbled and hid the text... Maybe I'm just too textually oriented, but that's not the way I would like to browse the Web.

the content is great, but presentation annoying as hell. should have just put it as static text.

Anyone have any thoughts or opinions on the books listed in the presentation?

Good ideas, I've been trying to get my company to jump on this bandwagon but they haven't been too 'responsive'... seriously.