Hello!

[Injury]

Hello everyone! I’m working on a website, http://www.pitagourmet.com, and I’m having some troubles! I just want to get people’s opinions on some stuff as well as a few pointers in the right direction.

Should I develop in the standard resolutions (i/e 1024×768) and then worry about sizing issues for higher resolutions later? I currently work at 1920×1200, which makes the work I do great, but at lower resolutions, it looks like crap.

Font wise, I have trouble deciding weather to do it in percents or pixels, but I saw in a video Chris posted (about Photoshop Mockups) that he had used the measurment "em". Whats the difference?

Thanks for your time! Take a look at the site and be sure to let me know!

[TheDoc]

I would not say it’s out of date. W3 Schools receives a very specific demographic that is bound to have larger screens/resolutions.

You should be designing for 1024px screen resolutions, no question.

[EamonnMac]

An ’em’ is a relative unit of measurement, in other words it has no fixed size – its own value is relative to another, fixed, value. It operates, in web terms, off the pt or px unit either being used by default (usually 16px) or specified by you in your stylesheet.

As an example, if you specify that your document uses a font of, say, 10px, then 2em is equal to 20px. You can use it just for typograpy (i.e. h1 font-size: 4em; ) or in your layout (width: 30em;). What’s the point? Well, it keeps everything relative to everything else – and more specifically to the size of font used. Therefore, if a viewer increases the font-size, then all the other dimensions follow suit, maintaining the layout.

I sometimes use the ‘Em Calculator’ tool at http://riddle.pl/emcalc/ when I’m using em’s… I don’t normally use them (apparently I should! ;) ), but try em’s on a small test page and see how you get on.

[TheDoc]

"EamonnMac" wrote:

I sometimes use the ‘Em Calculator’ tool at http://riddle.pl/emcalc/ when I’m using em’s… I don’t normally use them (apparently I should! ;) ), but try em’s on a small test page and see how you get on.

Ems are very easy to use! Promise!

Set your body to font-size:62.5%. From there, your Ems will be easy! 1em=10px, 1.2em=12px, etc etc.

Remember, "ems cascade like a mofo" (see Chris’ article on font-sizing), so you need to be careful when nesting elements.

[Author]

Posts