Optimizing Web Experiences for High Resolution Screens

I wrote yesterday about how the iPad3’s Retina display will cause issues for web designers. When the iPhone 4 came out, I can recall lots of fire drills at work to go through and update to Retina-ready graphics for a number of our clients. The iPad’s screen size compounds the problem.

“@Malarkey Screen resolutions are going to increase. Period. Adaptation is the name of the game in web design. The sky is not falling.” — @robweychert

The sky isn’t falling and adaptation is most-certainly the name of the game, but we do need better tools to deal with varied resolutions in order to better adapt. Apple will be releasing the equivalent of a car that can break the sound barrier, but is equipped with the same seat belts and airbags. Because this is right around the corner, it’s probably a good time to look at techniques to address these hi-res screens.

@media queries

We can use @media queries to target hi-res displays and serve them up different styles, including different background images. While not entirely related to images, Brad Birdsall demonstrates how you can finesse designs for hi-res displays. I wonder if there are the same issues regarding media queries and asset downloading with pixel-density as there are with device widths.

SVG

Several people mentioned how helpful SVG to be to create resolution-independent imagery. There’s a nice write-up on how to achieve resolution independence using SVG. Just make sure you check Max Firtman’s compatibility tables when implementing SVG. It’s still emerging.

@font-face

Using @font-face to create custom icons is a nifty trick. They’re crisp regardless of screen resolution. Chris Coyier has a great example of @font-face icons in action. Just make sure you’re only loading in the characters you need so you’re not serving up massive font files, which kind of defeats the purpose. Also check out Font Awesome, a free icon font made for use with Twitter Bootstrap.

Detect Network Speed

This is where things get tricky. Not all hi-res devices should necessarily get hi-res graphics. As I mentioned yesterday, a user might be on EDGE or 3G on a train or bus and might just want to get the content quickly, not have an immersive hi-res experience. The site’s performance and the user’s data plan takes a hit by getting served hi-res graphics by default. We need to be able to conditionally load assets/media based on how strong a user’s connection is.

navigator.connection looks like it can help, but basic types (EDGE, 3G, wi-fi, etc) don’t tell the whole story. A shared wi-fi network on a Bolt Bus or Starbucks can easily run slower than a 3G network.

There’s some other tools for detecting connection that look interesting. I’d love to hear if and how people are using them.

A new HTML element

The Responsive Image Working Group is trying to figure out how best to conditionally serve assets based on context. They’re proposing a new HTML element that takes device dimensions, network speed, pixel density and more into play in order to deliver contextualized web experiences. I’m excited to see what comes out of it.

Best Practices

  • Start with the low-res graphic first– Many devices don’t have hi-res displays, so it would be foolish to serve them up massive hi-res images by default. Use detection to conditionally load in larger assets. This is similar to the mobile-first image approach for responsive designs
  • Utilize basic image optimization principles – This is obvious, but take the time to optimize image assets, especially hi-res imagery, for mobile displays. Save for Web, optimize further, etc, etc.
  • Use CSS3 techniques like background gradients, rounded corners, etc where possible to avoid using images altogether. I have a feeling there’s going to be a lot of (especially fashion) e-commerce websites that are going to feel the hurt once the iPad3 is released.
  • Use resolution-independent solutions where possible- SVG, @font-face and even basic HTML special characters can help avoid issues with resolution.
  • Detect network connectivity – This is on the horizon, but definitely keep it in mind as you’re creating your experiences.
  • Be mindful of compatibility – There’s still many devices that don’t support SVG, @font-face and CSS3 techniques. Make sure to follow strong progressive enhancement practices to create an experience that supports more but is still optimized for these hi-res devices.

What else is missing?


