WebKit op WatchOS: surfen we binnenkort op onze Apple Watch?

28 juni 2018 Inzichten / WebKit op WatchOS

Surfen op je Apple Watch? Binnenkort kan het wellicht. Op haar halfjaarlijkse developer conference WWDC18 heeft Apple aangekondigd dat het haar browser framework ‘WebKit’ ook beschikbaar maakt voor Apple Watches. Maar is dit nu handig of niet? En waar moeten we als designer zoal rekening mee houden? Enkele praktische tips om dit te implementeren. 

Internet op je Apple Watch

Voorlopig kun je nog geen web content browsen op je Apple Watch, maar via bluetooth verbinding met je iPhone kan jouw Watch wel informatie van het web ophalen. Siri, Mail, Maps, Weather en de meeste third-party apps maken momenteel daar al gebruik van. Vanaf versie 5 van WatchOS zullen app-ontwikkelaars nu browserfunctionaliteiten kunnen implementeren in hun apps. Dit kan bijvoorbeeld handig als een vriend je een restauranttip doorstuurt via Messenger.

Designen voor Apple Watch

Maar comfortabel web content consumeren op een schermpje zo groot als een postzegel, vraagt natuurlijk wel een aantal inspanningen van webbouwers. De Apple Watch bestaat op dit moment in twee uitvoeringen, een van 38mm (272 x 340 pixels) en een van 42mm (312 x 390 pixels). Dat is een pak kleiner dan de kleinste smartphones, waar de schermbreedte 320 pixels is.

Standaard optimalisatie
Als je als designer niets doet om zelf de web content te optimaliseren voor WatchOS, zal het toestel de responsive sites zelf proberen aan te passen aan de kleinere scherm dimensies. Het neemt daarvoor de lay-out van de webpagina op een breedte van 320 pixels als basis. Plaats je je content op een scherm met een breedte van 320 pixels in twee kolommen, dan zal de content op de Apple Watch ook in twee kolommen staan. Het toestel zal ook dimensies als 320 x 357 pixels rapporteren, eerder dan de echte scherm dimensies.

Lay-out optimalisatie

Zelf de lay-out optimaliseren

Maar je kunt als designer ook zelf aangeven hoe je je content wil doen verschijnen, met nog maar eens een meta tag:

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

Met deze tag geef je aan de Watch mee dat het de content niet volgens het standaardprincipe moet aanpassen, maar moet weergeven zoals dat in de CSS gedefinieerd werd. Als je dus een media query hebt met een minimumbreedte van 320 pixels, dan zal de Watch die niet gebruiken omdat het scherm smaller is.

Als je deze meta tag gebruikt, zullen ook de echte scherm dimensies van de Watch gerapporteerd worden.

 

Waar de gebruiker vandaag nog een applicatie moet installeren, kan die in de toekomst gewoon een aangepaste website openen. Voor voorspelbare acties of hapklare content zeker een plus.

Wat met standaard website features?

Bepaalde standaard web features zoals video playback, horizontal scrolling en service workers zullen voorlopig nog niet beschikbaar zijn. Dit geldt ook voor web fonts, wat een grote impact zal hebben op het design. Het wordt dus nog belangrijker dan ooit om een goede fallback font te voorzien.

Formulieren

Formulieren zullen daarentegen wél werken op de Apple Watch. Als je op een formulierveld tapt, zul je in full screen het inputscherm te zien krijgen. De input mogelijkheden die de gebruiker dan te zien krijgt hangen af van het ‘input type’ dat de ontwikkelaar heeft meegegeven aan dat veld, zoals ‘tel’ en ‘date’. Dat input type komt dan als titel boven het inputscherm te staan. De juiste label markup voor formuliervelden zal dus nog belangrijker worden dan dat nu al het geval is.

Input mogelijkheden formulieren

Reader mode

Op text-heavy pagina’s zal de WebKit automatisch de ‘reader mode’ activeren, zoals die ook bestaat in Safari op desktop en mobile. Op basis van de mark-up die je als designer meegeeft, vereenvoudigt WebKit de lay-out zodat de pagina makkelijker leest. Plaats de content dus in een 'article' tag en geef verder hints aan reader mode door itemprop attributen te gebruiken die content aangeven als ‘titel’, ‘auteur’, etc.

Responsive websites die ook geoptimaliseerd zijn voor Apple Watch zijn dus waarschijnlijk nog niet meteen voor morgen. Maar dat betekent niet dat we ons als designer niet kunnen voorbereiden op toekomstige watch-surfers.

Meteen aan de slag?

Moeten we dan binnenkort niet alleen responsive designen voor desktop, tablet en mobiel, maar ook voor watches? Het valt nog af te wachten of het zo’n vaart zal lopen. De meeste Apple Watches kunnen nog niet rechtstreeks connecteren met een mobiel netwerk. Als gebruiker moet je voorlopig nog steeds je iPhone op zak hebben.

Als mobiel internet op Apple Watch ingeburgerd raakt, wordt de introductie van WebKit op WatchOS wellicht wel interessant. In plaats van apps via de app store aan te bieden, zouden ontwikkelaars web apps kunnen ontwerpen die gebruikers kunnen opslaan op hun home screen. Dat kan bijvoorbeeld handig zijn als je tijdens het sporten een aangepast trainingsschema op je Watch wil volgen, tijdens een citytrip snel een restaurantje in de buurt wil selecteren, of snel de laatste nieuwsupdates wil doornemen tijdens het wachten aan de kassa. De toegangsdrempel tot die informatie wordt zo voor de gebruiker een pak lager. Waar die vandaag nog een applicatie moet installeren, kan die in de toekomst gewoon een aangepaste website openen. Voor voorspelbare acties of hapklare content zeker een plus (zoals wanneer de bus langskomt aan de halte waar jij je nu bevindt). Voor complexere handelingen of belangrijke beslissingen wordt het wellicht nog niet meteen het voornaamste platform bij gebruikers.

Het blijft echter niet evident om een aangename en unieke user experience te creëren die volledig aanpasbaar is aan alle schermen. Het laat weinig ruimte voor creativiteit als je rekening moet houden met de beperkingen van elk device en als je enkel content kan selecteren die er even goed zal uitzien op een scherm van 1200 pixels als op eentje van 272 pixels.

Responsive websites die ook geoptimaliseerd zijn voor Apple Watch zijn dus waarschijnlijk nog niet meteen voor morgen. Maar dat betekent niet dat we ons als designer niet kunnen voorbereiden op toekomstige watch-surfers. Een site die goed geoptimaliseerd is voor de kleinste smartphones zal er ook op Apple Watch al heel goed uitzien. Dat kunnen we doen door bijvoorbeeld zorgvuldige mark-up te gebruiken en de content goed leesbaar te plaatsen op het kleinste smartphone scherm. Dit wordt ongetwijfeld nog vervolgd.

Wijs inschakelen voor jouw webproject?

Ons UX-team staat klaar

Olga Maertens
UX Architect

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!