"Always think about what you're doing, and learn as much as you can."

I recently interviewed Thomas Fuchs, Ruby on Rails core alumnus, software developer, and author of new e-book, ‘Retinafy Your Web Sites and Apps.’ It’s a concise collection of tips, recommendations, and code snippets for web developers interested in preparing their sites for retina phones, tablets, laptops, and desktops of the present and future. Fuchs describes a retina screen as one that “has twice the resolution of a ‘normal’ screen with the same physical size.” These super tiny pixels create something gorgeous- the user can enjoy sharper text, crisper images, and a richer visual experience; however, not all websites and apps are ready for retina. A photo, icon, or graphic text, consisting of a finite amount of pixels, will look blurry when blown up to fit on these massively pixel-dense screens. Thankfully, Fuchs has some suggestions. The book outlines the cross-browser javascript and CSS techniques for targeting retina displays, describes a couple clever ways of optimizing images so that only one graphic, rather than both a ‘retina’ and ‘non-retina’ image, are necessary, and showcases some lovely real-world examples of retina-ready website elements.

The book is short and informative, but perhaps a bit too brief to warrant the $30 ($20 while in beta) price tag. If, however, you are new to the concepts of optimizing sites for retina displays, this is definitely the book for you. Fuchs makes it clear that it is not as intimidating as it seems, yet it is important- these screens are here to stay, and we might as well take advantage of this opportunity to create beautiful experiences for our users.

Planet Argon: Why a book? Isn’t it sufficient to just google for “retina images”?

Thomas Fuchs: Well, you can find (most) of the info online. if you have a week or two to spare. :) It’s really about getting up to speed with everything you need to know in an hour or so. From there, you have easy-to-follow instructions so you don’t need to research all this stuff yourself. Also I’m a trusted source, and not some weird comment in some weird forum somewhere. In any case, there’s more than meets the eye (ha!) with retina screens. Basically, I started to compile this info for myself, and then I released the flowchart, which was downloaded almost 100k times in a few days- looks like lots of people are looking for good info about this topic.

The flowchart is really helpful. You released that after you started working on the book, though- right?

No, that came first. I basically wrote the book in 3-4 days, and did more research. I usually work in bursts like that.

Did the release of the macbook motivate you to start writing?

What eventually motivated me was doing the retinafying on our new product, Charm — I had to learn about how retina desktop screens work for that. I previously did lots of research on mobile, so it seemed natural to combine this knowledge and release a “how to retina” book. I also like to work on something completely new from time to time to shake things up.

Do you have a retina macbook? Is the experience using Charm much different than it’d be had you not retinafied the app?

I actually don’t have a Retina MBP (I borrow one for testing from time to time). And yes, you can clearly see the difference. Another app I’ve retinafied before was Every Time Zone, but that’s targeted for mobile use (works great on desktop retina, though).

According to the book, a lot of ‘optimizing for retina’ involves taking advantage of current web standards, such as utilizing CSS3 and SVG in place of images. What is the relationship between retina technology and web development best practices?

I hate the term “best practice” — it’s often used as an excuse not to think about how you do stuff.

What term do you prefer?

I prefer “stuff that works well.” I think using CSS3 & SVG is a pragmatic solution for many of the problems you face when creating high-resolution capable sites. For example, using a SVG image on an icon gives you automatic retina-compatibility and you end up with a faster-loading site because of less data transfer.

It’s interesting, because I think the idea of best practice is just the opposite- isn’t it supposed to compel people to be thoughtful about their work?

The sad reality is that people don’t like to think, but follow recipes. Often that’s ok, but a lot of the material that’s out there for web development is not based on real projects where people solve real problems. It’s often very abstract, academic and has little to do with the gritty reality, where devices and browsers have lots of bugs and issues. That’s why, in the book, I’m trying to stress to keep things as simple as possible: design/work with retina assets by default, only make exceptions for normal screens if absolutely necessary.