12 Comments

  1. Jordan Dobson

    One thing I’ve learned is to do everything you can to rely on CSS3 for drawing UI elements using em or better yet rem units. This helps with resolution independence as well.

    One example I’ve created and used at various sizes time and time again is a simple spinner I created entirely in CSS3.

    http://jordandobson.com/webkit_loading_animation/resize/

    Making sure your design scales well of your base font is really solid way to start. Sencha Blog talks about this as well!

    http://www.sencha.com/blog/resolution-independent-mobile-ui

  2. Erik Runyon

    To say a retina display iPad is going to cause issues for us is a bit of an understatement. We’ve typically only provided hi-res images on sites that are specifically targeted at mobile. But with the iPad going retina, we’re going to have to start doing so for pretty much every site.

    To add to the list of resources, here’s a pretty simple article from back in late 2010 about how to apply background images for “retina displays”: http://bit.ly/dBd69s

  3. Trevor Sheridan

    It will be interesting to see if/how network speed detection is solved. I don’t know how I feel about serving up low-res images (or other assets in general) in times where there may be intermittent high-latency issues (eg. driving under a tunnel); which in that case you wouldn’t want to send low-res images when the service may get better within a brief period of time (when you’re out of the tunnel). Just my quick 2 cents on the topic.

  4. Senne

    A technique I personally use for high res CSS background images is using JavaScript to detect the device pixel ratio (window.devicePixelRatio). If the value is higher than 1, a class is appended to the html element Modenizr-wise so you can target the high res devices in your CSS.

  5. Peter

    I’m going to try out this http://adaptive-images.com/ to see if it is possible to combine with a manual option = hi-res images on/off switch at the top corner for detected iPad3. For now, I personally see this approach of giving the user a choice to be a more feasible option over going nuts with some auto network detection tools. Obviously I’m talking here about images = photographs & agree with CSS3, font-faces for images = graphics.

  6. Claudio

    I’m asking myself how to handle websites on high screen resolution displays like those of the new iPad. So far websites are optimized for small screens with a screen size of around 10″ for instance via Media Queries based on the devices resolution.

    Right now, the new iPad comes with a high resolution, which is in many cases even larger compared to common desktop resolutions (with significantly larger screens). In my opinion the new iPad must not show the Desktop Layout of any website. Based on the fact that the screen size itself has not been changed, I still prefer to get and see the Tablets Layout of a website. Will this be respected?

    I wrote an article dealing this topic (in German) here: http://fux.interwall.net/user-experience/media-queries-fur-ipad-3/

  7. Olaf Dunn

    I was having many problems with image quality on iPhone Retina displays when creating mobile sites. To the average eye, no quality degradation is detected, but to those who brand and design the site, any glimpse of blurriness is unacceptable.

    I wrote a post that describes the pain needed to fix this:
    http://blog.mstance.com/post/18971541207/ios-retina-friendly-sites

    It basically comes down to altering the viewport width to 640px (device-width reports 320px), adjusting form element widths and heights, and setting your minimum & initial scales to 0.5.

  8. Brett Jankord

    Hey Brad, I threw some code together to help with handling hi-res images on capable devices. https://github.com/bjankord/Hi-Res-Images Check it out, let me know what you think. I think you are spot on with your points in this article.

    I agree with trevor sheridan though, network speed is not a constant. A user may be on wi-fi/4g at one point and then be on a 3G network the next moment during their interaction with your site/app. This is something to keep in mind when thinking of using network speed to decide how you deliver assets/resources.

  9. gray ghost visuals

    As far as imagery is concerned, designers should also keep in mind how retina images are displayed and what it takes to get those images appearing crisp. Certainly having a small image is great for mobile but remember you can’t increase the size of your image if it is already at it’s smallest point. Just like print ideas we should always strive for that great image with high resolution so we can scale down as we see fit. Big first then adjust from there.

  10. Ricardo

    I see that all is being left to the client, but with some clever detection (starting with http headers and complemented by javascript) it would be possible to handle the adaptation on the server side.
    Good or bad idea?

  11. Chris Marquez

    The loading spinner is great Ricardo, thank you!

  12. Chris Marquez

    I meant Jordan Dobson : )

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.