Hacker News Reader

Comment by guywithabike | Hacker News Reader

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.

View on HN

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.

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.

In which way is "position:fixed" not behaving as intended? Just curious because this seems to be the textbook use case for fixed positioning.

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.

Ah, I see. The problem is that I'm an idiot and was :fixing the wrong div. For some reason it was collapsing ingloriously upon itself. Must've been a 3 AM hackjob.

Also, I'm gonna shrink the header for all of the content pages. Good call.

Thanks again for the help and feedback!

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 and 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/).

Love your work. Hit me up at me@ryanglover.net if you need code help.

Awesome, checking this out. Didn't know Smashing did a totally responsive redesign either. Thanks!

I can't reply to the OP's reply, so I'll write it here: my advice is to give up on responsive design, particularly if it's giving you trouble. Why bother unless it's "free" (given to you by some premade design you're using)? In general you're going to have to design a page different per medium, so why make the technical implementation of that design more difficult on yourself by having responsive design as a constraint.

Sure, totally valid. I just built the site from scratch in simple HTML/CSS, so I figure this is a risk-free place to learn something new. I've been doing a lot of IA and product management for 18 months, so I'm catching up on the latest practices a bit.

position: fixed is quite broken on IOS[1]

[1] http://remysharp.com/2012/05/24/issues-with-position-fixed-s...

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

It doesn't make sense to handicap every platform just because one is broken.

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.

Reply on news.ycombinator.com