I had my brand new retina display iPad (all 3.1 million pixels) in one hand and the panic button in the other.

I was sure the pixel-dense screen would take the websites we’ve built and peel back their layer of pretty, revealing something less than perfect (like HD cameras did to sitcom actors). Was this layer we’ve so painstakingly designed, sliced, exported, and built stylesheets around really so thin? Just before the screen lit up, I realized this was nothing new. For the first time, I saw the Internet for  what it really is—a tall, lanky junior high kid who is pissed at the world because he just got done being a short, fat grade schooler.  It’s never just right. Rather than grow proportionally and gradually,  it hits terribly awkward spurts that throw everything off balance.

So, how will the retina change the shape of the web, and do we need to rush to update everything we’ve ever built? Of course not, part of building for the web is accepting that everything is in a constant state of flux—there isn’t enough time and money in the world to “fix” the internet every time a company releases a new technology. Instead, we cling to sensibility by seeking a middle ground and building things with the future in mind. Here are a few specific things I’ll do (or continue to do) as screen resolutions evolve:

Rely on web type & CSS.

We’ve always wanted better rendering for web fonts, and seeing type on a pixel-dense screen for the first time is mind-blowing. It’s also a validation that our commitment to making great type happen on the web without image replacement has paid off. Retina exposes those places where images are used rather than HTML text or CSS. Next to the ultra-crisp text that CSS + HTML render on retina, those fuzzy spots around image buttons and letters tend to stand out. For comparison, here’s a retina iPad screenshot of a button exported as an image, then rendered with web type and CSS (minus the dot texture):

button example

I recently wrote that seeing how blurry the sprite icons on this site looked next to retina text pushed me to get to know font icons better. The advantages are numerous, namely how easily scalable they are and how quickly we can re-color or transition them with CSS. Using font icons whenever possible seems like a low-risk investment. Especially when implemented with care.

Images shouldn’t all be doubled in size...

unless, perhaps, you’re serving images as amazing as NASA. It might make sense to use media queries to target pixel density for handling things like background images in CSS, or even look to Retina.js to serve larger images to high-resolution displays, but should we always do it? As designers who’ve learned that every millisecond counts for load times, we can’t assume that just because someone is browsing from a retina device, they want to download 2x the image assets. Alongside that, there are a lot of smart people working on responsive images, and perhaps the picture element will prove to be the most sensible method, at least for inline images.

Of course this is subjective, but I’d say that for the most part, even 72dpi images (photographs, textures, and illustrations) look better on a retina display. Now that we’ve been using fluid-images and CSS background-size for responsive sites, when those images display even a little smaller than actual size, those smushed together pixels actually continue to shine through on retina. So, perhaps it doesn’t always have to be about serving uniquely-sized images to each device. In many cases, I think loading images that are just a bit better will go a long way. Make images a few percentage points (not 2x) larger, then optimize the hell out of them.

A pixel is still a pixel.

At least it is as far as I can tell. I’m sure I’m not alone in saying I’m scared when I think about how pixel densities across multiple devices will impact web design, but I have to say that everything I’ve seen thus far puts me at ease. Right now I am staring at a 1 pixel line drawn with CSS on a retina iPad and an iPad with an older display. They look the same. I’m not saying there’s not a lot of work to be done, just that I’m relieved to see that device makers seem to be doing quite a lot of it. Likewise, if we rely more on CSS than image exports, I’d say we’re doing our part.

So, that panic button? It gets to go back into the drawer for another occasion. Sure, the internet’s clothes are going to fit funny for a while as it figures out how & where to put all those extra image KBs, but we’re going to be okay. These are awkward times, but rejoice. We all get to play the role of the guidance counselor: having discussions, writing specs, and building tools that continually reshape the web into its full potential.

Ads by Fusion

