What The Heck Is Responsive Web Design?

What The Heck Is Responsive Web Design?(johnpolacek.github.com)

79 points by jimsteinhart 14 years ago | 31 comments

johnpolacek 14 years 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

ronancremin 14 years 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-adapt...

dsawler 14 years ago | |

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

Come on.

ronancremin 14 years ago | | |

Low-end devices are still important in some territories. Part of the reason JavaME is so popular (http://tech.fortune.cnn.com/2012/01/01/if-android-is-so-hot-...) is Opera Mini, but also the Nokia S40 browser.

This is worth a look also: http://www.slideshare.net/yiibu/adaptation-why-responsive-de...

rimantas 14 years ago | |

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

dsawler 14 years 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 14 years 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.

Angostura 14 years 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.

earnubs 14 years ago | |

Agreed. Do yourself a favour and consider the mobile platforms as a blank canvas to explore rather than a castrated desktop experience.

(In response to the comment above/below: don't castrate the desktop just to satisfy mobile either! Letting a hundred flowers blossom, or something...)

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

runn1ng 14 years ago | |

And more or less impossible with opera mini on iphone.

taf2 14 years ago | |

Not so nice on the iPhone either

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

jimsteinhart 14 years ago | |

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

rodw 14 years 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 14 years ago | |

Fix your web browser settings so backspace is pageUp.

marknutter 14 years ago | |

Wow, tough crowd.

lucian1900 14 years ago |

Terrible website, I gave up reading in frustration.

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

fceccon 14 years ago | |

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

dsawler 14 years ago |

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

uptown 14 years ago |

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

http://mediaqueri.es/

bnegreve 14 years ago |

“Stop Thinking in Pages. Start Thinking in Systems.”

I actually prefer browsing pages than systems.

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

zalew 14 years ago |

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

clutchski 14 years ago |

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

thebrokencube 14 years ago | |

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 14 years ago |

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