DEV Community

Cover image for watchOS, the wrist and the web for smaller screens
Mehdi M.
Mehdi M.

Posted on • Updated on

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.

Open Graph in action in Messages on watchOS.

  • 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

  • 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:

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.

shrink-to-fit applied to the viewport on watchOS

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

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.

Accessible form field on watchOS

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>
Enter fullscreen mode Exit fullscreen mode

Fields

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

Tel, date and select fields on watchOS

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

Unexpectedly, microdata 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

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 other use cases for ~150 px wide viewports: desktop installed PWA and smartphones split views.

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

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Did you know a desktop installed web app can be resized down to 207*117 on macOS and 201*0 (yes, zero!) on Windows 10? Here’s Can I Stop installed on macOS, with a viewport width below 320 px:

Can I Stop as an installed desktop app

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!

Discussion (1)

Collapse
johnnyxbell profile image
Johnny Bell

Wow I’ve never thought about this. Great article!