Designing Web Apps for the Apple Watch.

Designing Web Apps for the Apple Watch.

  • toucaan
  • 7 minutes
  • January 15, 2020

Toucaan is in a state of great flux.

This is the fourth article on my series on Toucaan CSS–a mutative design framework for intrinsically designed web applications. I hope you will find it useful and help you create beautiful web apps for the newest surface on the web-the Apple Watch.

A Quick Recap

In the first article, we introduced the Toucaan Switch Media Query (TSMQ) that allows us to isolate web design according to device orientation. The test of orientation is only the first level of ‘environment determination’ for our design to happen in. Knowing the orientation beforehand helps us choose the right layout model for each state of the initial render deterministically.

In the second article we went on to develop a fundamentally new kind of baseline reset and introduced blockscoped typography for intrinsic web design. Intrinsic web design is quite different from responsive web design but we will get into that in a later post.

I recommend reading both of the articles linked above before getting on with this one.

Going “Smartwatch First” instead of “Mobile First.”

Chances are that your existing web app or website is mobile-friendly and responsive already. Great news! Apple will render it correctly on the Apple Watch by scaling it down by factor of 0.49 to avoid the horizontal scroll. Apple does this to fit your mobile content into the new form factor. While it works for the most part, but frankly, even a mobile UI can be way too complicated on the watch. The physical size of the device is is only about an inch and it’d be so much better to give watch (WebKit/Safari) users a better experience instead.

An interface that belongs to the watch, _intrinisically._

In this chapter, we will take a look at how we can use the Toucaan Switch Media Query or TSMQ to organize our CSS and design a practical and accessible webpage for the Apple Watch Series 5. We can then go upwards on our UI from there i.e. develop designs for mobile, tablets, desktop and TVs etc., in that order separately.

First off, here is what the Toucaan Switch Media Query or TSMQ looks like:

/* Portrait ⇋ landscape Toucaan Switch Media Query. */

@import url('path/to/css/app/portrait/portrait.css') only screen and (orientation: portrait);

@import url('path/to/css/app/landscape/landscape.css') only screen and (orientation: landscape);


@media only screen and (orientation: portrait) {
    :root {
        --bu: calc(100vw/100); /* Base Unit (bu) for the device. */
    }
}

@media only screen and (orientation: landscape) {
    :root {
        --bu: calc(100vh/100);
    }
}

/* Other resets and variables go below */


On the code above, two external css files (portrait.css or landscape.css) are imported via a switch statement but only one of those two files is fetched for our app according to the orientation of the browser. If a user opens the website on their watch or smartphone they get only the portrait.css portion of our “app layout.” Similarly, if the user opens the site on their desktop, they get only the landscape portion of the application layout. The amount of css that is delivered to the client is always relevant to the context of the browser window.

Notice that we are using a standard asynchronous @import call to request css and not scss!

Since the landscape mode is always orthogonal to portrait, there is no reason for our app to serve 2X amount of code on every device and client on the web. Again, since WebKit (Safari) on Apple Watch Series 5 renders pages in portrait mode only, we will write all our css code on portrait.css only. We don’t have to worry about how the site will appear or behave on other clients with larger screens or higher resolution or in the landscape mode.

/* vi path/to/css/app/portrait/portrait.css */

/* Notice the use of `in` (inches) on the media-query below.
We don't use pixels because the physical size of the watch is 
too small for pixels to scale correctly. Hardcoding pixel
values on a @media-query breakpoint is somewhat an antipattern 
for the Apple Watch and must be avoided. */ 

/* Read more at https://bubblin.io/blog/toucaan-introduction */

@media only screen and (max-width: 2in) {
  body{
    /*  All the style for smart watch or really
      	tiny mobile screens goes in here. */
  }
}

@media only screen and (min-width: 2.000000000001in) and (max-width: 4in) {
  body{
    /* Smartphones and phablets in portrait mode.*/
  }
}

@media only screen and (min-width: 4.000000000001in) and (max-width: 8in) {
  body{
    /* Tablets and pro tablets in portrait mode.*/
  }
}

/* and so on…*/

Portrait.css is that kitchen sink file on which we can scale up our application UI from WatchOS to WebOS and everything-in-between in portrait mode specifically. The size and type of screen is targeted using physical inches of available real estate and matched to the usecase, segment or audience. It is a good way to encapsulate away the only so much css that is required on a particular class of devices.

Let’s do the first encapsulation for WatchOS next.

A micro-optimization for the Apple Watch.

In my opinion Toucaan’s SMQ is a very clean and modular approach to organize all of the application CSS. It doesn’t restrict us to follow design patterns from 10 years ago when the web was a very different place and yet it makes it possible to use what is best for our app. Therefore, a mutative CSS framework.

In many ways TSMQ is like the ‘microservices manager’ for CSS that serves layouts for specific viewports according to orientation, physical size, space and resolution of the user’s device, i.e. the rendering environment.

Since I like to keep all my environment specific styles at one place, we will create watch.css to put all our styles specific to the watch. And import it into portrait.css like so:

/* vi path/to/css/app/portrait/portrait.css */

/*  All watch specific styles goes inside watch.css. */
@import url('path/to/css/app/portrait/watch.css') only screen and (max-width: 2in);

@media only screen and (min-width: 2.000000000001in) and (max-width: 4in) {
  body{
    /* Smartphones and phablets in portrait mode.*/
  }
}

@media only screen and (min-width: 4.000000000001in) and (max-width: 8in) {
  body{
    /* Tablets and desktops in portrait mode…*/
  }
}
/* and so on… */

