3 ms·

Just a heads up: that JS-induced header flickering is distracting as hell. Use `position: fixed;` instead of a JavaScript hack that constantly flickers the head

Just a heads up: that JS-induced header flickering is distracting as hell. Use `position: fixed;` instead of a JavaScript hack that constantly flickers the header in and out of the window.

mpd 14y ago
position: fixed is quite broken on IOS[1] [1] http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ http://remysharp.com/2012/05/24/issues-with-position-fixed-s...
- damncabbage 14y ago
  So put the header at the top of the page like a regular block; if the platform doesn't have position:fixed, then don't try to emulate it. There's just not enough screen real estate to make a persistent header bar with social media links worth keeping there. (It's unpleasant on a desktop. It's downright obnoxious on a mobile device.)
- brink 14y ago
  It doesn't make sense to handicap every platform just because one is broken.
  - andrewmackenzie 14y ago
    I changed it to :fixed and shrunk the header bar on content pages. Looks fine on the iPad. I need to learn more about responsive design principles, etc. before I rewrite it for phone resolutions.
cantlin 14y ago
Yup, and the 126px fixed height is over 20% of my window on this MBA. Might be worthwhile compacting it a bit on devices with small displays.
- andrewmackenzie 14y ago
  Ya, :fixed doesn't behave as intended there. I tried it out on a 15" MBP, 13" MBP, iPad, Cinema Display, and phones, so I've seen that it's pretty cramped. I'm not great at responsive design yet, but I'll mess with it. Any advice on getting the images and text to scale to smaller screens within their divs would be appreciated. On that note, can't wait to see how Polygon.com is built.
  - rglover 14y ago
    For images, you can specify either multiple file types (load different resolutions with media queries), or use .SVG graphics (support is spotty in older browsers). Here are two handy guides: http://bit.ly/LzRkfN http://bit.ly/LzRkfN and http://bit.ly/MH1bjq http://bit.ly/MH1bjq. For text, it depends on which part. For body text (paragraphs), the easiest thing is to have a percentage based container and change font-sizes based on break points with media queries (e.g. at a screen with min-width of 768px, change font to this size). Headers are a bit different, you can follow the same approach as paragraph text or, use something like FitText (http://fittextjs.com/ http://fittextjs.com/). Love your work. Hit me up at me@ryanglover.net if you need code help.
    - andrewmackenzie 14y ago
      Awesome, checking this out. Didn't know Smashing did a totally responsive redesign either. Thanks!
  - callmevlad 14y ago
    In which way is "position:fixed" not behaving as intended? Just curious because this seems to be the textbook use case for fixed positioning.
    - adnrw 14y ago
      I am curious about this too. After disabling javascript and fiddling with this for about 1.5 minutes in Web Inspector I was able to get it to behave like the JS implementation reasonably reliably. It would only have required some CSS cleanup to move the icons etc. back into place properly.

Just a heads up: that JS-induced header flickering is distracting as hell. Use `position: fixed;` instead of a JavaScript hack that constantly flickers the header in and out of the window.

mpd 14y ago

position: fixed is quite broken on IOS[1] [1] http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ http://remysharp.com/2012/05/24/issues-with-position-fixed-s...

damncabbage 14y ago
So put the header at the top of the page like a regular block; if the platform doesn't have position:fixed, then don't try to emulate it. There's just not enough screen real estate to make a persistent header bar with social media links worth keeping there. (It's unpleasant on a desktop. It's downright obnoxious on a mobile device.)
brink 14y ago
It doesn't make sense to handicap every platform just because one is broken.
- andrewmackenzie 14y ago
  I changed it to :fixed and shrunk the header bar on content pages. Looks fine on the iPad. I need to learn more about responsive design principles, etc. before I rewrite it for phone resolutions.

cantlin 14y ago

Yup, and the 126px fixed height is over 20% of my window on this MBA. Might be worthwhile compacting it a bit on devices with small displays.

andrewmackenzie 14y ago
Ya, :fixed doesn't behave as intended there. I tried it out on a 15" MBP, 13" MBP, iPad, Cinema Display, and phones, so I've seen that it's pretty cramped. I'm not great at responsive design yet, but I'll mess with it. Any advice on getting the images and text to scale to smaller screens within their divs would be appreciated. On that note, can't wait to see how Polygon.com is built.
- rglover 14y ago
  For images, you can specify either multiple file types (load different resolutions with media queries), or use .SVG graphics (support is spotty in older browsers). Here are two handy guides: http://bit.ly/LzRkfN http://bit.ly/LzRkfN and http://bit.ly/MH1bjq http://bit.ly/MH1bjq. For text, it depends on which part. For body text (paragraphs), the easiest thing is to have a percentage based container and change font-sizes based on break points with media queries (e.g. at a screen with min-width of 768px, change font to this size). Headers are a bit different, you can follow the same approach as paragraph text or, use something like FitText (http://fittextjs.com/ http://fittextjs.com/). Love your work. Hit me up at me@ryanglover.net if you need code help.
  - andrewmackenzie 14y ago
    Awesome, checking this out. Didn't know Smashing did a totally responsive redesign either. Thanks!
- callmevlad 14y ago
  In which way is "position:fixed" not behaving as intended? Just curious because this seems to be the textbook use case for fixed positioning.
  - adnrw 14y ago
    I am curious about this too. After disabling javascript and fiddling with this for about 1.5 minutes in Web Inspector I was able to get it to behave like the JS implementation reasonably reliably. It would only have required some CSS cleanup to move the icons etc. back into place properly.