2

In several sets of UX guidelines from device manufacturers, there is often a minimum size for UI elements, such as the 48 CSS pixels suggested by Google also offering a physical measurement of around 7mm.

My only issue with this is the fact that the relationship between CSS Pixels and physical measurements such as inches or millimetres is very blurred between all of our devices.

Growing up with a dad who working in printing and myself building websites since the late 90s, I've straddled a world of many different measurements from picas to pixels. Along with the ever complicated idea of resolution, whether you talk of DPI or PPI.

Would moving back to using physical world measurements when designing for touch screen based devices make more sense than designing using pixels? Providing of course that each device/browser can render these correctly.

Improve this question
2
  • 1
    it's that "providing" that's going to be the thing that bites you. For many devices the only thing that they let you work with is CSS pixels (or ems translated to CSS pixels). They deliberately don't provide you any means to use fixed size measures, since that prevents them doing font rendering tricks in the extra resolution between the pixels they tell you are there (css pixels) and the pixels the device actually has (true PPI).
    – Racheet
    Commented Dec 2, 2015 at 13:26
  • The 72 points and 96 pixels = 1 inch has frustrated me for several years, especially when pixels and points are often used interchangeably by people.
    – Stephen Keable
    Commented Dec 2, 2015 at 13:34

3 Answers 3

Reset to default
1

You must know that this is not so blured as you think. Remember that CSS pixels aren't phisical pixels. Many of mobile devices have some kind od CSS pixels to real pixels rario so, practically 48 CSS pixels will be close to 7 mm very often.

For example Retina MacBook displays website as 1440 CSS px wide when it has really 2880px (I know this is not mobile device, but it is good example, isn't it?).

Improve this answer
2
1

When designing for a range of visual output devices, i.e. screens, of different sizes and resolution which are viewed at different distances, it’s actually a good idea to use visual angle units – the CSS2 pixel is one that most people are more comfortable with than radians etc.

When designing (for) manual input devices, e.g. a push button, which are operated with one or more fingers, it’s a good idea to use absolute length units, because finger tips don’t differ all that much in size.

On touch-screens, you’re doing both. In practice and since level 3 in theory, too, CSS pixels are related by a fixed ratio to physical units (3.78 px/mm) and you pretty much won’t know beforehand which of the two definitions will be used as a reference. That’s as good as it gets.

If you are using a development environment that supports all CSS absolute length units correctly, you could specify input widgets in millimetres and graphic output in pixels. They will be converted as necessary and will both always use the same base definition.

Improve this answer
1
  • I hadn't come across the idea of CSS Pixels as a Visual Angle Unit, very interesting.
    – Stephen Keable
    Commented Dec 2, 2015 at 14:28
1

Would moving back to using physical world measurements when designing for touch screen based devices make more sense than designing using pixels?

No. Pixels in CSS do not actually mean the size of the device's pixels and physical measurements are not precise at all. Specifying (in CSS) 1in is the same say specifying 96px and neither give you any assurance of precision. (This is assuming you've configured your viewport conventionally.) You can check this jsFiddle on various devices and see the blue bars will always be the same width even one is speced 1in and the other 96px. (If anyone finds a device where this isn't true please respond here and I'll have to reexamine my theory.)

Different units make sense in different contexts. I usually use em or rem or %, but sometimes px or in or mm, and in special cases viewport units.

(Specifying measurements via HTML attributes is a different game, when you say <img width="200"> you get 200 device pixels.)

Improve this answer
3
  • I think Konqueror is still trying to honor physical units.
    – Crissov
    Commented Dec 2, 2015 at 20:59
  • Whilst the elements are all the same width whether defined as px, in, pts the width. When the element is measured on the screen with a hardware ruler or tape measure, it varies between several devices. Which means designing to the size of a finger or thumb width is difficult across all devices.
    – Stephen Keable
    Commented Dec 3, 2015 at 9:51
  • width and height image attributes mean a completely different thing: it's a hint for the browser on what are the dimensions of the image before it's loaded (useful to reduce reflows). It should be changed to <img style='width:200px' />.
    – transistor09
    Commented Jan 1, 2016 at 21:11

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.