I think people are fearful- they’re afraid of making mistakes, and they hope a recipe will help them avoid mistakes.

That is true, but there’s no reason— the stuff you’re putting on the web will eventually break somewhere. It’s easy to fix. You don’t even need to compile anything. :) I’d be much more afraid of my sites not loading fast enough or looking bad. Note that I’m not saying best practices are intrinsically bad— it’s what you make of them. Always think about what you’re doing, and learn as much as you can. I hope that the book is getting at least some people on this path, by teaching them about things they normally don’t think about. For example, I’ve sneaked in quite a lot of designery stuff, even though it’s mostly technical how-tos, like mentioning that icons just can’t be scaled arbitrarily.

Yeah, absolutely. Also, the image optimization techniques, which are both tech-y and design-y.

Yeah. For example, the JPEG quality— it’s something where you can’t just say “use quality X”, because it depends on the type of picture and the type of audience you have.

The jpg technique, for which you use a lower quality yet high resolution jpg as your one cross-platform image, as well as the .999 opacity fix, which reduces jaggies, are both quite clever. Did working out those ideas require some experimentation?

On the two techniques you mention: I suspected it would work, but I had to experiment a little bit to find the optimal settings for the example images. It’s easy enough using ImageMagick on the command line to generate lots of variants and then compare with Quick Look. As an aside, I hope for reader feedback about issues they have so I can add more fixes and workarounds. I have a freakish love for debugging browsers issues like that.

Mobile web development: do you think of it as an extension of traditional web development, or something different?

For web apps, I see them as quite different. For sites like blogs, I’m voting to just serve your normal site up. Mobile devices do a good job of showing that to you, e.g. see apple.com— no mobile version. And they certainly know what they’re doing. :) I hate when blogs have a “mobile theme” and nothing works correctly, images are missing, etc. For apps, however, it’s different. They need to be designed for the particularities, e.g. touch vs. mouse, small screen, etc. And use cases— you often want different things when you’re on the go, than when you can sit down and look at a large laptop screen. Sometimes, “responsive design” does the trick, but that’s another one of those things where people are enticed to stop thinking about what they are doing. Use with caution. :)

Are there some examples (websites, web apps) that you’ve found that intelligently utilize retina optimization techniques?

I like m.zappos.com quite a lot. They try to keep things simple and avoid complicated solutions to problems. For example, they don’t use any kind of “zoom javascript” for their product photos, they just link to a large JPG, that’s it. By doing that, you can just use whatever controls are built into the browser, and hit the back button when you’re done. Faster loading, user doesn’t need to learn anything new, works better. The new basecamp looks pretty good on Retina, though they haven’t updated some UI images, yet.

Do you think this is it? Or will we see a resolution that’s even more pixel-dense than retina?

Well, right now you got 0.75/1.0/1.5/2.0 as ratios, in the wild. I wouldn’t wonder if in the future you’ll see 4x screens, but that will likely take a little while. Given that movies and stuff are recorded at 4k, I can imagine that 4k resolution will become a desktop/TV standard at some point, e.g. QFHD is 3840×2160 (double that of 1920p). The macbook pro retina is not far behind, though, at 2880 × 1800. But they had 3840×2400 monitors more than ten years ago (204dpi), so it’s not really that new.

The book is currently in beta- what more can we expect? And when will you, as the author, know that it is done?

My plan is to let it gestate for a little while, wait for some reader feedback, and then finalize it by filling in any gaps and polishing it up (there’s also a suite of code examples accompanying the book). I might release updates in the future when new stuff is coming up— it’s easy enough to do that. There’s some more content coming about icon fonts, and some other stuff, but I need to do another day or so of research.

Awesome- well, I definitely look forward to watching the book progress.

Me too. :D

---

Go and buy ‘Retinafy Your Web Sites & Apps,’ check out Thomas’ fantastic work, and follow him on Twitter. Also, take a gander at the great mobile web development work that Planet Argon does.