Re: Agenda August 18th

On 18/08/2016 18:16, David MacDonald wrote:
> Kathy has asked us to review the size of activation SC. We currently
> have 44px as a placeholder, but apparently Google is 48px and Apple is
> 44pt.
>
> I think points=1.33 x 1px, which is 57px (1)...

That's incorrect. When Apple talk about points in their guidelines, 
they're not referring to CSS points. Apple use "points" as an 
density-indepent unit of measure. 1pt = 1 physical pixel on a non-retina 
display, 1pt = 2 physical pixels on a retina display. As we use CSS 
pixels instead, and since these already adapt to different device 
density when using the ideal viewport, 44 CSS pixels is the measure that 
Apple's guidance translates to.

Apple, in their wisdom, make it exceedingly difficult to actually find 
this in their documentation, but see for instance 
http://ivomynttinen.com/blog/ios-design-guidelines which outlines the 
meaning of "points" when Apple use it (because having 2 different types 
of "points" - the typographic print measure and the CSS one - wasn't 
enough and we needed a third one).

Now, for completeness, Google uses "dp" (density independent pixels), so 
their actual guidance is 48dp x 48dp. However, as noted on 
https://material.google.com/layout/units-measurements.html#units-measurements-density-independent-pixels-dp 
"When writing CSS, use px wherever dp or sp is stated. Dp only needs to 
be used in developing for Android", so yes we're treating it as 48px x 48px.

As additional data points, Microsoft's Design Language documentation 
uses "EF" (effective pixels) as a similar density-independent unit of 
measure 
(https://msdn.microsoft.com/en-us/windows/uwp/layout/design-and-ui-intro#effective-pixels-and-scaling). 
For touch target sizes, Microsoft recommends "44 EP × 44 EP is the 
minimum touch target size" (see the PDF 
http://download.microsoft.com/download/F/2/C/F2C19EC6-03E2-4D8C-B417-0265B808CD06/Microsoft-Design-Language-1603.pdf 
- strangely, I can't seem to find the same info in an actual HTML/CSS 
format on the Microsoft documentation site). As "EF" is also only aimed 
at actual native development, we can roughly treat 1EF as 1 CSS pixel 
(looking at some of the typical device screen sizes in the PDF that are 
defined in EF, this makes the most sense).

Incidentally, I'm fairly sure I explained the above (particularly about 
not confusing Apple's "points" with CSS points) at length previously on 
this list (or in a call) somewhere.

I'd be happy to say that in light of Google's slightly higher value, we 
round the whole measure up and call it a nice round 50px x 50px, or meet 
in the middle and say 46px x 46px. Just as long as our rationale for 
doing so is clear.

P
-- 
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Thursday, 18 August 2016 20:37:44 UTC