watchOS, the wrist and the web for smaller screens
Tags: watchos, html, css, frontend
Published: 2019-10-27 02:14:49

---
title: watchOS, the wrist and the web for smaller screens
published: true
description: An overview of watchOS web capabilities – Small quick changes to fit small viewports.
tags: watchos, html, css, frontend
---

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](https://www.apple.com/watchos/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](https://ogp.me) spec to replace URL’s by more readable links.

![Open Graph in action in Messages on watchOS.](https://thepracticaldev.s3.amazonaws.com/i/f7ffch2ajwxhcszy67ec.jpg)

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

![Drawing letters to write on watchOS](https://thepracticaldev.s3.amazonaws.com/i/t0qtha25inppg94gz0bs.jpg)

- 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](https://developer.apple.com/videos/play/wwdc2018/239) by Apple’s developer [Wenson Hsieh](https://twitter.com/wensonhsieh). 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](https://developer.apple.com/design/human-interface-guidelines/watchos/user-interaction/audio-and-video/);
- Service Workers;
- web fonts: watchOS uses [San Fransisco Compact](https://developer.apple.com/design/human-interface-guidelines/watchos/visual-design/typography), 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">`](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

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`](https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html) 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.

![shrink-to-fit applied to the viewport on watchOS](https://thepracticaldev.s3.amazonaws.com/i/6c70jnnu4tcbv5bsvx8m.jpg)

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

![<meta name="disabled-adaptations" content="watch"> combined with @media (min-width) on watchOS](https://thepracticaldev.s3.amazonaws.com/i/1yt4ikyruremlnngfuul.jpg)

This _meta_ is also important to fine-tune websites using responsive images: [Eric Portis recommends to disable watchOS viewport adaptations](https://ericportis.com/posts/2018/respimg-apple-watch) 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.

![Accessible form field on watchOS]
(https://thepracticaldev.s3.amazonaws.com/i/k2mssi88km94f9fishxd.jpg)

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

```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#<input>_types) all comes with a dedicated keyboard layout: `password`, `numeric`, `tel`, `date`, `time`.

![Tel, date and select fields on watchOS](https://thepracticaldev.s3.amazonaws.com/i/7g5kc4d1zom3av2326ho.jpg)

## 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`…

![<figure><img src="…" alt="…"><figcaption>Picture description shown below the picture</figcaption></figure](https://thepracticaldev.s3.amazonaws.com/i/stmnlom5zwbayd9wx7z3.jpg)

Unexpectedly, [microdata](https://schema.org) are used to introduce the article metadata in the reader mode. This is awesome!

![Microdata used to introduce an article in the watchOS reader mode](https://thepracticaldev.s3.amazonaws.com/i/drlufq75orkvlvfmbn87.jpg)

## 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](https://m.nintendojo.fr/@meduz/109641994342740113).

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.

![Putting everything on a single column for viewports smaller than 320px wide](https://thepracticaldev.s3.amazonaws.com/i/bnazvycvrbo0x8x3qjm3.jpg)

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

```scss
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](https://canistop.net) installed on macOS, with a viewport width below 320 px:

![Can I Stop as an installed desktop app on macOS](https://thepracticaldev.s3.amazonaws.com/i/6jsqdom7iemh7bhd23xj.jpg)

And here is [Burokku](https://block.sunappu.net) width a viewport of 371×1 (well, actually 0.77px according to Edge developer tools) on Windows 10 ([video](https://m.nintendojo.fr/@meduz/110000122113450691)):

![Burokku as an installed desktop app on Windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0cryhnqwoam6ukbo1a4.jpg)

Finally, big shoutout to [Apple’s developers videos website](https://developer.apple.com/videos/play/wwdc2018/239/?time=62), 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!