A few Tips & Caveats about Designing for the Apple Watch.

There are quite a few important things to note about designing for the tiniest formfactor on the web.

1. Extreme minimalism:

The first thing to internalize about designing webpages (or apps) for an Apple Watch is that it is the tiniest screen connected to the web with a decent browser (WebKit). Even though the resolution of the Apple Watch is similar to that of a mobile in absolute pixels, a petite Apple Watch for women for example, is only a 40mm in size. Roughly, 1.57 inches along the diagonal.

Therefore, exercise extreme minimalism while designing for the watch. More generally,

  • Avoid displaying too much information onscreen at once.
  • Create visual groupings to help users find the information they want.
  • Use the full width of the screen.
  • Use a menu with circular tips to replace buttons where possible.
  • Avoid use of side-by-side controls on your interface.
  • If text-heavy, left align the content and HTML elements.

2. Portrait mode only

The Apple Watch display lights up only in portrait mode but this could change in the future and the watch might start displaying content in landscape mode as well. This is not a problem because we have the TSMQ to handle such a scenario easily.

Our Toucaan’s Switch Media Query is futureproof, yay!


Viewport dimensions of Apple Watch 5
The real estate on an Apple Watch in portrait orientation.


3. Pixels no longer scale.

Resolution on a petite Apple Watch is 324 x 394 pixels. It is about the same resolution as that of the first generation iPhones but do not be mistaken. Using pixels the old fashioned way to scale up on an Apple Watch will not give the best or most ideal results.

If not executed carefully, almost all of your UI would suffer with a “fat finger inaccessibility”. We cannot ignore the fact that the viewable area on a watch is only about 1.18 x 1.25 inches, and, pixels based UI does not scale properly at that level.

Actually, the “light up” area on an Apple Watch is even smaller than 34mm by 40mm due to rounded corners on the Apple Watch Series 5 and because it is easy for content to be obscured by the viewing distance and viewing angle.

4. Short viewing distance, shorter attention span.

The viewing distance on an Apple Watch is approximately 7 to 12 inches from the face, depending on user preferences. As opposed to that a smartphone is normally viewed at over a feet and a half away.


Viewing distance of Apple Watch
Viewing distance of an Apple Watch.


In general you want to optimize for shorter viewing distance and short attention span both. Use large font size to present minimum set of functionality to the user. Allow the user to be able to pinchzoom if your page is text heavy, even with decently sized typography.

5. No web fonts

Avoid using Google Fonts or any type of hosted typography.

Toucaan recommends use of system fonts for most web applications. On the Apple Watch this tip becomes rather mandatory.

/* Use system fonts. */
body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif!important;
}

Interestingly, Apple recommends using relative sizing and dynamic type to ensure that items expand or contract naturally to fit the available space. This is great because we do just that with blockscoped typography on Toucaan!

6. Add the WatchOS Meta Tag

To take control of how your website will appear on the Apple Watch, add the following meta tag on the head of your page:

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

WebKit will now know that it doesn’t need to scale down your content and will render the page according to how you instruct it to.

In general Apple recommends to show the same content as on your mobile, regardless of the display size–which is exactly how mobile web was scaled initially, before concept of responsive web design came into being. This will work mostly, but it is far from ideal because even mobile UI can be fairly complicated on the watch.

Unless your app has been designed specifically for the watch, Apple will automatically scale down your mobile layout by factor of 0.49 to fit the content as is without a horizontal scroll or reflow.

7. No service workers

No PWA, so no ‘offline-first’ enhancement on the Apple Watch, yet. In fact you might want to try and keep your javascript to minimum as well. I have started avoiding React & Vuejs ecosystems completely to reduce the javascript pollution on my web apps lately. But there is some good news as well.

Apple mentions on their WatchOS documentation that webkit “doesn’t support service workers at this time.” This could mean that the watch might support offline first web apps at a later date. Fingers crossed, but for now there is no possibility for progressive enhancement using a service worker on the series 5 Apple Watch.

8. No inline video playback

There is no video support on the Apple watch at this time.

9. Handling images

Use a single autoscaling image through 100% of the screen width. Multiple versions of the same image will require more space and is generally not recommended on the watch.

<img src="resource_url"	width="100%" style="max-width:100%;" />

10. Form handling and acessibility

Unless absolutely necessary, avoid form submissions over the watch interface. But if you have to, know that some form elements have been optimised for the watch and it relies on you using the new specific kinds of form type controls to take advantage of these fields.

The Apple Watch supports number (type=”tel”), date (type=”date”), and select (

As expected from the tiny formfactor of the watch, the form controls move you into fullscreen mode for each input. This means that it is important to label your form elements correctly and have the appropriate ARIA roles attached to the fields so that users know what they’re doing while filling up the form.

Use a menu in place of buttons when appropriate. Menus offer a dedicated place to list actions and you can free up space on your UI by removing buttons and replacing those with menus. Opt for extreme minimalism in most situations.

Conclusion

Now that you understand the Apple Watch better, you can design a better looking page for your users on Apple Watch. Go for it, because with that extra mile and a cool design that belongs to watch naturally, your users will only thank you for it!


Written by: Marvin Danig, CEO & Cofounder of Bubblin Superbooks–The Binge Reader for the web. Follow me on Twitter or on Github perhaps?

Credits: Super thankful to the awesome Somya for helping me on the artwork on viewing distance from the watch.

About the author

Marvin Danig

I write code with my bare hands. 💪🏻 Yammer about Bubblin all day.

https://bubblin.io/marvin