Using mediaqueries to create both fixed and fluid layout

[Ixolite]

Hi everyone,

I’m currently working on a layout for a wordpress based portal. I wanted to create a responsive design, mainly aimed towards the tablet and other mobile devices users, however all the relative sizing and nested ’em’ issues will make my head explode in a moment.

There is also one more issue – this is a literary portal so the text has to look and read good. To that end I want to have a fixed (relatively to font size) column width so the text line length remains optimal. I know – using ’em’ sizes would solve it for me easily, but I don’t want to have a fluid font scaling as that introduces other problems like leading adjustments and font size becoming too small or too big, not to mention the trouble with nested elements.

So I started thinking about another solution – fixed layout for desktop enviroment (800px wide and larger) and responsive layout for mobile devices (less than 800px wide). That way I’d have easy fine-tune control for the desktop and serve mobile devices layout that would adapt to the device size.

Has anyone here tried something like this? I am wondering about potential drawbacks of that solution – not sure how much CSS will end up in each mediaquery. I’m afraid I might end up with 2 separate stylesheets in the end. Still figuring out what would the best approach be.

[Ixolite]

I was thinking about maintainability – it’s hard for me to judge how large part of the stylesheet will have to be unique for each mediaquery. Ideally I’d like to have a ‘core’ style rules common for all screen sizes (I imagine colours won’t change for example) and only adjust the parts related to sizing and positioning of page elements. At least that is how I did that so far, but I never mixed fixed and fluid layouts before and that is where my ‘thinking out loud’ comes in.

[Vermaas]

Check out my blog. I’ve done, what you’re trying to do. Above the 1024pixels (i believe that was mine breakpoint) the layout is fixed, beneat that width is fluid. Check out the stylesheet for the approach :)

[Ixolite]

Thanks – that looks like a good approach in your case. However I’m going to have many more elements on the page and more complex layout. I think it will be better for me to have whole mediaquery blocks, grouping elements that will have to work together in separate sizes. The more I prepare for it the more I’m convinced it will be managable after all…

[Vermaas]

The approach can be the same with a more difficult layout! Just make sure you’ve got a wrapper with all the elements in that wrapper in percentages instead of pixels and your wrapper can be done with media queries. Same technique.

[Author]

Posts