watchOS, the wrist and the web for smaller screens

I was recently wondering what the web capabilities of Apple watchOS are. Here are my observations while using a Watch Series 5 with watchOS 6, both released in 2019:

• There’s no browser app. The only ways to consume web content are by hitting a link from Mail or Messages, or by asking Siri to go to a URL. These actions open the WebKit view (Safari 13). Like on other Apple devices, Messages uses the Open Graph spec to replace URL’s by more readable links.

• Page loading duration ranges from a few seconds to more than a minute. It’s hard to predict why as it doesn’t seem linked to the JavaScript weight or to the amount of pictures.
• Once loaded, it’s okay-ish to browse a document. It just works and supports a wide range of browsers features (including Grid Layout).
• Voice control really helps to input text data, otherwise you’re left drawing letters one by one, which is the last resort fallback.

• Holding an arm in front of the eyes and using the other one to browse the web prevents the overall experience to be enjoyable, reminding that watches are good for passive features, short actions and notifications.

And that’s exactly why the Apple Watch is a great device: most apps narrow their scope, putting emphasis on small interactions, and they do it well. Keeping these principles with the web, Apple is just redirecting users to devices where the experience is better (and where the battery lasts longer).

I think keeping the same focus is the way to go while supporting very small viewports on the web. Taking a developer personal website as example, you could limit what’s displayed on such a small screen to the minimal contact informations, a bit like a business card: the name, a small picture or logo and a few contact links (<a href="mailto:…">, <a href="tel:…">). If these informations are already part of your website footer, you’re probably only a few media queries away from a decent result.

When it comes to web development, watchOS requires you to be aware of some specificities, across these four topics: missing features, viewport size, forms and reader mode.

The only official piece of information about web content on watchOS, well hidden in the middle of nowhere, is a WWDC2018 video about preparing web content for watchOS 5 by Apple’s developer Wenson Hsieh. Luckily it’s a great one!

We’ll go through the specific things and then see what it could mean to support smaller viewports in general. Spoiler alert: as often, betting on the fundamentals (semantic HTML, progressive enhancement) wins.

1. Disabled features

On watchOS, there’s no support for:

• video playback on the web, but native apps can have it;
• Service Workers;
• web fonts: watchOS uses San Fransisco Compact, which is optimized for legibility on small sizes. A great decision.

A great use case for Service Workers on a watch could be Push Notifications (they require a Service Worker), but they are currently only available in Chrome, so it’s no big deal for now to not have Service Workers on watchOS.

2. The <meta name="viewport">

Apple is helping CSS authors by:

• setting on all Watch models the same viewport, 320*357, matching the width of the iPhone SE;
• overriding initial-scale to 0.49;
• forcing shrink-to-fit to yes (shrink-to-fit=yes) in order to avoid horizontal scrolling.

In other words: the layout of your website stays the same as on the smallest phones and fits the Watch screen without the need to unzoom.

Flexibility is also given as these viewport adaptations can be disabled with (non-standard) <meta name="disabled-adaptations" content="watch">: the viewport then ranges from 272*340 (38 mm Watch) to 368*448 (44 mm) and isn’t automatically shrunk to the viewport anymore, opening the road to custom styles for viewports smaller than 320px.

This meta is also important to fine-tune websites using responsive images: Eric Portis recommends to disable watchOS viewport adaptations because of the returned DPR (device pixel ratio) being too high, resulting in wasted bandwidth (and thus battery consumption).

3. Forms

Accessibility

Filling a form opens a full screen panel, so arial-label is needed to provide label hints while filling a field.

Of course, don’t forget the <label> tag:

<label for="billing-email">
    The email address where invoices will be sent
    <input type="email" id="billing-email" aria-label="Billing email">
</label>

Fields

<select> and the following <input> types all comes with a dedicated keyboard layout: password, numeric, tel, date, time.

4. Reading articles

Heavy text pages automatically enable the reader mode. Like every reader mode, it relies on proper HTML markup: article, figure, figcaption, blockquote…

Unexpectedly, microdata are used to introduce the article metadata in the reader mode. This is awesome!

Dealing with small viewports in general

A few months ago, I started to shape what supporting smaller viewports could be like. Aside from an Apple Watch, there are at least two three other use cases for ~150 px wide viewports:

• desktop installed PWA;
• smartphones split views;
• Firefox macOS allowing to resize the window as low as 450 px by 63 px.

Usually I move a lot of CSS inside @media (min-width: 20em) (20em is generally 320px). Some rules of thumb for smaller viewports:

• every CSS rule changing an element position, size, flow or horizontal spacing should be in this min-width media query;
• same for decorative assets like background-image;
• make sure font-size stays small;
• avoid running JavaScript if your app can work without it.

We’re left with a usable HTML document with a basic sense of identity powered by some decoration rules (colours, opacity…).

Here’s a basic example where two elements in the header stack in one column when the viewport is too small, along with background-image removal.

The only CSS changes consist of moving some CSS declarations into a @media rule:

html {
  font-size: 50%;

  @media (min-width: 20em) {
    font-size: 62.5%;
  }
}

.header {
  font-size: 1.2rem;

  @media (min-width: 20em) {
    display: flex;
    justify-content: space-between;

    background: url('bg.png') no-repeat center / 100% auto;
  }
}

Did you know a desktop installed web app can be resized down to 207×117 on macOS? Here’s Can I Stop installed on macOS, with a viewport width below 320 px:

And here is Burokku width a viewport of 371×1 (well, actually 0.77px according to Edge developer tools) on Windows 10 (video):

Finally, big shoutout to Apple’s developers videos website, which contains downloadable videos, high-definition slides (the pictures of this article are mostly from the slides), and a super cool transcription system with links to navigate the video. Worth trying and browsing!