Designing Web Content for watchOS
Designing Web Content for watchOS
WWDC 2018
![](https://cdn-images-1.medium.com/max/800/1*LrwjnBnT61hwqLpR-lxOQw.gif)
Links
![](https://cdn-images-1.medium.com/max/800/1*h-bo4n-s1YFfVRSFit1H6g.gif)
Scrolling
- Digital Crown
- Pan gestures
![](https://cdn-images-1.medium.com/max/800/1*UrUgLfdRwiw7XfpzuIqwCw.gif)
Double tap to Zoom
![](https://cdn-images-1.medium.com/max/800/1*c4qWSo-yRW31wch4GUzVEw.gif)
Back / forward
- Firm press
- Edge swipe
![](https://cdn-images-1.medium.com/max/800/1*HCLRkiJVUriuO1vjQvKuCw.gif)
How It Works
initial-scale
is overridden- Viewport dimensions: 320 by 357
- Width for media queries: 320
- Avoids horizontal scrolling
![](https://cdn-images-1.medium.com/max/800/1*hASLj5VDv9hr6yjHo5uLTg.png)
Optimizing Layout
![](https://cdn-images-1.medium.com/max/800/1*-hG6HFR8imCFHGUi_wW3Bg.png)
![](https://cdn-images-1.medium.com/max/800/1*IqhOcqt02WYRAVo7krpqIA.png)
Form Controls
![](https://cdn-images-1.medium.com/max/800/1*FU1KFDzYkJTYP4bOyzRkOw.png)
![](https://cdn-images-1.medium.com/max/800/1*-SrCM_p670qn5HF50Oh2ng.gif)
Safari Reader
![](https://cdn-images-1.medium.com/max/800/1*hbsKI9eOdQ_er1EcMvGl3Q.png)
![](https://cdn-images-1.medium.com/max/800/1*gb_371v5ml6qvXGo5hCvMg.png)
![](https://cdn-images-1.medium.com/max/800/1*gkJLUuC8M0q0YtMw0eKPFg.png)
![](https://cdn-images-1.medium.com/max/800/1*LWNrCSazB20K-XGAd9zaRg.png)
![](https://cdn-images-1.medium.com/max/800/1*fmirqVYM5rKmR__JETAz7g.png)
![](https://cdn-images-1.medium.com/max/800/1*fTeWKGhtC7EoATBpJEQHpA.png)
![](https://cdn-images-1.medium.com/max/800/1*ZVMxijhrr1Cq65zyOZKaaA.png)