Welcome to Retina-stan

The Web, Balkan-ized

The old George Santanaya quote that “Those who cannot remember the past, are condemned to repeat it” has reared its ugly head once again, and this time its turned up in the world of web design.

In the dark old days of the nascent web, mistakes were made. The two browser giants, Microsoft and Netscape allowed their paths to diverge, and webmasters (we did it all back then, no specialists required) were forced to separate elements of their presentation for one browser or the other using Javascript sniffers; little bits of code that would send the viewer to one page or another based on what browser was detected via the user agent.  It was hugely ponderous and we all feared what might happen if there were 4, 5 or even 6 viable browsers we needed to code separately for.  But thankfully the issue was resolved by CSS and our fears were averted.

Meanwhile in the present day, designers have to deal with a web that requires a “responsive” design – on that by using @media queries will present the appropriate css 3 styles to a browser, be it on a phone, tablet, laptop or whatever. Essentially, we’ve created a variable driven CSS; one of the things we realized virtually from the outset of CSS that was missing.  Say good bye to those funky old conditional comments calls that allowed use to work around that failing.

Now we have retinal displays, which unlike the phones and tablets that require different widths and sizes, actually changes the pixel density of the images and fonts that are presented.  It’s all pretty cool, but honestly, its also more work if you want to do it right.

To find out how to do retinal displays correctly with CSS 3, I direct you to the latest from Smashing Magazine, entitled “Towards a Retina Web“.

With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the “non-Retina” Web in 2010, we had to wait for the third-generation iPad to fully realize how fuzzy and outdated our Web graphics and content images are.

In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. By contrast, the Web is a gargantuan mass whose very open nature makes the transition to higher-density displays slow and painful. In the absence of industry-wide standards to streamline the process, each Web designer and developer is left to ensure that their users are getting the best experience, regardless of the display they are using.

That walled garden unfortunately won’t be contained.  To continue the analogy, the crops have propagated out onto the neighbors fields.  Retina displays are coming whether you like it or not.

So here we are, now our designs must support not only all major web browsers, but also all form factors presented by tablets, phones, etc. In widths alone, we ought to be considering everything for 1600 px wide, down to 300.  Now throw on retina display changes and we’ve got what we always feared, a fully Balkan-ized web.

Take Away

It’s not enough to evaluate a design based solely on how it looks in the browser anymore.  You’re analytics (you have those, and read them, right?) should be showing you that you’ve got more people coming from disparate devices than ever before.  As such, you need to evaluate your designs on their performance not only on the web, but on phones, tablets and that you’re providing the best possible display to each.  In the case of newer Apple products, that means handling Retina Display.

Ignore them at your peril…

 

Be Sociable, Share!

One thought on “Welcome to Retina-stan

  1. Pingback: Web Design and Engineering Posts at CahillDigital.com | All Things Cahill

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *

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=""> <strike> <strong>