Wow, what a nice surprise to see my creation on HN.
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
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!
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.
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.
I couldn't take Responsive that article on mobiforge seriously once I read this "Responsive design does not lend itself well to low-end devices since the same block of HTML is delivered to all devices, large or small. The much vaunted Boston Globe site, a responsive design tour de force, does not work well or at all on popular phones such as the Motorola RAZR or Nokia 6100."
This is said a lot, and I have to disagree. The content I serve to someone on a large monitor is going to be different than what I serve up to someone on mobile because I understand what the different needs and desires are for the user groups on each device, not because anything else is noise and filler.
Not quite. It's like limiting the dashboard of a smaller car.
For instance, mobile users can do without the "Latest Posts" sidebar on a forum, but the users preferred it on the desktop. You'd probably remove most of the Twitter Bootstrap topbar links from the mobile version because they'd scrunch up and get in the way, but that doesn't mean having the "Quickstart Guide" link convenient on the desktop version.
There's nothing glorious about not taking advantage of larger screen real estate to make your website more usable, convenient, and feature-accessible to your users. It's the difference between good and bad design.
Not really. I might prioritise the 'Find us' page and the staff biographies in the mobile site - bring them front and centre in navigation. By contrast, case studies are unlikely to be so important to the mobile user, but that doesn't mean that someone evaluating a company isn't interested in them.
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.
What I find the most ironic is that such new and hip technology (neat javascript tricks) is used to imitate the lamest and most boring forms of presentation (powerpoint) ever.
What I find the most sad is that someone will think this is a really good presentation technique and start using it, while clients will not know what hit them.
This is a really good example of all that can go wrong when HCI is done this way.
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.
I had the same problem as other posters--this presentation more or less breaks scrolling (it still works, but is very awkward).
Using the left/right arrow keys to navigate the presentation works quite well. To bad that navigation tip isn't included on the first slide or on that persistent gray bar or something. It makes a huge difference.
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.
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.
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
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!
By the way, I'm currently rebuilding this using Bartek Szopka's excellent impress.js framework. http://bartaz.github.com/impress.js