Hacker News Reader

Comment by zackham | Hacker News Reader

Really nice support of different browser sizes. Resize your browser from wide to really narrow to check it out.

I have to admit they did a smart job of figuring out what makes sense at each screen size (different layout and controls, etc.).

Now I want their web team to share knowledge with the Metro team. :)

This was what I was going to point out. Great responsive design. Now if only their operating system was as sleek and as this ;)

Agreed! I noticed it plays very nicely with the window docking features in Windows 7. Beautifully done.

Except one thing that bugs me most on these "responsive" sites. The images are still loaded at their full resolution. Even when I reloaded after I resized the tab. Tried private tab to avoid cache - result still the same - 1600px wide image loaded.

It's working really nice and all but I think the point of responsive sites is to make them usable on small, mostly mobile, devices. And we still live in a age when the mobile bandwidth is something to worry about. I'd imagine the battery life would suffer a bit too.

In case you didn't know, this is a pressing concern for developers that do care about performance of responsive websites. Take a look at http://www.w3.org/community/respimg/

Scott Jehl of Filament Group just delivered a talk at An Event Apart on Responsible Responsive Design, and released Southstreet, a suite of tools designed to make responsive design more performant. Check it out at https://github.com/filamentgroup/Southstreet

Although the fonts in Chrome render very poorly on my machine whereas in IE9 they look great...

Same thing to me, Firefox on Linux. The fonts are jaggy.

Any idea how that's working? I've never seen image resizing work that well!

Setting `img { max-width: 100%; }` by default and scale it to `150%` when viewport reach certain threshold (for mobile). For the former, it will beautifully scale to the containing div size, for the latter, you can set outer div to `overflow: hidden` and left/right side will be cut off giving the image a square-ish feel.

after scaling the max-width to 150%, they did a margin-left:-40% to center the image

Reply on news.ycombinator.com