Idea: Device-specific screenshots (or, Abusing Retina.js on Addressbin)
In January I came into possession of a new retina-display Macbook Pro. The screen is amazing, but has the side effect of making images on websites look mostly like garbage, unless the developer has taken extra steps to serve double-sized images to people with fancy screens.
I ran across this problem trying to put a screenshot of Outlook on the homepage of Addressbin.com, my latest project. I knew it looked fine for almost every other visitor, but it was jarring for me, and presumably to anyone with a retina screen. And of course, there doesn’t exist a screenshot of Outlook in 2x resolution, at least not that can be had easily.
That gave me an idea. Using the eminently convenient retina.js, I created two alternatives. I used a manufactured Outlook screenshot as the low-res version, and for my 2x image, I just took a screenshot of the mail client on my Macbook. Now, when I browse to the homepage, I see this:
And people with lesser displays see:
(If you’re not on a retina screen, imagine the top image looks a lot better than the bottom one.)
Voila! OS-targeted screenshots, sort of. If you wanted to take it further,
it wouldn’t be a large task to adapt Retina.js to sniff window.navigator.userAgent
and look for images tagged @win/@osx instead of @2x if you wanted.
Of course, showing people a familiar os screenshot may or may not make any difference to your bottom line. I’ll leave it to somebody with the traffic to conduct some tests and get back to me. I’ll be waiting right here.