Why does Zeplin provide specs in Pixels instead of a responsive unit like percentages?

To say that a button is 40px wide and 20px height is not responsive. should I expect the developer to translate this into responsive % numbers?

Here's a picture: enter image description here

  • Let's say a button on had 15% width. On a really small screen like a phone that might be appropriate. But if you're viewing that same page on a 4k monitor, that button is going to be HUGE. That's why the specs are in pixels – Zach Saucier Apr 22 '17 at 16:11
  • But your actual question here is unclear. Specs are given in pixels sometimes and percents in others. We can't provide a sure answer as to why one group decided to give everything in pixels. Can you provide more insight as to the context in which you're asking? – Zach Saucier Apr 22 '17 at 16:13
  • Specs are always wrong because they only make sense in context of the actual responsive markup and CSS. – DA01 Apr 22 '17 at 21:19
  • If zeplin is a css based system, then "pixel" isn't truly a pixel but a derived unit that depends on DPI/PPI of the display to look roughly the same independent of the device or resolution. – casey Apr 23 '17 at 23:44

I'm not sure that's a reasonable expectation. In so much as a button is often required to be a certain pixel size... just that that's pixel size might change depending on the screen size.

Most sites I have worked on have - generally speaking - percentage width containers, but fixed size elements (like buttons) although the specced sizes of those elements might be different on desktop or mobile.

To be clear I can imagine a scenario where a button might be required to be a percentage width (normally 100% I would imagine (of it's container)) but I can equally imagine a button that would be 100px round on any screen size. It's a mix and match.

| improve this answer | |
  • Thanks. So you actually do use percentage or pixel as appropriate then. – user855 Apr 22 '17 at 15:04
  • Yes that's right. Of course there are no actually RULES for this. But in general I would expect a spec sheet like the one you reference above to have percentages for containers and pixels for elements. The dates for example might be set to 20% of the viewport, but that round button might be 52px at any screen size. - The site is still RESPONSIVE, but not every element of a responsive site has to be flexible and "responsive" in itself if you follow me. – mayersdesign Apr 22 '17 at 15:23
  • This is especially true for images that otherwise can pixelate (logos, icons?). But for photos, for example, you can use percentages too. – Rafael Apr 22 '17 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.