You know, the word Retina is in everyones mouth at the moment. It began with the iPhone 4, continued with the iPad 3 and has now arrived in the MacBook line with the Retina MacBook Pro. Apple is pushing the boundaries of display technology and it looks great. Sadly a lot of things don’t look so great because the majority apps and websites is not updated, yet. That’s because on the one hand the percentage of visitors with retina displays is still very small and that on the other there isn’t a really good solution to serve the right images to the right devices.
The last few days I read a lot about the Retina MacBook Pro because I wanted to know more about it and I also stumbled upon some other interesting articles along the way. So here I present my second Reading List on the retina topic:

Shaun Inman:

One line of JavaScript and a few mod_rewrite rules and we have no fuss Automatic Conditional Retina Images.

Shaun Inman posted a solution to automatically load retina images if you are using a retina device. His solution is to set a cookie and then automatically serve the 2x images with a fallback to the normal ones of course. Seems like a nice and easy way.

So far I only added retina images as background images and had no problem thanks to media queries. But this is a nice way for inline images like photographs without serving the big ones to a non-retina device.
Sadly it doesn’t work in Firefox at the moment.

Jim Dalrymple:

I tried to get the MacBook Pro to get hot enough to turn the fans on, but after a few hours of using it, the fans have still not turned on. Or if they have, I haven’t been able to hear them.

I’ve been doing regular work on the Retina MacBook so far like image editing, writing, email and browsing the Web. I used it on the desk and on my lap and there is no heat coming from the notebook at all. It seems to be a lot like the MacBook Air in that respect.

If that’s true, I’ll buy one.

Over the last few years internet connections got faster and some web developers sloppy regarding the sizes of websites they build. With the advent of mobile page sizes matter again very much. (It actual never didn’t matter.) More and more people access your site over slow mobile connections. While this is happening retina screens pop up and demand higher resolution graphics which are by nature very large. At the moment there is no perfect way to counter that problem, but the RICG (Responsive Images Community Group) and WHATWG (Web Hypertext Application Technology Working Group) are working on it. In the meantime we have to do our best to reduce page sizes while serving good looking websites. There are several ways we can optimize our current sites. For example use different images for retina and non-retina screens instead of just shrinking the biggest one, embed graphics in typefaces, use svg graphics or build simple graphics with the powers of CSS. Today I want to talk about the latter.

The powers of CSS

By now CSS is very powerful and even gets better almost every day. Things like border-radius, box-shadow, text-shadow, gradients and soon filters and even blending modes are so powerful that they, while cleverly used, can create simple and sometimes actually really complex graphic elements.
This has some major advantages over traditional static graphics. CSS generated graphics are retina ready, faster to load and often easier to maintain since you don’t have to generate sprites over and over again when graphics are changing. Simple changes can be made very fast and easy. And you can even animate your graphics, either with CSS or JavaScript. That’s what I did at QUOTE.fm. It’s not online yet, but you’ll see it in action in the near future.

Example

To illustrate my words I put together just one simple example of a CSS graphic which I animate on click. See for yourself on jsfiddle.

So go ahead and try out building graphics with CSS and use it whenever it makes sense. Your users and their bandwidth will thank you. But always keep in mind that not all browsers support the latest, greatest CSS3 technologies.

500px:

• Retina Graphics: Updated for the new iPad

• Download HD Photos: Tap the Download button on a full-sized photo that is for sale in our Market

• Photo Location Support: See where geotagged photos were taken

• Improved Navigation: You can now find your photos, your favorite photos, and friends‘ photos by tapping „You“ in the sidebar

• Improved Search: use tags or photo names to explore 500px

• Improved NSFW filter

500px ist eine sehr schöne App mit der es echt Spaß macht Fotos zu durch stöbern. Jetzt gibt’s auch endlich Retina Unterstützung.

Adam D Bradley:

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.

Das klingt verdammt spannend und passt perfekt zum Thema „bandwith media queries“, über das ich mich kürzlich mit Florian austauschte.

Dank des iPad 3 solltet ihr alle eure Apple Touch Icons auf 144 x 144px aktualisieren, damit sie auch auf dem Retina Homescreen gut aussehen. Wenn ihr wollt, dass euer Icon auch in Reeder für iPad perfekt dargestellt wird, macht es wie ich und geht direkt auf 241 x 241px.

Ihr habt keine Ahnung wovon ich rede?
Das Apple Touch Icon wird verwendet, wenn man eine Webseite auf dem Homescreen speichert. Hat man keines, wir ein Screenshot als Icon benutzt. Manche Apps, so auch Reeder, nutzen das Icon ebenfalls.

Ähnlich wie das favicon, reicht es, ein PNG betitelt mit „apple-touch-icon“ in das Rootverzeichnis eurer Domain zu legen. Meines findet ihr folgerichtig hier: visuellegedanken.de/apple-touch-icon.png

Jason Grigsby:

Perhaps most importantly, Apple isn’t sitting on some secret technique to make retina images work well. Maybe they will provide better solutions in iOS 6. The way they handle images—downloading both sizes plus an additional HEAD request—may be the least efficient way to support retina displays. But for Apple, it likely doesn’t matter as much as it will for your site.

Passend zu den Gedanken von Christoph erklärt dieser Artikel wie Apple.com entscheidet wann Retina-Bilder auszuliefern sind und wie sie es anstellen. Apple kommt dabei eher schlecht weg.

Beautiful Pixels:

Although the new iPad has been out for just a few days, there are already many beautiful and unique backgrounds and homescreen wallpapers out there. We thought this would be the perfect time to put together another roundup and bring forward the work of all the awesome designers and photographers.

Noch mehr hübsche Retina Wallpapers für eure neuen iPads.

John Carey:

There goes Apple again making more work for me. The apparently beautiful new iPad screens have a remarkably high resolution, nearly as big as the large, full size desktop wallpapers I offer. Knowing this I knew it was time to jump in and start cropping images for all of the new iPad owners out there. It’s a bit time consuming but you guys know I love you so here we go.

Dank des Retina Display sehen die meisten vorhandenen Wallpaper nur so mittelmäßig aus. John Carey bietet die beliebtesten iPad Wallpaper von fiftyfootshadows jetzt auch in Retina Auflösung an. Falls ihr ein iPad 3 habt, schaut auf jedem Fall mal vorbei.