5 ms·

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

by zackham 14y ago

voltagex_ 14y ago
Any idea how that's working? I've never seen image resizing work that well!
- sirn 14y ago
  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.
  - p0larboy 14y ago
    after scaling the max-width to 150%, they did a margin-left:-40% to center the image
meej 14y ago
Agreed! I noticed it plays very nicely with the window docking features in Windows 7. Beautifully done.
makecheck 14y ago
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. :)
justindocanto 14y ago
This was what I was going to point out. Great responsive design. Now if only their operating system was as sleek and as this ;)
rplnt 14y ago
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.
- bmuenzenmeyer 14y ago
  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/ 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 https://github.com/filamentgroup/Southstreet
lusr 14y ago
Although the fonts in Chrome render very poorly on my machine whereas in IE9 they look great...
- wazoox 14y ago
  Same thing to me, Firefox on Linux. The fonts are jaggy.

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

by zackham 14y ago

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

voltagex_ 14y ago

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

sirn 14y ago
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.
- p0larboy 14y ago
  after scaling the max-width to 150%, they did a margin-left:-40% to center the image

meej 14y ago

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

makecheck 14y ago

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. :)

justindocanto 14y ago

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

rplnt 14y ago

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.

bmuenzenmeyer 14y ago
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/ 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 https://github.com/filamentgroup/Southstreet

lusr 14y ago

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

wazoox 14y ago
Same thing to me, Firefox on Linux. The fonts are jaggy.