Hacker News Reader

Comment by ra88it | Hacker News Reader

Resize the window to see how gracefully the site accomodates a wide range of window sizes (from a phone to a desktop monitor).

[edit: After further reflection, I'm stunned by how well they pulled this off. Huge leap forward.]

View on HN

I'm seeing the right hand adverts chopped off on the right hand side. Both of them. That's not good business if you are relying on advertising revenue to support the financial costs of running a site.

That's one of the drawbacks of this responsive design drive, they don't take into account content that needs to be at a fixed and known size. When an advert gets chopped off or disappears from above the fold - that pushes down the value of advertising on that site. Too much of that and the revenue generated this way drops.

There's no point having the surprised face on declaring that I don't understand the web and it wasn't designed for pixel-specific rectangular spaces. That requirement drives the sustainability of a large number of organisations, there's no point pretending it doesn't exist.

Yes, it's not just the flowed columns. Notice also: the masthead logo, the weather bug, the section menus (which switch to collapsed "Sections" at narrow width), the photo sizes.

Actually, it's the weather bug and the logo that really do it for me. There's a lot of love that went into this design.

gracefully is subjective. media queries feel abrupt, even on my 'fast' machine.

It's not the transition from one layout to another that is graceful. Under normal circumstances, you're not resizing your browser to use a site. What's graceful is the fact that the layout is well suited for each and every resolution you throw at it, whether you're on a full-screen desktop or a mobile phone.

The Globe developed (and released!) an incredibly neat piece of software to let them preview changes on 10+ devices simultaneously.

https://github.com/marstall/shim

You can see it in use very briefly from 1m 18s in:

http://www.boston.com/video/viral_page/?/services/player/bcp...

They should release a video of shim in action. A video explains it much better than words can. (I was lucky enough to get a sneak peak of all their new stuff a little while ago.)

Yes, but it's purpose isn't to resize on the fly as you change your browser window. It's to have one set of HTML that reflows to your device correctly depending on the viewport width. I just checked it on an iPhone 4 and iPad (both portrait and landscape) in addition to a desktop, and it works astonishingly well across screens sized from 3.5" to 27".

Are the media queries a little laggy? Sure. I'll tolerate that over having to hunt down a stupid "view full version"/"view mobile version" link (and I'm sure some optimizations can be done).

I think this will set a new standard for the term "mobile-friendly"

Abrupt in what browser? Chrome doesn't feel abrupt.

For me it doesn't render properly in firefox. It never seems to make it into the single column mode. Chromium on the other hand, smooth like butter.

yikes, bad karma, i was half joking with the negativity. good iOS apps have nice animated transitions between portrait and landscape.

I don't think media queries offer you that functionality, and I can't think of a way to do it within JavaScript. How would you do it?

I don't know much about javascript, I've just seen stuff like this -> http://masonry.desandro.com/demos/animating-jquery.html

Resize that page.

Interesting trick, but I don't think (could be wrong) that's applicable in this instance. I noticed immediately that this doesn't work in the place where you're most likely to see a resize/dimensions-change event: a tablet or phone. When you switch orientation on either, it just resizes the entire page itself. So it's not super useful in the place that most needs it.

Also, though this is much more subjective, I think that really looks terrible. Too much stuff is moving.

Reply on news.ycombinator.com