3 ms·

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.

by cantlin 14y ago

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.
    - andrewmackenzie 14y ago
      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!
- deleted 14y ago
  [deleted]
wahnfrieden 14y ago
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.
- andrewmackenzie 14y ago
  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.

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.

by 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.
  - andrewmackenzie 14y ago
    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!
deleted 14y ago
[deleted]

wahnfrieden 14y ago

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.

andrewmackenzie 14y ago
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.