Hacker News Reader

Comment by dmethvin | Hacker News Reader

Although the title talks about detecting the iPad Mini, the article makes it clear that the real dilemma is that there is no way to know the physical size of pixels as presented on the screen and size things accordingly. That's especially important on touch devices where you want to size controls to make them finger friendly.

View on HN

I think that's a red herring. Sure, the iPad mini has a higher DPI than an iPad 2. iPad 2 is 132ppi and iPad mini is 163ppi. But guess what else is 163ppi? That's right, every non-retina iPhone. So if your touch areas are large enough for an iPhone user to use, then it's large enough for an iPad mini user to use as well.

It sounds like you're arguing for designing iPad mini apps as iPhone apps, which is contrary to one of Apple's major arguments for the device over existing 7" tablets. Apple wants iPad minis to run iPad apps. Their customers probably do as well.

No, I'm advocating for not drawing a distinction between iPhone and iPad when figuring out the size of touch areas on touch-enabled apps, whether the app is optimized for an iPhone-sized display or whether it's a touch-enabled "normal" page.

I don't think you quite understand. As the devices have different physical characteristics, they require designers to know the screen sizes and pixel density.

The iPad 2 has a screen resolution of 1024x768 with a density of 132 pixels per inch. The iPad mini has a resolution of 1024x768 with a density of 163 pixels per inch.

This means that if you design for an iPad2 you are guaranteed to have smaller fonts and elements than on an iPad mini. If you design for an iPad mini, then you are guaranteed to have fonts and elements that are too large. If you design for the middle ground then your design stinks when viewed on both devices.

As for the iPhone argument: people use media queries for a reason - they design differently for the smaller screen sizes of the iPhone than they do for an iPad.

It's essential that on a touch based device that you can work out how big things will be. Perhaps I can put this in a more concrete way: if you have ever tried to upvote a comment on HN via an iPad and accidentally downvoted the person, you will immediately see the issue of tiny fonts/UI elements.

Now make those down and up arrows 20% smaller.

As you can see from one of the links in the submitted article, even Apple's own website is hard to read on a mini. Not exactly inspiring. I'm quite surprised that such a design focused company didn't realise this was going to be an issue!

Two counterpoints:

1) Why are you designing a site specifically for the iPad mini? That seems pointless. Media queries are great and all, but if you want to design specifically for touch then you should just assume a 163ppi, and that will be usable by everyone.

2) iPads typically see "full" or "desktop" websites. And they can scale. If something is too small at the default scale, then zoom in.

Why not just follow Apple's iOS control sizing guidelines, which are measured in pixels, and are exactly correct for the iPad mini (and slightly oversize for the regular iPad)?

Why not just follow Apple's iOS control sizing guidelines

Because that is completely missing the point and leaving out every device not made by Apple (which is most devices in the market).

Your aim should be to have an overall strategy for how to handle the incredible amount of devices and variations out there. And to be honest, the iPad Mini adds nothing new to this mix.

We already had the form factor, we already had the size, we already has the DPI.

If you are making web-pages, make them work on anything reasonably capable, not just iGadgets. Anything else is a big "fuck you" to Tim Berner Lee.

Do you really want to tell mister world wide web to fuck of? Do you?

Besides, optimizing for iOS-devices seems passé and counter-productive. It's currently the minority-platform and its market-share is diminishing year by year now.

Android on the other hand, with its 75% and increasing market-share, now that sounds like an audience you do want to make sure you reach. If your website works well on a variety of Android-devices, you can be reasonably sure it will work on other platforms as well, iOS included.

That's the point of CSS and media queries - to separate the style from the content. But in case you didn't read the article, you cannot in fact get the ppi value from the current version of Safari that is bundled with the iMac mini.

The size isn't that different: if your controls are small enough that they work on the 9.7" ipad but not on the 7.9" ipad, they are probably too small.

If your controls are big enough that they look normal on an 7.9" iPad but not on a 9.7" inch iPad, they are probably too large.

Would it be helpful to be able to display certain buttons or other elements at a set physical dimension as opposed to pixel dimensions? For example, always show a button big enough for a finger (e.g., 1.5 cm). I ask because we recently launched a web app (www.lifesizer.com) that allows sites to display images in actual life size and think it could be great for designing mobile web sites, but comes with other implications for design, such as modifying layouts for devices with different screen sizes even if they have the same pixel dimensions.

We are currently focused on ecommerce and product review sites, but would love to hear if people think it would be helpful for a new take on responsive design.

Reply on news.ycombinator.com