11

I'm getting reading to set up my wireframe file for a responsive site. But after reading more about CSS pixels vs. pixels vs. ems, I can't decide how best to design the site and then communicate the design with the development team. This is particularly perplexing when it comes to fonts sizes.

And now with the emergence of Quad HD screens, I'm really not sure how to structure my file and then communicate the sizes of things with the developers. Thoughts?

Improve this question
6
  • 1
    As a designer build in pixels. Ems are not your concern in a static .psd file.
    – Mayo
    Jul 7, 2016 at 17:07
  • 1
    Thanks, but I don't use PSDs to design. Also, my development team is going to ask me what to code the font sizes at. And at this point, I'm trying to decide what measurement to design in so that I can give them an accurate answer.
    – AmK
    Jul 7, 2016 at 17:43
  • 2
    Design in pixels. Let the developer decide how he is to build a responsive site. Your job is to solve the UX problems and communicate your ideas to the rest of the team.
    – Mayo
    Jul 7, 2016 at 18:01
  • I agree. I shouldn't have to worry about code. But the development team is the one asking me what to use for font sizes, etc. Thanks, though.
    – AmK
    Jul 7, 2016 at 18:09
  • 1
    @AmK, unless you're a developer in your team, there's a clear conflict. The developer is the one to define how to take your concept to reality, it's not your job to teach them how to do their job. Otherwise.... Why do you need them?
    – Devin
    Jul 7, 2016 at 22:59

3 Answers 3

Reset to default
8

I hope this answer this question, but this is my personal process: I use the font sizes in my PSD mockups for reference purposes only, almost as a 'relative' size. Then after Design is approved, along with the assets, I create a separate html / CSS basic file as a style guide (a bit like a style tile) where I define the real size for all fonts and see how they display in terms of responsiveness (sometimes sizes need to be tweaked for mobile).

Specifically about which units I use in my style guides: I use ems or percent.

Example: http://codepen.io/nicholaspetersen/full/wdyGI/

Improve this answer
5
  • 1
    Love this process! I'd never thought about that!
    – AmK
    Jul 7, 2016 at 17:44
  • 1
    I would highly suggest to anyone that rems are the superior unit to ems; they are almost identical, except rems avoid ems' quirky way of dealing with inheritance.
    – Leslie P.
    Jul 8, 2016 at 13:54
  • @LeslieP. Sorry, but there's nothing quirky about sizing in ems. Inheritance is the most valuable feature in CSS, as styles are intended to cascade. And, while they may appear similar they are very different; em is relative unit and rem is an absolute unit, much more like px than em.
    – Seth Warburton
    Jul 15, 2016 at 9:45
  • @Seth: rem is also a relative unit. It is like an em except that it is relative to the font size of the root element, instead of the current element. See sitepoint.com/understanding-and-using-rem-units-in-css for a good explanation. As a side note, before making statements of fact "rem is an absolute unit", maybe do a bit of research first.
    – Bill Dagg
    Jul 20, 2016 at 19:24
  • @BillDagg Fair comment, I should have stated that rem are, in effect, absolute units. Within the context of the document, being relative to the root element, rems are for all intents and purposes an absolute measure, like pixels (which frequently don't relate to actual physical pixels). This is the reason that many designers prefer rem to em, it provides the illusory security blanket of control that is so familiar to those used to sizing with px.
    – Seth Warburton
    Jul 21, 2016 at 21:38
3

Density-independent Pixels

Sounds like what you're looking for is Density-independent Pixels. Even though you might be working in @2x sizes, the final result is the same. The code will remain Font-size: 24px; on desktop and mobile.

The higher density screens require specific solutions for visual elements such as images and icons, but not for the basic code.

The conversion to tech is up to the developers. The available methods will almost always rely on a foundation of pixels. (with tools such as http://pxtoem.com/)

Grids

Try to work with a grid of 5px or 8px. This makes communication and calculations easy, i.e. "The margins should be Grid*2 or Grid/2). It speeds up scenario's where they'll have to interpret the design, which often happens if the design spec isn't specific enough. If you really want them to love you do some reading into the technical side of grids.

From Design to Code

Depending on your platform you could get tools that translate the design into code, such as zeplin.

Improve this answer
0
1

To answer your question:

Short answer - No.

Longer answer - No, but would it help development if you provided more guidance?

Not only will it probably help the team if you define some basic stylistic ground rules (do you even have a style guide?), and it will give you a sense of scale about how it looks and how it works.

As a designer you need to have a sense of scale in your designs to ensure everything you want, will work as you intend it to do.

Strong collaboration between design and implementation is the key to a great solution, so the more you can annotate the specifics of your design, the easier it will be for developers to do the work.

This can be one of the weak spots in agile development methodologies, because developers don't want documentation, yet they absolutely need your design specifications to answer some of these questions around how it should look and behave.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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