3 ms·

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

by jgavris 15y ago

iKnowKungFoo 15y ago
Abrupt in what browser? Chrome doesn't feel abrupt.
- sixothree 15y ago
  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.
- jgavris 15y ago
  yikes, bad karma, i was half joking with the negativity. good iOS apps have nice animated transitions between portrait and landscape.
  - eropple 15y ago
    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?
    - jgavris 15y ago
      I don't know much about javascript, I've just seen stuff like this -> http://masonry.desandro.com/demos/animating-jquery.html http://masonry.desandro.com/demos/animating-jquery.html Resize that page.
      - eropple 15y ago
        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.
Firehed 15y 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"
okalex 15y ago
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.
- goatforce5 15y ago
  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 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/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001 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.)

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

by jgavris 15y ago

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

iKnowKungFoo 15y ago

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

sixothree 15y ago
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.
jgavris 15y ago
yikes, bad karma, i was half joking with the negativity. good iOS apps have nice animated transitions between portrait and landscape.
- eropple 15y ago
  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?
  - jgavris 15y ago
    I don't know much about javascript, I've just seen stuff like this -> http://masonry.desandro.com/demos/animating-jquery.html http://masonry.desandro.com/demos/animating-jquery.html Resize that page.
    - eropple 15y ago
      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.

Firehed 15y 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"

okalex 15y ago

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.

goatforce5 15y ago
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 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/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001 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.)