Posted by: Eoin Thomas O'Hehir
I wield a Retina Macbook Pro when adventuring through the various nooks and crannies of the Internet, and I always sigh when coming across some sites when images look a little blurry compared to how nice and crisp the rest of my desktop is. It looks terrible and out of place. "Why does it look that way?" I ask myself, but then I remember that many of these websites just aren't aware that I'm on a device that has an obscene number of pixels.
I mean, seriously. I thought that 1920x1080 was the best thing to shoot for just a little while ago, and then Apple started releasing computers that by default have a 2880x1440 resolution. Not only that, but all kinds of phones, tablets and other paraphenalia exist that also have a super-high resolution compared to the size of the device's screen. What's up with that? What is this "retina" thing?
What is Retina?
A "Retina display" is a kind of display marketed by Apple where, at a certain viewing distance, a human eye cannot see individual pixels. This makes content on the screen appear that much more crisp since the viewer can't see the stair-step pattern caused by individual pixels on the edges of elements. There is a plethora of devices out now (not just Apple devices!) that have high resolutions, most of them mobile phone or tablets.
Why is this important?
The bottom line is: devices that have that high of a resolution can make web content look that much prettier; both text and images become that much clearer and easy to experience on these devices. Complex Chinese characters or Japanese Katakana become easier to identify because you can actually see the individual strokes and images become incredibly detailed and precise. This is a huge improvement on the standard 72 pixels-per-inch (ppi) displays that we've all gotten used to since the late 90's.
Physical Pixels, Display Pixels and Screen Density
However, things get a little weird when you try to accomodate Retina screens, especially on web. The pixel size that you define in your CSS is not the same size you get on your screen. Also, some screens have a different amount of pixels per physical inch than others, which is useful to know.
These are the pixels your actual screen has. My Retina Macbook Pro, for example, has a resolution of 2880x1440.
This is the size that you would define an element to be in your CSS. Here's the key part: if you define something as 100x100 in your CSS, that element will appear to be the same proportional size on both retina and non-retina screens. Even though the retina screen is displaying that same element at 200x200 in Physical Pixels, the Display Pixel size will be the same no matter what screen you're on. That element essentially has double the pixels inside the same proportional size, making it appear crisper.
Screens come in all different shapes and sizes. The standard pixel density in PPI (Pixels Per Inch) for desktop screens that most of us are used to is 72 ppi. The iPhone 5s has a screen density of 326 ppi and the iPad Air has 264 ppi. The higher the pixel density, the closer together the pixels on screen appear to be, which makes content on screen appear that much crisper.
When designing and developing for web, there are a few things you can do to make your website look as crisp and clean as retina is supposed to be. It may be a little thing, but as more and more retina devices are emerging on the market, accommodating for retina screens will make a website look that much more professional.
Carefully Craft your Comps
You have two choices when designing your comps for export: Either start at Retina size and size down, or start at Non-Retina size and size up. If you start at Retina size, make sure all your page elements are positioned on an even-numbered pixel - otherwise it'll look all blurry when you go to export it because it's on a half-pixel, ew.
This kinda goes for any website you're exporting for, but if you're exporting images, make sure to automate your exports by using Photoshop scripts. You'll spend way less time turning your hand into a claw to save out all those images and/or icon sprites.
@2x sized icons and images
Vector graphics on retina devices can look incredibly crisp and clean. I'd definitely recommend these suggestions below simply because you only have to export one kind of file for all screens.
SVGs (Raphael, Snap.svg)
These are my favorite solution for vectors, especially for simple icons. Use an icon library like Font Awesome or create your own using tools like IcoMoon - all you have to do is import that font using @font-face and all your icons are now treated exactly like text elements! This allows for CSS3 animation and a whole bunch of other goodness. It limits you to only using one flat color per icon unless you use some CSS trickery to overlay icons on top of each other, but it's a great, quick solution for all screens.
Media queries aren't just for responsive design! You can also use these to detect the pixel density (or resolution, as worded in the exact media query syntax) of a device screen. You can utilize these to specify when to use higher-resolution images for your website and much more.
As more devices emerge with higher pixel densities, retina is becoming more and more of an important, necessary thing to think about when designing for web and mobile. Take the extra time to think about and solve for this so more people like me don't just shake my head in sadness when half your images are blurry and pixelated.