educational

Designing for High-Pixel Displays

Stephen Yagielowicz

Next-generation graphics displays, such as Apple’s breathtaking Retina on the iPad 3, are heralding a new era in mobile photorealistic imaging; boosting available color depth, pixels per inch, resolution and screen size — all of which can be easily taken advantage of by designers seeking a creative and quality edge.

According to Apple, the Retina display on its new iPad has a 2048x1536 resolution, with 44 percent greater color saturation, in the same 9.7-inch space as the previous iPad.

By incorporating design considerations for this lucrative audience into your current and future projects, you could be a step ahead of your competition.

“That’s four times the number of pixels in iPad 2 and a million more than an HDTV,” states the Apple website. “Those pixels are so close together, your eyes can’t discern individual ones at a normal viewing distance. When you can’t see the pixels, you see the whole picture…”

While the working color space of these displays may not pose an issue for designers accustomed to working with full-color (32-bit) images, the better depth will make things easier for mobile designers and others that are used to working with limited color choices and optimized web-safe palettes.

The PPI or pixels-per-inch of these advanced displays is also significantly higher than that found in traditional desktop computer monitors, which operate at 72ppi, as opposed to the Retina display’s 264ppi (the iPhone 4 hits 326ppi), but it’s that high resolution that will affect designers most.

This author, for example, is using 24” monitors at 1920x1200. Putting a “larger” size onto a much smaller (sub-10”) screen, can “shrink” text and graphics; making them hard to read and underscoring the value of specifying font size in em or points — rather than in pixels. Likewise, navigational elements such as buttons that are specified by pixel size will grow and shrink proportionately based on pixel density, creating problems for hi-rez screens where the user is expected to use fat fingers, rather than a precise mouse, to click.

Other design tips include using fluid layouts and targeted CSS media queries, such as “device-pixel-ratio,” coupled with a second set of images at twice their normal resolution, to boost forward compatibility.

Likewise, Apple displays now specify pixels as points, with a point being two pixels; for example, an HTML div’s single point border in iOS 4+ will show as two pixels wide. By specifying points as the unit of measurement in your CSS files, the correct size will be shown on all screens. Also, adding the “text-rendering: optimizeLegibility” CSS property, will allow Gecko and WebKit browser users to enjoy much smoother text on high-pixel density displays.

Although only a small percentage of your website’s audience may currently be using these advanced displays, the trend has always been towards better color and sharpness, so you can expect this number to only increase. By incorporating design considerations for this lucrative audience into your current and future projects, you could be a step ahead of your competition, while unlocking a new marketing opportunity.

Related:  

More Articles

opinion

Hefner’s Legacy Lives On in the Industry

Juicy Jay ·
opinion

Privacy Notices Shouldn’t Be Treated as an Afterthought

Corey D. Silverstein ·
opinion

Legal Issues Pop Up When Filming Sex in Public

Lawrence G. Walters ·
trends

A Road Less Traveled: Accepting Alternative Payment Solutions

Stephen Yagielowicz ·
trends

Credit Card Processing Today: Decline or Dominance?

Stephen Yagielowicz ·
trends

Shifting Regulations: Keeping on the Straight and Narrow

Stephen Yagielowicz ·
trends

Putting Your Best Foot Forward: Billing's Best Practices

Stephen Yagielowicz ·
profile

PornDoe Premium — 35 Network Sites and Counting

Rhett Pardon ·
profile

Q&A: White Label Dating’s Steve Pammenter Expands Horizons

Alejandro Freixes ·
Show More