Web design in a retina world

I’ve been meaning to write something about retina support ever since the new retina Macbook was announced. I made a lengthy comment over at Baekdal discussing how to handle web design in a retina world. I’m reposting it here for posterity and hopefully to start a conversation.

When talking about retina graphics, I think a lot depends on what we’re talking about: layout, icons, charts, or photos.

For building layouts, I don’t think defining things in absolute widths (you [Baekdal] seem to love your centimeters) is the way of the future, mostly you’re going to want to use a clever combination of ems and percentages. We’re looking at a future where defensive design for the web is even more important than it used to be.

Using a combination of new CSS properties such as flex-box, box-sizing and calc() building these layouts will be a lot easier than it used to be (again, broad support is years away, to work in a way that works in all current browsers that matter you’re going to need to combine %-based widths with em-based widths using multiple divs)

For icons and charts – pixel fitting icons is not a thing of the past, even in this retina world, but it matters less. Icon fonts are getting big (and rightfully so) – charts should be made in SVG. Look at the chart in this NYTimes article. Sweet SVG. Done properly icon fonts and SVG won’t negatively impact loading speeds, and they are infinitely scalable. One disadvantage is that it’s just harder to do (and thus less likely to be done).

For photos, you’re [Baekdal] saying “Retina displays have four times the pixels, meaning every picture has to be four times as big.” – this would be true if you really have to serve pictures in 100% quality without any JPG compression. I think for most purposes serving a 50% bigger image is just fine. A photograph doesn’t need to be four times as big to look sharp on a retina display. A 50% increase in resolution will already most photos already indistinguishable from the actual 200% version.

If you don’t believe me try visiting this test site on an iPhone. A 50% increase in resolution also doesn’t mean double the file size (see this article and it’s example photos)

All my points aside, of course serving retina graphics will still increase page load speed. On a broadband connection this doesn’t really matter. A 14Mb article is nothing — we stream 1080p HD trailers, why not enjoy HD articles? — if you have a good connection.

What about the slow connections? There’s a big problem. Web developers need some way to figure out how good a connection is and serve approriately. My thinking is that browser makers should have a background process that tracks the available bandwidth. This property can be used in CSS media queries and Javascript (e.g. client.networkSpeed)

On my own website I’m making some assumptions in deciding whether to serve retina or not e.g. if you have a 24″ screen you’re probably not mobile. This is a solution to make some bandwidth assumptions, but not a great one. For all I know you do have a large screen but are tethering at 3G or EDGE speeds.