Hacker News Reader

Comment by Adaptive | Hacker News Reader

The real success here is not the fluid design (which is awesome). It's getting it through inside a traditional media company.

I'd love to read a frank overview of that process as well as the design itself.

View on HN

I agree. Responsive design itself is not difficult. But the sell must have been a difficult one. I'd love to hear it as well. My guess is it was based on a prototype. Seems everyone these days expects you to build one :-S

Having designed www.mogotix.com, which is completely responsive, I can say that fluid layouts absolutely create challenges that fixed layouts do not. That said, they're not insurmountable, and the benefits are substantial.

Elaborating: some things that are simple in a fixed layout can become very difficult in fluid ones.

Two brief examples: 1. Try embedding a YouTube video into a fluid layout. You'll need a JavaScript solution to remove the ugly black bands that will appear above and below your video. 2. IE 6-8 do not support media queries, which form the basis for fluid layouts. When we relaunched MogoTix in March 2011, I had to include a jQuery script to get IE to understand media queries (that script is now included by default in the 1140px grid at cssgrid.net).

If anyone has questions about implementing a fluid layout, feel free to ask.

Paravel and Chris Coyier released fitvids.js last week which solves the fluid video embeds issue pretty nicely (fitvidsjs.com).

How do you overcome making sure mobile devices don't download lots of images/interactive components they won't/don't/can't display?

I don't know about the person you're replying to, but I'll inject interactive components after page load (blocking them out so as not to cause reflowing, and hiding those blocks via media queries on inapplicable devices). Images, etc. are certainly trickier, I haven't found a good way to do that.

http://www.alistapart.com/articles/responsive-web-design/

This looks like a good start to get the basic idea with examples on this space.

Today is the first time i saw something like this and im really interested on learning it.

Ethan, the author of the RWD article, was actually on the team who worked on The Boston Globe site. He's been giving talks on the project and the process. I don't know if it is anywhere online, but it's very interesting.

Why does alistapart, which appears to focus on usable web design, have these features?:

* A tiny font * huge spacing between lines * excessively wide columns * that cannot be resized

The fundamentals are solid (the line height is perfectly alright, about one hundred characters per line are within the range of empirical results on optimal readability).
I suspect the font is so small because the design is so old. As far as I know it hasn’t been updated in ages. It’s old but by no means bad design.

Amen. Coming from a history of local news... God they don't understand web design. My local stations still have pop-ups.

I agree. The local newspaper here recently redesigned its website[1] with "social" rubbish baked right in, to the point where the paper's own news feed is now interspersed with the random ramblings of website users, Tweets, rants and ads disguised as articles. I particularly love the way reporters now have their Twitter names instead of actual bylines under their articles (hello, "moontunes1", "lexis1234" and "elksie"!)
It's a pointlessly "social" horror--they seem to have been reading too much trendy babble on TechCrunch or Mashable and too little UX literature. Who told them any of this was a good idea? We visit the local newspaper website to read the stories published by the professional journalists at that paper. If I want to read a stream of tweets and rants, I'll visit Twitter or a forum. What a mess.
[1]: http://www.thisisstaffordshire.co.uk/home

It's worth noting that the Boston Globe is owned by the New York Times Co. I'd be somewhat comfortable (and admittedly, somewhat hopeful) venturing a guess that they're pushing this design as some sort of skunkworks project for their bigger brands.

That's an interesting idea. I'd be surprised if this was true on the simple grounds that this kind of cross fertilization and business unit coordination is very agile and the times doesn't strike me as agile as a parent company.
BUT... if it is true it's a very canny maneuver. Again, this kind of inside view of the process (the business end of getting this through) would be great to hear about.
(are the times ad sales coordinated across BUs? this would be the big tipoff... if so then I can see the redesign being coordinate)

Bravo for this - what was the approach? Let's hear it!

the designer is Ethan Marcotte, he's written a book about fluid (or as he calls it, "responsive") web design.
http://www.abookapart.com/products/responsive-web-design
one member of the backend dev team was posting in /r/web_design over on reddit. if you're really interested, it couldn't hurt to post a reply and ask him about things.
http://www.reddit.com/r/web_design/comments/kd2e9/boston_glo...

Ethan has written about his experiences here: http://unstoppablerobotninja.com/entry/the-boston-globe/

Ethan gave a wonderful talk including several points about this design at Converge SE (http://convergese.com/) this June.

Reply on news.ycombinator.com