Is Your Website Retina Display Ready?


You’ve probably heard the term “Retina Display” here or there, but what does it mean to you? Are you aware that this will affect your website and you’ll have to redesign your site eventually? There won’t be a choice if you want to advance with technology. Chances are, your lack of quick action may lose you visitors to your site while your competitors pull ahead by using the technology. Why and what do you need to know about this technology that will very soon be a part of every computer and mobile device?

My parents had a 1973 Ford Mustang convertible until two years ago when it literally fell off its rusted frame a la the Blues Brother’s car at the end of the movie. While they had it in its prime, leaded gas was still the preferred method of fueling cars and poisoning the planet but there started to appear unleaded pumps here and there at gas stations that actually only sold gas and car servicing products and not hats, glow sticks, 900 ounce drinks and withered hot dogs on metal rollers.

With time, the leaded gas pumps that fed this old muscle car disappeared as new cars replaced the old Detroit autos that could do 120 MPH without so much as a groan or shiver and my parents, along with a select company of classic car owners were forced to use a lead additive for every tank full of gas. Those vehicles are all but gone as is the analog TV set that we were forced to throw out when all signals became digital. Technology marches on and our CRT computer monitors were quickly replaced with flat screens and hernias from lifting a 21” monitor are a thing of the past.

Things were too comfortable, so the angel of technological advances had to throw us another bank account-drainer for our digital sins. Apple, which is the prime suspect in the death of Flash through its exclusion in iPad products, has yet again advanced the product beyond the baby steps most producers take and put their upcoming tools a decade ahead of today. It’s almost like going from a 1940s car to a jet pack overnight. Get ready for the new Retina Display and a new visual experience!

Will This Hurt Your Present Wesbite?

When my local cable TV provider showed up to hook up my HDTV box, he said I would never watch TV without HD again. He was right. I suspect the same thing will happen with the new Retina Display and like the switch of TVs to HD and large flat screens ruining the standard 32” CRT TVs for consumers, there will be an output of cash for new hardware but there will also need to be an upgrade of the images now planted firmly on millions upon millions of web sites as well as the sites themselves.

ALSO READ:  DesignContest - Workflow Innovation

When Apple announced the Retina Display MacBook Pro, one of the applications with which they demonstrated it was Photoshop, but not a current release version of Photoshop. The current release version of CS6 opens images at the same size and the same resolution as on a non-Retina Display MacBook Pro. The question is, as CS6 has just been introduced for sale and the RD looms just over the next hill, will Adobe offer a free upgrade of CS6 to handle the tech bump or is CS7 going to be the must have app to deal with the new color gamut and resolution issues on new hardware?

According to an article on cnet news, “Retina Display iMac to debut in October?” author Lance Whitney writes:

An all-new iMac will reportedly debut around October, with a high chance of sporting a Retina Display. At least, that’s the latest scuttlebutt from DigiTimes.Citing the usual “upstream supply chain sources,” DigiTimes claims that Apple’s suppliers will start shipping components for the new iMac this month. Those sources also said that Apple is looking to expand its Retina Display across all product lines, which means the new iMac has a “high chance” of getting the high-resolution screen. Apple is reportedly pushing the Retina Display for all its products in a bid to outshine its rivals in screen resolution. Since Retina Displays are an expensive component, other PC vendors are unlikely to jump on the higher-resolution bandwagon at this time.Beyond launching a new iMac this year, Apple will also refresh both the iMac and Mac Pro next year with brand new models, according to the sources.

Mr. Whitney does add:

It seems doubtful that Apple would debut a new Retina Display iMac as late as October and then push out yet another refresh next year. October also seems an unlikely launch date as Apple will certainly be busy unveiling the new iPhone and kicking off iOS 6 around that time.Another report also throws DigiTimes’ intel into question. The New York Times’ David Pogue recently said that an Apple executive told him that new models of the iMac and Mac Pro are in the works but “probably” won’t be released until 2013.

C. David Tobie, who writes on photo technology and aesthetics, commented about the new color gamut:

