Fluid/Fixed Layout Questions

HTML & CSS
1

I’m sure some if not all of these questions have probably been asked before but I could not see any recent threads about it, and thought it best to not bump any old threads as things may well have changed over time etc.

I’m currently working on implementing a re-design that someone did for me (I’m a programmer, not a designer) and originally I started by making it a fixed layout to match the design I was given.

1)Later on I decided to try to turn it into a flexible/fluid site by using ems instead of px’s. The main issue I came across was with the way ems work. The design has varying font sizes, which means that my em measurements often became ridiculous.

i.e. I define a font size of 10px for my body (a nice number which would be easily dividable). In my header I then need a larger font size for a bar at the top of my page so I set it to be 11px (also tried 1.1 but did same thing). Any sizings within that div are now based on the 11px font size and not the 10px one.

I’d rather be able to define one base size and have all my relative measurements work from that.

Have I done something wrong here or is this really how it’s meant to work?

  1. If I do indeed stick to a fixed layout what would be the maximum width to stick to to properly support a 1024 wide resolution? Users with less than this are minimal on our site - excluding mobile devices but I think I’d need to create a separate version for them anyhow.
2

This resource may be helpful in converting pixels to ems.

And I would use a fixed width layout of no more than 1000 pixels wide. A popular width is 960 pixels since it is divisible by 12 and would allow a modular layout based on the 960 grid system. Check out this link for more info.

Hope this helps!

3

If you are careful, thee problems are minimal.

i.e. I define a font size of 10px for my body (a nice number which would be easily dividable). In my header I then need a larger font size for a bar at the top of my page so I set it to be 11px (also tried 1.1 but did same thing). Any sizings within that div are now based on the 11px font size and not the 10px one.

That’s not an example of using ems, though. To use ems, do something like this:

  • set font size to 100% on the body (which, generally speaking, can be assumed to equate to 16px). Or you could use 62.5% (= 10px) though there are risks with this if users have smaller font sizes specified by default.
  • set all other font sizes in ems. So, I tend to set 100% on body and then if I want a font size the equivalent of 12px I’ll use 0.75em.

The only problem I find with this is inheritance. So if I set a font-size of 0.75 em on a div, then the sized of all elements will be measured against that, so if you set an element inside that to, say, 1em, it will measure 12px instead of 16px.

Pixels, on the other hand, aren’t affected this way, so setting a font size of 11px on an element does not re-factor the elements in that div. A pixel is a pixel.

  1. If I do indeed stick to a fixed layout what would be the maximum width to stick to to properly support a 1024 wide resolution?

I think this question answers itself! (EDIT: well, don’t make it 1024px wide, but maybe about 40px narrower, to account for scroll bars. People may also have menu bars etc placed left or fright, so you never really know what you are dealing with.

Users with less than this are minimal on our site - excluding mobile devices but I think I’d need to create a separate version for them anyhow.

Not necessarily. The can always scroll. Won’t kill 'em.

Still, though, I’d encourage you to stick with a fluid (or rather flexible, if you are using ems) layout. I wrote a few words on this last year, in case it’s of use.

4

I’ll have a proper read through the rest of the response/s this evening but the inheritance you are describing above is what I was trying to talk about in my initial point. I was just explaining it very badly lol.

I really do find that inheritance annoying due to the fact it complicates your calculations further especially if you have multiple nested elements all setting their own font sizes.

And are you sure that using a font size of 11px doesn’t re-factor the elements in the div? I’m pretty sure I’ve tried doing that. But for me it would have made 1em = 11px within that div. I’ll give it a try again tonight on a basic structure. If this works then I won’t really have much of a problem because the font size will get scaled up/down anyway.

5

Yes, actually I was inaccurate above, sorry (it was late). That’s true that setting a px size on the div would reset the em size for that div, but normally you wouldn’t do that, but rather set the sizes on various elements independently. So, don’t set a pixel (or em) size for the div itself, but on the elements inside that. So set the <p> sizes in the px size you want, headings and so on.

6

Ah fair enough, so I’d need to apply the css to the various elements that I may use. I was secretly hoping you were right though as that would have been more useful. Just seems a little impractical the way it works if you use font sizes on the divs.

But thanks I’ll take your advice and apply it to the children elements.

7

Okay, took me a while to get back round to looking at this. Finally starting to work on the layout I mentioned above.

So I’m trying to work it down to the suggested 960 width and started to incorporate the grid layout idea. Though at the moment I have several ‘container’ elements as I needed the outer gutter space for some of the elements. I made it semi flexible by making the grid flexible but with the container having a width (em) and max width (%).

However I am actually thinking of going back to how it was just with a 960px width because I don’t think the grid offers enough flexibility for what I need. e.g. underneath my menu I have a leaderboard ad (728 x 90) and then another image alongside to fill the rest of the width that would be used for our own promotion. This doesn’t really work well with the grid layout.

Plus seeing how my menu and other items collapsed under one another looked pretty horrid.

One thing I’ve been reading about more recently is media queries. That sounds to me like a fairly decent way of presenting a different layout for the smaller sizes (such as mobiles). Presumably also hiding the elements that would cause problems when shrunk too far (such as the leaderboard advert).

Would media queries be a better solution for providing a decent experience for mobile users? If so what are the general sizes I should be looking at combining with the media queries?

And are flexible designs something I should really be striving for when most browsers are now handling zooming themselves?

Lastly if it helps visualization I could PM a link to what I’m working on with the details needed to access it (just the original fixed version - the grid experiment is on my local).

8

They would be if mobile devices recognized them, but unfortunately you’re pretty much talking iPhone alone at this stage.

There’s an interesting slideshow on this that came out recently, if you are interested:

and an associated website:

http://yiibu.com/articles/rethinking-the-mobile-web/

9

Doh. I thought/assumed most mobiles out now/coming out would be supporting media queries. At least most of the smart phones. Though browsing on the older non smart-phone mobiles isn’t exactly an enjoyable experience as it is - e.g. my Sony Ericsson 910i.

I only quickly flicked through that slide-show but it looks useful. Though if you use media queries the other way round (for the desktop rather than the mobile) surely that’s going to cause issues for the older desktop browsers (and the despicable IE lol).

Mobile browsing technology seems to me to moving at a faster pace than their desktop equivalents and I believe most people go through their mobile phones much faster than their PC’s too.

I’ll have a thorough read of both links tonight though.

10

Yes. The idea is that you have a basic layout for mobiles and any crap desktop browsers, and nice styling for proper browsers. You can target IE with its own styles via conditional comments, of course… if you can be bothered.

It’s not a perfect solution, by any means, but an interesting idea, all the same.