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.
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.
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.
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.
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.
- 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?