3

I'm working on a project involving multiple mobile and tablet web application designing. I'm curious what are the mobile design strategies when it comes to handling pixel aspect ratio for icons and fonts?

Mainly with different devices having different pixel densities, I'm trying to understand how is that one can avoid blurriness for icons and fonts on a web page. I did research before posting this question and other questions I found are very abstract and don't specifically ask this question.

|improve this question
2

I think you are confusing a few different concepts.

  • aspect ratios
  • pixel dimensions
  • pixel density

For web pages, the aspect ratio isn't all that important. The variable is the browser width, of course. That's always been a variable and continues to be so. The typical solution is to design a fluid layout. There are various ways to handle that from the simple "body width=100%" to things like Responsive Design where the page layout will change based on various 'brackets' of page widths.

On mobile, the browser width is dictated by the pixel dimensions.

As for pixel density, there's two ways devices handle high density screens:

  • they don't care
  • they do care

Those that care are pretty much the iPhone. The iPhone 4 has twice the pixel density as the iPhone 3, but apple let's the iPhone 4 still think it has the pixels of the iPHone 3. In otherwords, you as the web designer/developer don't really have to worry about too much other than perhaps giving the iPhone 4 a secondary set of images that are twice the resolution if you want those users to see slightly 'crisper' images (they'll still be the same physical size on screen).

Those that don't care, don't care, and I typically suggest you not care, either, as users of said devices have become accustomed to the web as it is on their device already.

In terms of image/font stretching, that should never be an issue. You don't stretch type in HTML (or a least, shouldn't) and your images should typically be fixed width to begin with, so wouldn't stretch regardless of the screen size.

|improve this answer
  • Thanks for the reply @DA01. It helped me understand a lot of things. Unfortunately, I don't think I m at the luxury of not caring for Android and Windows devices for this web application:) I found your suggestion about the secondary set of icons for iPhone 4 very helpful. Do you know of a similar direction for Android or Windows devices? Like the article I have posted below, maybe the answer is to have another set of icons with a certain resolution, right? Any idea where I can get this calculation of twice the resolution or 1.5 times etc for Android or other devices? Thanks again. – varun86 Jan 25 '12 at 16:49
  • I don't mean don't care about those devices...I mean don't care if they have high density screens or not. The user of said screens has already adapted to their use so you trying to create a workaround can often backfire. Android (as far as I know) hasn't yet adopted the model that the iPHone uses to let you know if the screen is high density or not. You instead have to do device detection, which is buggy and, again, can backfire based on the user's existing habits/expectations. – DA01 Jan 25 '12 at 17:46
  • Another way to word things: Apple built their high-density screen with the expectation that it would render elements at the same physical size as their non-high-density screen. This gives parity to the devices. Most other devices do not do that. The pixels are simply smaller. I've worked with teams that insist on trying to get every device to have the same physical size elements but it's an absurd task (especially when you start trying to accomodate dozens of different BlackBerrry and Android devices) – DA01 Jan 25 '12 at 17:48
0

Windows with the Metro style have done a lot of research in to this exact problem that you are facing. Jensen Harris from their usability team has a great keynote from Build 2011 which goes in to detail on this. Take a look at the video on http://channel9.msdn.com/events/BUILD/BUILD2011/bps-1004 and skip to 39:56 for “Snap and scale beautifully”.

It covers the following:

Snap and scale beautifully

Scaling across form factors

Your app has the opportunity to be used on hundreds of millions of PCs They range from < 10” tablets to > 27” screens HD (~200DPI) and Ultra HD (>250DPI) screens a reality soon

Scaling across screens

Built-in templates and controls provide great scrolling support in both HTML and XAML Assets should be provided in 3 sizes to be HD ready

  • 100%
  • 140%
  • 180%
  • Using SVG, CSS Primitives and XAML

Conforms to effective DPI that humans can see on a screen

Views that need to be provided
  • Minimum (1024x768)
  • Widescreen (1366x768+)
  • Snap view (required)
  • Portrait view (optional)

In terms of typography, as long as your type is in HTML format, and you set the size in em measures via the CSS stylesheet, you should be absolutely fine.

|improve this answer
  • Good info but rather specific to Windows7 Apps rather than mobile web, in general. – DA01 Jan 25 '12 at 1:19
  • @DA01 I disagree, the information is for Metro, which is used on XBOX Live, Windows 7 Mobile and Windows 8, but the principles discussed work for the more general mobile web. – DigiKev Jan 25 '12 at 8:55
  • Well, no. The percentages only apply to windows. For iOS, for instance, you'd need assets at 200% for retina. For other devices, you typically don't want any variation in sizes. The screen resolutions lists have little to do with mobile phones. Etc. Still, good info. But perhaps a bit too specific to just one of the many mobile platforms. – DA01 Jan 25 '12 at 15:23
  • This is good information @DigiKev. I had gone through these video's and presentations from BUILD and I have to agree with DA01 that this only windows metro specific. You might want to read this article to get a sense of how things can be very different when it comes to understanding of pixels for different devices. alistapart.com/articles/a-pixel-identity-crisis – varun86 Jan 25 '12 at 16:36
  • @DA01 as I understand it, Microsoft chose the sizes which conform to effective DPI that humans can see on a screen. – DigiKev Jan 25 '12 at 19:48
0

You can use css and media queries to support high dpi displays. E.g. to serve to ideal image resolution to the browser. This article could be a good starting point:

http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx

Another variant is to use scalable vector graphics instead of a bitmap based image, most modern web-browsers are capable of displaying SVGs. (of course you need a fallback for older browsers).

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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