- From: Alastair Campbell <acampbell@nomensa.com>
- Date: Wed, 15 Apr 2015 09:43:02 +0100
- To: Gregg Vanderheiden <gregg@raisingthefloor.org>
- CC: GLWAI Guidelines WG org <w3c-wai-gl@w3.org>
- Message-ID: <D4219A0ECCAE794C9ED7DC6F5A4C0CD5E8B4D1B19C@jupiter.intranet.nomensa.com>
Hi Gregg, You wrote: "But my bigger concern is that there is no platform guideline for buttons." AC: That isn't true for mobile [1], Apple, Microsoft and Google [2] all specify a minimum size. They (MS & Google at least) also try and do that in a DPI-agnostic way (Dots Per Inch) that comes out at around 9mm. Apple does so in a DPI-agonistic way they call "points", which is the same as pixels on a 160DPI (low res) screen. >From the Android guidelines: "On average, 48dp translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users will be able to reliably and accurately target them with their fingers." Where dp = "density independent pixels", and 1dp = 1 pixel on a 160dpi screen. Apologies for the acronyms in this area, it is a minefield. All of the major platforms have a variety of size devices with varying sizes, so they have methods of defining sizes in device-agnostic ways. So it is not correct to say "And even an iPhone button is indeterminate since you don't know which iPhone it will appear on.". Developers can specific '44 points', which would be 44px on an iPhone 3GS, and 88px on an iPhone 4/5/6. You might think that it is one thing for apps, but how does that affect the browser? Browsers also have to pick a "CSS pixel" size, so a device that has a high density screen doesn't render everything in tiny text. For example, I used to have an HTC One, which is a 4.7" screen with a resolution of 1080x1920 (469dpi). The default width for a website in Chrome was 360px, not 1080px, as they choose a CSS pixel size 3 times larger than the screen pixels. Interestingly, when I used Firefox the default was different, I think 330px or something. So when you say "Web pages for example have no idea what size they will render at.", that is sort of true, but thanks to years of 1000px wide websites and various devices having to cope with them, the CSS pixel is a remarkably reliable way of specifying sizes. As I mentioned before pixels sizes are probably the best cross-platform method of sizing [3], and given these are mobile guidelines and therefore within arm's length, you could probably set 44px as a minimum size. (That needs some testing, I think it will be a consistent figure I'm just not sure 44px is it.) However, I still think advising people to use the platform guidelines for minimum sizes would be the best approach, perhaps with some advice on how that translates to the web. Kind regards, -Alastair 1] http://www.lukew.com/ff/entry.asp?1085 2] http://developer.android.com/design/style/metrics-grids.html 3] https://alastairc.ac/2013/02/how-to-hold-your-ipad/
Received on Wednesday, 15 April 2015 08:43:34 UTC