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