22 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Justin Michaliga

    Great points all around. I particularly liked the advantages of using font icons and CSS. What do you think about SVG’s role in moving forward with pixel-dense displays?

  • Christopher Meeks

    Great points, Trent. It’s easy to freak out when you see a blurry icon here or there, but you’re right to prescribe smart, forward-thinking solutions.

  • Patrick Haney

    Well said, sir. I’ve been digging into Responsive Web Design methods, browser support and Retina displayed images these past few weeks and I’ve come to the same conclusion as you. It just brings us back to the somewhat unsatisfying but completely acceptable solution to the web these days:

    Do what makes sense in the context of your users and the project you’re work on.

    I personally love this in-flux internet we’ve been handed, it’s a perfect time to be designer for the web if you’ve got at least a little motivation to push boundaries and lead the way for a better web.

  • Simon Foster

    Good points there sir. I was the same when turning on my new ipad, sweating about all the work I’d have to redo, then I looked and realised it wasn’t that bad at all, a few tweaks in my design/ build process that’s all. Happy days :)

  • Harold Herbert

    Trent,

    What about using a pixel density media query to serve up high-res assets to retina devices? I develop partner pages for Flipboard, and we use this technique to swap in 2x logo assets for the new iPad.

    example:

    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    header .logo { background-image:url(assets/business-insider/cover-logo-2x.png); background-size: 423px 36px; }
    }

  • Trent

    @Patrick Haney:

    I personally love this in-flux internet we’ve been handed, it’s a perfect time to be designer for the web if you’ve got at least a little motivation to push boundaries and lead the way for a better web

    Bazinga! I’m right there with you :)

    @Harold Herbert: Howdy! I mentioned that briefly in the post. I think it’s a great tool to have on the table, especially for things like logos (as your code illustrates). Of course, it might not be the ideal for every situation.

  • Charlie Pratt

    Thanks for this. Always good to read articles that pose the crazy notion of NOT freaking out. :) Keep ‘em coming.

  • Jeremy Worboys

    Hit the nail on the head with this one. I’d expand your idea of controlling how images get served to high density devices and recommend you check out retina-images.complexcompulsions.com

    The primary advantage of this solution over retina.js or Matt Wilcox’s Adaptive Images is that you have full control of the size and compression of both the high density and standard images. Heck, you could serve an entirely different image and it wouldn’t care.

  • Brendan Falkowski

    Glad to read you’re having the same experience with high-density screens. I wrote a similar but short-winded article right after my iPad arrived. Loved the teenager/Internet analogy. Right on.

  • The_Realist

    It’s funny how the web community enslaves itself to apple, calling every high resolution display ‘retina’. Why that?

  • Jesse Gardner

    I think even app-designers struggle with this. I’m using DropBox on the retina display, and some of the icons are crisp, but they’ve obviously forgotten a few and I can tell. Dunno, jury is still out on my panic button... maybe I just need to lighten up.

  • Trent

    @Jesse Gardner: I think app design (and icons in general) get their own file drawer. And I bet there’s more work to be done there too.

  • David Bushell

    Good article and it certainly highlights the issues we face on the web with high pixel density screens.

    What frustrates me however is how Apple-centric this appears. Maybe I’m slightly jaded — I read a lot online — but it seems to me that people only care about web-related issues when Apple *makes* them an issue. The reality is most people don’t use Apple devices. While their technology is undoubtedly the most fine-tuned and best experienced, they’re not alone. I’m sick of reading articles akin to “is your website Retina-ready?”. High pixel density is a challenge without many answers right now but isolating it to a single device is not helpful in the long term.

    Ultimately, we shouldn’t be asking “how do we handle the new iPad” when the bigger problem is a question of “how do we handle high PPI?”.

  • Jez Make Hay

    when the bigger problem is a question of “how do we handle high PPI?”

    Agreed - with mobile networks being a very weak link (in the UK we won’t be getting 4G any time soon) in terms of bandwidth for larger media.

  • Joel Andrew Glovier

    Brilliant article, Trent. Couldn’t agree more. And I think it’s an extra blessing for the web design industry that as technology progresses, it forces us to evolve past our comfortable habits and workflows.

    I think it’s really exciting to think that one day a vast amount of design execution may take place in the authoring of styles in the browser, rather than the utilizing of a Photoshop GUI.

  • seth

    I like this quote. This helps me chill out a little bit. Thanks Trent.

    part of building for the web is accepting that everything is in a constant state of flux—there isn’t enough time and money in the world to “fix” the internet every time a company releases a new technology.

  • Maarten van Gent

    This, sir, is why I read your blog.

  • Michael Acevedo

    Good article, Trent. This was exactly how I felt when the “New iPad” came out - demoing one of my previous websites to a client only to realize how it didn’t look so great in retina. I guess we will see how things go, especially as technology advances(wait until the MBP comes out in retina).

  • Geri

    This is probably the most “readable” site I’ve ever come across. Very clear, clean and easy to navigate. Wonderful and refreshing!

  • Trent

    @Michael Acevedo:

    (wait until the MBP comes out in retina)

    Ha! Maybe that’ll be this week ;)

  • Chris Mayfield

    Great post. This really helps the project I am working on right now. I have to admit all the unknowns of the web right now make me even more excited to figure things out!

  • artatum

    ...and thx for the font size. Great !

Leave a Reply