If you’re reading this website on a new iPad or MacBook Pro with a Retina display, you may have noticed how crisp the logo is. Go on; take a good look. Zoom in with your fingers. Also check out the navigation bar, and the graphics for Reviews, Tips and How-Tos. See how clear and crisp they are?
That’s because we’ve upgraded the site to Retina — Apple’s marketing term for screens that are so dense with pixels, they’re practically invisible.
We think it looks really sharp. And next week, we’ll be giving the mobile site a complete overhaul to make it pretty for the iPhone 5.
Here’s what the site looks like on Retina and non-Retina devices.
Hit the jump for some of the geeky details:
The Retina upgrade involved doubling the resolution of most of the site’s graphics:
– Masthead (logo, logotype, social)
– Navigation bar
– Comments (non inline)
– Page background gradients (shortly to be done in CSS3)
– BC icons
– Footer icons and logo
– Search wells
For desktop, that means everything is x2. That means twice as detailed, not the original file blown up to twice the size.
The site is noticeably crisper and cleaner on new iPads and MacBook Pros with Retina display. You need a new machine to see the changes; the site remains the same for non-Retina devices. During testing, the difference was striking when turning the new graphics on and off. It was like focussing and defocussing a camera.
The work was done by Craig Grannell of Snub Communictions and Dan Draper of Dan Draper Designs. Thanks guys for the great work! And thanks to reader Adam Scott for pushing us to make the upgrade.
Here’s what the old site looks like when you zoom in on a non-Retina display:
And when you zoom in on the new iPad: