Home > Features > Designing for Today’s High-Res Displays • Bookmark   • Newsletters   • Register Search Options

FEATURE

Designing for Today’s High-Res Displays

Designing for Today’s High-Res Displays

July 8, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  39.66%
Yes, but in a few years
  37.36%
No
  22.99%
Out of 174 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

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.


OPINIONS & VIEWS

Adult Industry Keeps Fighting On

On Nov. 8, we had one of the most momentous — and to political observers, improbable — victories in the history of our industry. We defeated, by popular vote, a purportedly progressive measure... More »

Finding the Right Payment Business Model

One consistency among nearly all paysite owners is that they are creatures of habit. After all, how else could someone tirelessly produce or procure similar content steadily in order to update their commercial... More »

What Payment Plan Suits Your Bottom Line

The most disappointing aspect of merchant processing is having to tell a merchant that all domestic options have been exhausted and that there isn’t a bank in the U.S. willing to open a merchant... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.

UPCOMING EVENTS

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA

ANME Founders Show

Jan 14 - Jan 15
Los Angeles Marriott Burbank Airport

Everything To Do With Sex Show

Jan 20 - Jan 22
Montréal, Québec
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!