A few weeks ago, someone posted a video of an Apple Watch running a web browser. This got me thinking… is it time to design websites that also work on wristwatches? Would a web page even be legible at such a small size? Out of curiosity, I created a mockup to see what my website might look like on Apple Watch, and was surprised.
Designing Websites for Apple Watch
To be clear, there is no publicly available web browser for Apple Watch that I’m aware of— however, someone using the alias “comex” recently demoed one after hacking the watch’s operating system. Until I saw it in action, it never occurred to me that I may need to design websites that work on wristwatches some day. In fact, since I began designing/developing responsive (i.e., mobile-friendly) websites by default a few years ago, I assumed that Apple’s first iPhone was among the smallest viewports (display areas) I’d have to worry about.
Could it be that Apple is working on a version of Safari for Apple Watch? I wouldn’t be surprised at all. As you’re about to see, viewing a modified version of your website is feasible with some planning.
Most web designers/developers like myself are already laying the groundwork when we create responsive websites. This just means that the range of viewport sizes we’re targeting is about to become even more extreme.
Today, most clients and designers are primarily focused on the desktop experience. However, in general, our priorities are in the midst of a major shift, as the number of mobile users accessing the Internet begins to exceed the number of desktop users.
What Websites May Look Like on Apple Watch
Remember— there is no official web browser for Apple Watch yet, so, I’ve created a simulation using a portion of my website to compare the differences between:
- Apple iPhone 5s;
- Apple Watch (42mm); and
- Apple Watch (38mm).
On the iPhone, the text is fairly easy to read— this is what my website actually looks like. If viewing this same section on the 42mm Apple Watch, the line-spacing would need to be tightened up. On the 38mm version, the same applies, however, making the text smaller as a whole, would also improve the experience.
Keep in mind too, that the screen resolution of these devices is very sharp… unlike what you’re probably seeing right now. In other words, smaller text is easier to read relative to a standard (72ppi) computer screen. Images on the other hand, would need to be dramatically simplified and used sparingly. If it doesn’t look good on a postage stamp, it won’t look good on your wrist either.
The point is, many of the techniques we use to create responsive/mobile-friendly websites, can also be applied to watches. We can modify font attributes; display relevant and more concise content; deliver optimized images; and more— all relative to the viewport size of the device we’re using.