6 ms·

What The Heck Is Responsive Web Design?

79 points by jimsteinhart 15y ago

baddox 15y ago
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 15y ago
  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 15y ago
    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 15y ago
      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.
- taf2 15y ago
  Not so nice on the iPhone either
- runn1ng 15y ago
  And more or less impossible with opera mini on iphone.
zalew 15y ago
the content is great, but presentation annoying as hell. should have just put it as static text.
lucian1900 15y ago
Terrible website, I gave up reading in frustration.
ronancremin 15y ago
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-adaptation-techniques http://mobiforge.com/starting/story/mobile-web-content-adapt...
- rimantas 15y ago
  The thing is: the stuff you serve for mobile is the only stuff worth serving. Anything else is noise and filler.
  - Angostura 15y ago
    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.
  - dsawler 15y ago
    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.
  - danneu 15y ago
    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.
elmomalmo 15y ago
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.
- marknutter 15y ago
  Wow, tough crowd.
- jimsteinhart 15y ago
  just use the arrow keys to navigate back and forth trough the slides
  - rodw 15y ago
    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.
- Drbble 15y ago
  Fix your web browser settings so backspace is pageUp.
realschool 15y ago
Good ideas, I've been trying to get my company to jump on this bandwagon but they haven't been too 'responsive'... seriously.
- deleted 15y ago
  [deleted]
samwillis 15y ago
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.
- deleted 15y ago
  [deleted]
- fceccon 15y ago
  The effect is not bad if you scroll with the touchpad, but in a couple of slides I thought it was stuck.
dsawler 15y ago
For those interested in some neat examples, http://mediaqueri.es http://mediaqueri.es
uptown 15y ago
For anyone having problems with that site, check out these examples. It should convey the idea: http://mediaqueri.es/ http://mediaqueri.es/
qwertyboy 15y ago
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.
johnpolacek 15y ago
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 http://bartaz.github.com/impress.js
bnegreve 15y ago
“Stop Thinking in Pages. Start Thinking in Systems.” I actually prefer browsing pages than systems.
clutchski 15y ago
Anyone have any thoughts or opinions on the books listed in the presentation?
- thebrokencube 15y ago
  Ethan Marcotte's book (http://www.abookapart.com/products/responsive-web-design 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.
deleted 15y ago
[deleted]

79 points by jimsteinhart 15y ago

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 15y ago
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 15y ago
  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 15y ago
    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.
taf2 15y ago
Not so nice on the iPhone either
runn1ng 15y ago
And more or less impossible with opera mini on iphone.

zalew 15y ago

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

lucian1900 15y ago

Terrible website, I gave up reading in frustration.

ronancremin 15y ago

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-adaptation-techniques http://mobiforge.com/starting/story/mobile-web-content-adapt...

rimantas 15y ago
The thing is: the stuff you serve for mobile is the only stuff worth serving. Anything else is noise and filler.
- Angostura 15y ago
  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.
- dsawler 15y ago
  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.
- danneu 15y ago
  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.

elmomalmo 15y ago

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.

marknutter 15y ago
Wow, tough crowd.
jimsteinhart 15y ago
just use the arrow keys to navigate back and forth trough the slides
- rodw 15y ago
  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.
Drbble 15y ago
Fix your web browser settings so backspace is pageUp.

realschool 15y ago

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

deleted 15y ago
[deleted]

samwillis 15y ago

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.

deleted 15y ago
[deleted]
fceccon 15y ago
The effect is not bad if you scroll with the touchpad, but in a couple of slides I thought it was stuck.

dsawler 15y ago

For those interested in some neat examples, http://mediaqueri.es http://mediaqueri.es

uptown 15y ago

For anyone having problems with that site, check out these examples. It should convey the idea: http://mediaqueri.es/ http://mediaqueri.es/

qwertyboy 15y ago

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.

johnpolacek 15y ago

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 http://bartaz.github.com/impress.js

bnegreve 15y ago

“Stop Thinking in Pages. Start Thinking in Systems.” I actually prefer browsing pages than systems.

clutchski 15y ago

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

thebrokencube 15y ago
Ethan Marcotte's book (http://www.abookapart.com/products/responsive-web-design 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.

deleted 15y ago

[deleted]