Fixed Desktop with Fluid Tablet and Mobile Media Queries

[Anonymous]

I would like to make a fluid grid layout that shrinks down to fit into tablet and mobile sizes, but that does not stretch upwards passed a fixed width (ie. 960). I’ve done this with media queries, making the page fluidly adjust as the screen shrinks down, and setting the “desktop” query to be fixed.

My question is, while I know I can do this because I just did, I’m wondering what reasons, if any, there are FOR doing this, or FOR NOT doing this. I like the “old school” idea of fixing a width for certain designs, but I also want to be “up with the times” and make my sites viewable on as wide a range of devices as possible.

Thanks for any feedback!

[Paulie_D]

If you have the site responsive then you are up with the times.

The fact that you prefer YOUR site to be centred on desktop monitors with a fixed with of 960px and over is a matter for you.

My current monitors are 1920×1080 so I like sites that can adapt to much wider sizes but I’m not going to decry you for not serving that size. Perhaps you think the design won’t suit a monitor that wide (a lot don’t).

You might want to think about upping that 960px a little bit to, say, 1024px as that is roughly the max width resolution of ipads & the like.

As I said, personal choice.

[Anonymous]

Thanks for your response. Ideally, I’d like to make most designs fluid up and down, but like you said, there are some designs that work better maxing at a certain width. I was just wondering if there was anything taboo about doing this, but it sounds like it’s really just personal preference. My laptop resolution is 1600×900, so maybe I could design in such a way that looks good at that size, then make it scale down from there. One thing I’m afraid of, is even the most fluid designs can start to look wonky at super high resolutions, which I can’t test for, so I’m trying to find a “best practice”. Anyway, I’m typing out loud now, so thanks for your thoughts!

[Author]

Posts