

What The Heck Is Responsive Web Design? - jimsteinhart
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

======
johnpolacek
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!

By the way, I'm currently rebuilding this using Bartek Szopka's excellent
impress.js framework. <http://bartaz.github.com/impress.js>

------
ronancremin
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.

There's a summary of all the ways to achieve these goals here:
[http://mobiforge.com/starting/story/mobile-web-content-
adapt...](http://mobiforge.com/starting/story/mobile-web-content-adaptation-
techniques)

~~~
rimantas
The thing is: the stuff you serve for mobile is the only stuff worth serving.
Anything else is noise and filler.

~~~
dsawler
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.

------
baddox
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.

~~~
laumars
It was painful in a desktop browser too.

It's ironic really that such terrible layout was born from a document
detailing optimal layout concepts

~~~
YourAnMoran
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.

~~~
DrCatbox
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.

------
elmomalmo
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.

Interesting subject matter, poor presentation.

~~~
jimsteinhart
just use the arrow keys to navigate back and forth trough the slides

~~~
rodw
Ah. Much better.

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.

------
lucian1900
Terrible website, I gave up reading in frustration.

------
samwillis
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.

~~~
fceccon
The effect is not bad if you scroll with the touchpad, but in a couple of
slides I thought it was stuck.

------
dsawler
For those interested in some neat examples, <http://mediaqueri.es>

------
uptown
For anyone having problems with that site, check out these examples. It should
convey the idea:

<http://mediaqueri.es/>

------
bnegreve
_“Stop Thinking in Pages. Start Thinking in Systems.”_

I actually prefer browsing pages than systems.

------
qwertyboy
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.

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

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

~~~
thebrokencube
Ethan Marcotte's book (<http://www.abookapart.com/products/responsive-web-
design>) is pretty good. Not too long, and yet goes over a lot of theory and
examples on how to achieve a responsive design.

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

