For many casual adult website designers, addressing the needs of tablet and mobile device users involves adopting a fluid or responsive layout to accommodate differences in screen size — but getting a design to fit a specific display is only part of the battle — especially when dealing with today’s high resolution displays.
With the growing popularity of devices such as Apple’s iPad and laptops with Retina display to the new KindleHD with its stunning screen, mobile monitors can deliver better brightness, color, quality and resolution than can their desktop-dwelling competitors — and consumers are seeking apps, content and site designs that look right on these devices, driving designers to step up their game.
Designers have enough compatibility issues to worry about without resolution tossed into the mix, but it is an unavoidable side-effect of the march of technology and a metric that isn’t going backwards to the days of 72dpi displays, so think “hi res” going forward.
Here are a few tips to get you started:
Before looking at what to do you should understand why there’s a need to take action.
Standard web graphics tend to be 72ppi or 96ppi. Pixels-per-inch (ppi) is technically accurate but the measure is often expressed as 72dpi or 96dpi, or dots per inch, which is a term from the print industry and technically the province of non-display output.
The upshot is that a typical image intended for web display will be “stretched” inside the browser to accommodate a high resolution display, blurring the image as a result — and while software dithering and other techniques seek to smooth over any quality loss, pristine rendering of text and other non-graphical elements such as forms, makes altered images stand out starkly.
Designers can get a quick idea of the damage by opening one of their site’s images, such as a logo, in Photoshop and then resizing it by 200 percent — without applying any enhancements or sharpening. For an idea of one alternative which will be discussed later, take that original image and resize it by 50 percent, halving its dimensions.
Clearly, something must be done to not only mitigate quality loss, but to serve the needs of a new and more discriminating audience, which seems to have money to spend.
The first step many designers take is to implement CSS media queries for designating styles for high-resolution displays. This technique may already be in use on your site as it is a popular method for providing mobile devices with alternative styles.
For example:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* RETINA SPECIFIC STYLES */ }
Other high resolution displays can be targeted using pixel ratios of 1.25, 1.3 and 1.5, with corresponding minimum resolution of 120dpi, 124.8dpi and 144dpi, respectively — other values will suit other devices, so it’s important to correlate design with access stats to ensure that you are reaching your intended audience, while not wasting developmental efforts on visitors that your site isn’t receiving.
It’s not uncommon to see new devices offering displays exceeding 200dpi.
With 192dpi and greater displays at least doubling the resolution of typical desktop monitors, having sharper graphics will be a boon and one that also leads to more crisply printed pages, as an added benefit. One way to incorporate these images is by using two different CSS sprites — on for standard displays and one @2x for high resolution views.
Another technique is to use Scalable Vector Graphics (SVG) for sprite images, which will deliver the best quality and perhaps most future-proof solution.
According to Apple, text is automatically rendered at higher resolutions, so this isn’t necessarily an issue for designers; but the company recommends adding a high-resolution version for each image resource, including app and document icons, which can be called from CSS using the @2x modifier — such as background-image:url (sprite @2x.png); and by specifying a value for background-size.
Apple advises the use of both standard and high resolution images, but this doubles the amount of assets you need to deploy. While JavaScript and other techniques allow the dynamic swapping of high res in exchange for standard res imagery, an alternative is to use the same images for both displays. This is akin to eschewing thumbnail images in lieu of using explicit height and width arguments on a full size image.
While smaller images, such as CSS sprites, can easily accommodate the @2x version for all users (resized with CSS for each platform), using larger, full-size images can cause greatly increased download times for many users who will not require these large images; which is a huge consideration when dealing with mobile users over slow 3G connections.
An interesting aspect of this equation is that higher resolution images often withstand higher compression, as the individual pixels are smaller and therefore better able to hide many JPEG compression artifacts; so a workable compromise can be found between file size and image quality, especially given today’s top image resizing software and plugins.
A final touch is having a high resolution favicon, which rather than a typical 16x16 ICO file is now a 32x32 pixel image — a small detail perhaps, but a noticeable one when taken in context of an overall upgrade of your adult app or website.
Designers have enough compatibility issues to worry about without resolution tossed into the mix, but it is an unavoidable side-effect of the march of technology and a metric that isn’t going backwards to the days of 72dpi displays, so think “hi res” going forward.
