Comments on the 200ok weblog: design pixels aren't frontend pixels

@Patrick: I've only encountered them in larger...

2010-09-14T14:52:55.650+10:00

@Patrick: I've only encountered them in larger organisations where people are trying to set a design/identity across multiple teams. They're an imperfect tool to say the least, but I'm not sure what an alternative could be - I think the solution is probably a new approach to style guides. Perhaps style guides should be setting intentions, principles and tolerances rather than hyper-specific measurements.

eg. instead of "here are the px dimensions you are allowed to use" vs "we design to a grid with plenty of whitespace, here are the default grid dimensions, whitespace should not be less than this".

What do you think?

@Ben and @Pete: People involved need a shared lang...

2010-09-14T14:42:54.984+10:00

@Ben and @Pete: People involved need a shared language for the design - I don't think a traditional style guide helps that much, unless you're in an environment where it's the only option.

@Robert: I agree there must be some flexibility ar...

2010-09-14T12:41:41.740+10:00

@Robert: I agree there must be some flexibility around the mockup-to-live process. I've found the best results happen when the frontender and designer can collaborate or at least negotiate when the design and implementation aren't meeting up. Often a small design tweak can avoid significant wasted effort; and similarly it helps to know which design features are critical and worth the extra dev time.

@Pete: I think most style guides are far too long yet don't give practical details for the web, hence they get ignored entirely. Core fonts, colours and hover states are useful even if only to stop people setting 6px light grey microtext or Comic Sans; but endless variations on logo placement rules are a waste of time. It's a classic sign the style guide was set by another department's print designers and not the web team ;)

I suppose it's less about the guide than people who don't understand the concept of "guide" compared with "rules set in stone that can't ever be wrong"...

Hi Ben, i sidestep the problem by being both the...

2010-09-14T09:37:00.720+10:00

Hi Ben,

i sidestep the problem by being both the designer and the front ender, but i obviously recognise the problem, and when i'm designing with html i'm changing my mind from what i thought i would have chosen if designing in p'shop - based on the type of things you've mentioned - different fonts having different heights etc

in the future we'll have wider support for this which may alleviate those specific problems: http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

Re style guides - i think they're largely a waste of time.
each new part of a site/design often requires fresh direction in treatment, and not because the designer is a blessed genius and says "i think mint would work better here and i felt like using it as its Tuesday and i'm the art director" but because "this new template has a map with adjacent toggles and this h1 size and 1st para is completely inappropriate in this instance where the map is the focus and this large"

ie: i think style guides are used as an ass-covering device sometimes championed by designers, sometimes championed by developers, and even sometimes by managers who like the time clock.

imho, the best style guides are about 4 pages long and *dont* include specifics like "12px (em square height)" because when they fail or need to be deviated from they just create friction and "look here on page 43, i told you so"

anyway, completely agree with the "talk more" approach - just wanted to add my 2c on style guides - and why i dont think they're a solid system :)

Pete

I've come to learn to use a designer's PSD...

2010-09-14T09:36:37.807+10:00

I've come to learn to use a designer's PSD as a rough guide as to the intended outcome - not the Bible. I've also come to learn that if you tatoo the maximum page width of 1000px to a designer's forehead, they'll invariably give you a PSD that defines the page width as 1032px. A designer can't avoid this - it's in their DNA.

@Jake: Honestly I wish Macs shipped with Helvetica...

2010-09-01T14:13:17.642+10:00

@Jake: Honestly I wish Macs shipped with Helvetica automatically substituted for Arial, so that whole thing would go away ;)

re: technical knowledge, I guess I'm just more inclined to assume people *don't* know all the details and won't get them in time for the deadline, so it's best to just confirm a system to define the desired result. Perhaps I'm just too cynical :)

If the font declaration was around the other way t...

2010-09-01T13:37:54.608+10:00

If the font declaration was around the other way to use a "proper" font ;-) as the first preference "12px; black; Helvetica, Arial" then you'd find that the 12px font is actually 12px, not 11px. The discrepancy arises due to the fact that all fonts are styled differently. 12px Zapfino for instance is more like 40px tall! It's a style thing, using a traditional font such as Helvetica as a baseline only. Again, the "margin" above text will differ depending on how the font was created, so some fonts will actually expand beyond the container element if it's designed that way. It all comes down to technical knowledge - you've either got it, or you've go to learn it.