Web Design for Retina Displays

Over the last year, Apple has released a handful of devices with Retina Display. iPhone got it last Winter. iPad followed this Spring, and now Macbooks come with Retina varieties.

What is “Retina”? Technically, it’s packing way more pixels into every inch of your monitor than the old 72ppi standard. iPhone packs 4.5 times the pixels into your screen at 326ppi, iPads and Macbooks are in the 200ppi range. Apple isn’t the only one out there creating these beautiful new displays, though, HTC and Asus are but two companies creating Android based devices with high ppi, and Amazon’s Kindle Fire has followed suit.

Unfortunately, while Retina has the ability to make things look absolutely gorgeous, mostly web fonts and large photos, it also destroys smaller images, such as tiny icons or banners. This is simply due to the fact that your screen is trying to display one pixel as multiple pixels, and regardless of what prime time cop dramas would have you believe, computers are only so good at enlarging images, and that “so good” amount is equal to “um, well, really bad.”

Web Design for Retina Displays with every ClickNathan Website

Just as I recently announced that I’ll be using responsive web design techniques in every new site I build from here on out, so will I be taking into account Retina displays for all of my clients’ sites. That means your logo will display beautifully whether someone’s on an iBook from the last century or the latest MacBook Pro, whether they’re surfing your site via the original iPhone or the latest Kindle, icons, text, images, everything will be crisp, clean and appropriate for the user.

And just as with the responsive design promise, I won’t be charging any extra for this service.

Interested in learning more? Contact me and we can discuss the details!

Up Next: Responsive Web Design: De Facto