User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
I think you are confusing a few different concepts.
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:
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.
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:
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 screensBuilt-in templates and controls provide great scrolling support in both HTML and XAML Assets should be provided in 3 sizes to be HD ready
Conforms to effective DPI that humans can see on a screen
Views that need to be providedYou 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:
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).
