ericportis.com

Responsive Images on the Apple Watch

There’s a browser on the Apple Watch now. Apple has some experience shepherding a new class of radically smaller viewports into common use on the web; iPhone WebKit brought us <meta name="viewport" content="width=device-width">; 🍎Watch WebKit hath wrought <meta name="disabled-adaptations" content="watch">.

2018’s <meta>-magic serves the same purpose as 2007’s. Unless you send Apple a specific signal that you’ve considered one-inch-wide screens, they’re going to assume that you haven’t, pretend to be a bigger, more-common viewport, and zoom out.

I was curious about the implementation details, and their implications for responsive images, so I set up a test. Recently, I finally convinced someone running WatchOS 5 (my boss, hi Colin) to run said test, and the results are sort of interesting.

I was hoping that without the new meta incantation, Apple Watches would report an accurate DPR, for responsive images’ sake. I was hoping the they’d report DPRs like this:

Model Actual pixel width Viewport width DPR
Series 3, 38mm 272 pixels 320 px 0.85
Series 3, 42mm 312 pixels 320 px 0.975
Series 4, 40mm 324 pixels 320 px 1.0125
Series 4, 44mm 368 pixels 320 px 1.15

They don’t. Here’s what they actually do:

Model Actual pixel width Viewport width DPR
Series 3, 38mm 272 pixels 320 px 2
Series 3, 42mm 312 pixels 320 px 2
Series 4, 40mm 324 pixels 320 px 2
Series 4, 44mm 368 pixels 320 px 2

Every watch emulates a 320 px @ 2x = 640-actual-pixel-wide viewport – accurate physical pixel counts be damned! – and shrinks things to fit.

What's the practical implication for responsive images? Take this <img>:

<img srcset="tiny.jpg   320w,
             small.jpg  640w,
             medium.jpg 960w,
             large.jpg  1280w"
     sizes="100vw" />

By default, Apple Watches are going to pick small.jpg, even though they’ll only ever need tiny.jpg’s resolution. Wasted bytes!

Unless, that is, you say the magic words in your <head>:

<meta name="disabled-adaptations" content="watch">

With that, the watches do this:

Model Actual pixel width Viewport width DPR
Series 3, 38mm 272 pixels 136 px 2
Series 3, 42mm 312 pixels 156 px 2
Series 4, 40mm 324 pixels 162 px 2
Series 4, 44mm 368 pixels 184 px 2

Which’ll make responsive image selection more efficient, and also force you to make sure that your layout holds up on a 136-px-wide viewport.

Art direction

I'll hazard a guess that most responsive layouts would not fare well at 136-px. You know what else probably doesn’t withstand such shrinkage? Image content! At tiny physical sizes, many subjects are going to be so small that they’re not really legible:

An image of Tim Cook on an Apple Watch, but he's too small to see, really. An arrow points and asks, “who’s that?”

So, when designing for tiny screens, consider art directing.

The same watch as before, but the image of Tim has “zoomed in” to his face. The arrow text now reads, “it’s Tim!”

…like this. And note! That you can automate the process of identifying and zooming in on subjects, with tools like Cloudinary.

Takeaways

I don’t think (?) Apple Watch WebKit’s usage numbers are more than a rounding error at the moment, but if pushing the limits of responsive design is the kind of thing that gets you out of bed in the morning, the Apple Watch gives you a concrete reason to do so. To wit:

⌚️🕸🤘