Earlier MacBooks and other Apple laptops had a sub-sRGB color space that was not only smaller, but twisted in a way that offset the primary colors from their ideal hues. While this issue had been improved substantially in the more recent MacBook Pro models, the Retina display now offers a very close replication of sRGB on screen. This offers a number of advantages; not just over smaller gamut displays, but to a lesser degree over wide gamut displays as well. In addition to increasing the gamut from earlier devices, emulating sRGB in hardware means that non-color managed applications, browsers, and video players will show more reasonable color even without the ability to use a profile.

ALSO READ: the Second Time Around: Will the Website Handle the Traffic This Time?

If you work on print projects, color profiling and calibration will be your main concern. Mr. Tobie also addresses those functions under the new Retina Display:

The other component of the calibration and profiling process consists of creating an ICC profile describing the current state of your display, its primary colors, its tone response curve or gamma, and other factors. Resolution does not effect color and density measurements, so the main feature of the Retina display is not a problem for profiling. The Retina display, by avoiding problematic technologies or extreme color saturations, allows for very accurate profiling of the display. I will oversee detailed comparisons to a laboratory grade display measurement device next week, but even in advance of that process, I have full confidence that the Retina display is being capable of being very accurately profiled by latest generation profiling tools such as the Spyder4.

But the main concern people who need to add lead into their existing web sites and images is considerable. According to Tim Stevens in his review on engadget:

The primary Apple apps – Safari, Mail, the address book, etc. – have all been tweaked to make use of all these wonderful pixels. Sadly, little else has. While we got assurances that third-party apps like Adobe Photoshop and AutoCAD are in the process of being refined, right now, seemingly every third-party app on the Mac looks terrible.Yes, terrible. Unlike a PC, where getting a higher-res display just means tinier buttons to click on, here OS X is actively scaling things up so that they maintain their size. This means that non-optimized apps, which would otherwise be displayed as tiny things, instead are displayed in their normal physical dimensions with blurry, muddy edges. You do have some control over this scaling, with five separate grades to choose from, but none will make these classic apps look truly good. At least, not until their developers release the updates they’re no doubt frantically working on at this very moment.Take Google Chrome, for example. You might forgive the buttons and UI elements for being ugly, but even the text rendered on web pages is blurry and distorted. It’s bad enough that you won’t want to use Google’s browser until it’s updated, which will surely leave some cynics wondering if indeed this isn’t a ploy to get folks to spend a little more quality time with Safari.

ALSO READ:  CIO Perspective: Traditional Strategies Still In Place

It Will Be a Long Transition for Most Websites

Brian LePore says it best in his article, “The Effect of Retina Display on Web Design:

The term Retina Display is just a buzzword Apple created to refer to any device that was 300 DPI or greater. It is not exclusive to Apple devices. There are already many smartphones that have achieved that standard. Heck, LG is working on a 400 DPI device. This means that a lot of mobile devices out there that can benefit from you updating your design to take advantage of the high DPI capabilities.Font rendering is much smoother than your standard computer screen. It made a huge jump closer to print quality rendering. You can even switch your default font rendering from Helvetica to the slightly improved Helvetica Neue font and text will be seem more readable.By creating an image at twice the display size you are packing more detail into a smaller space. Images will appear crisper, and beautiful.Mr. LePore also relates the huge bummer:

Your page load time will increase. By serving a larger image you are serving a higher file size to the user who will spend more of their bandwidth to download the file. On a mobile device this will be quite noticeable.You will now need two versions of every file you would like to optimize. This will increase your disk usage and thus fill up the server faster, requiring a new server sooner.Presently, the CSS media queries that are useful in responsive web design make it very simple to target background images that you would like to optimize. That’s all well and good, but what about images that are part of your content such as your logo? There is no good solution.

Luckily, he does include some solutions such as using Java Script to detect retina, server side detection, just serving retina and empty src element and CSS generated content but these are the digital equivalent of using lead additive to the classic car until it falls to pieces from age. Eventually there will be easier solutions, as the web must deal with Retina Display as the standard and only way to drive around the digital information highway. The good news is it will be a beautiful ride but should we expect a few fiery crashes along the way?

Images ©GL Stock Images


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

5 thoughts on “Is Your Website Retina Display Ready?