<img height="1" width="1" src="https://www.facebook.com/tr?id=1272750026111903&amp;ev=PageView &amp;noscript=1">

Webutvikling for smartklokker, hva må du tenke på?

Øystein Rose

Øystein Rose | 30. oktober 2018

Jeg er veldig glad i min Apple Watch. Etter at den ble anskaffet, bruker jeg mindre tid på telefonen på kveldstid hjemme med familien. Samtidig er jeg like tilgjengelig som før. Dersom mobiltelefonen ligger på kommoden i gangen og kona ringer, har jeg altså ingen unnskyldning og anropet må pent besvares. Kalenderen min, SMS-er, todo-lister og e-poster kan jeg også jobbe med. Inntil ganske nylig var det kun mulig å lese tekstversjonen av en e-post, og ønsket man å klikke på en lenke, måtte man fortsette på mobiltelefonen.

Gleden var derfor stor da watchOS5 ble rullet ut samtidig med Apple Watch 4. Den nye klokken har fått en del oppmerksomhet, og det meste av praten har handlet om ny EKG-måler, bedre skjerm og ytelse. Noe som har gått under radaren for de fleste, er at med watchOS5 kom det også med en velfungerende e-post og nettleser.

WebKit-versjonen som kommer med watchOS 5 har følgende highlights:

  • Nedstrippet versjon av WebKit med tanke på ytelse (web fonts, videoavspilling og Service Workers er fjernet)
  • Nettleseren støtter responsivt design med device width på 320px (en sannhet med modifikasjoner)
  • Skjemaer fungerer brillefint med kontroller som datovelger, dropdowns og diverse tekstinput-felter.
  • Reader Mode kjent fra Safari på iOS og Mac sørger for god lesbarhet på artikler

Dette høres jo veldig spennende ut, men da må jeg kanskje gjøre en mengde tilpasninger på mitt nettsted for brukeropplevelsen skal bli optimal? Nei. Dersom du har et nettsted som er designet “mobile first” og i tillegg er universelt tformet, så er veldig mye gjort. La oss likevel dykke litt ned i detaljene.

Web fonts

Som nevnt tidligere er det ikke støtte for web fonts i watchOS 5. Konsekvensen er at all tekst vises med den samme fonten. Akkurat det er ingen krise. Litt verre er det kanskje at dersom du har brukt web fonts til å vise ikoner, så vil ikke disse bli vist i det hele tatt på Apple Watch. Nå har du enda en grunn til å bytte ut de gamle ikonene dine med SVG-ikoner. I tillegg kan vi nevne andre gode grunner:

Layout

Dersom du tidligere har sørget for at nettsiden din ser bra ut for skjermer med bredde på 320px, så vil den også vises fint på Apple Watch. Dimensjonene er noe mindre enn 320px, noe som fører til at tekst og bilder blir skalert ned. Bortsett dette vil layouten på nettsiden være intakt.

Device width for Apple Watch

Et av de gamle triksene for å designe mobilvennlige nettsider er å legge følgende <meta>-tag i HTML-koden:

<meta name=”viewport” content=”width=device-width, initial-scale=1">

Tagen over blir ignorert av WebKit. Nettleseren sier at device width er 320px og innholdet blir så skalert ned. Denne oppførselen kan du imidlertid overstyre ved å legge til en meta-tag til, nemlig:

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

Denne meta-tagen slår av "shrink to fit" og viser innholdet i henhold til Apple Watch sin egentlige device width.

Har du tenkt "mobile first" når du har designet siden din, vil du allerede være et veldig godt stykke på vei mot en bra brukeropplevelse også på Apple Watch.

Forms og input fra bruker

WatchOS 5 støtter også et rikt utvalg av input typer, slik som datovelgere og nedtrekkslister i tillegg til tekstinput-felter i forskjellige former. Alle input-felter vises i fullskjerm, og derfor er det veldig viktig at du "labler" kontrollene riktig ved å bruke <label> og/eller aria-attributtet aria-label. Labelen brukes som overskrift i fullskjermsvisningen for å gi brukeren nødvendig kontekst slik at man alltid vet hvilket felt man fyller ut.

Dette er jo allerede en velkjent praksis ved utforming av skjemaer. For eksempel er det et krav at man må gjøre det med tanke på universell utforming. Har du allerede gjort jobben din her, er det gode muligheter for at kontaktskjemaet på nettsiden din vil fremstå ganske delikat og brukervennlig også på Apple Watch!

Reader Mode og Microdata

Webkit Reader Mode, også kjent fra Safari på iOS og Mac, blir automatisk aktivert på sider som inneholder en <article>-tag. I denne modusen blir CSS-en erstattet med nettleserens egen stil.

Mikrodata er semantisk data som legges inn som attributter i HTML-koden. Andre teknologier som søkemotorer, bots, nettlesere og apper kan trekke ut og forstå Microdata, og bruker dette til å forbedre brukeropplevelsen. På Schema.org finner du en samling av forskjellige typer og attributter.

Å skitne til HTML-koden med Mikrodata får det kanskje til å gå kaldt nedover ryggen din. Vokabularet som er bygget opp på Schema.org kan også brukes med andre formater som RDFa og JSON-LD. Google anbefaler sistnevnte framfor Microdata ettersom JSON-LD-data enkelt kan separeres fra innholdet.

For best mulig resultat på Apple Watch bygger du opp siden slik:

Code

Dette er en enkel og semantisk bygget HTML-side med det viktigste innholdet plassert inni en <article>-tag. Legg også merke til bruk av itemprop-attributtene. Attributtene som er brukt i eksemplet styles automatisk av WebKit for å fremheve titler og andre metadata om artikkelen.

Fremtiden er vanskelig å spå -  følg derfor standarder

De nevnte sjekkpunktene for Apple Watch-vennlige nettsider, viser at så lenge man følger anbefalinger og "best practices", så vil vi ikke bare skape en bedre brukeropplevelse for alle, men man være bedre rustet for fremtiden.

Det som er sikkert med fremtiden på Web er at man aldri vet hva slags formfaktor den neste nye dingsen har. Lær deg derfor de verktøyene og standardene som allerede finnes.

Brukeren i den andre enden bruker, på verdensbasis, sannsynligvis en mobiltelefon når artikkelen din blir lest. At Apple Watch nå kommer med en fullt funksjonell nettleser, gjør at jeg garantert kommer til å lese mer e-post og sikkert noen artikler på telefonen. Jeg har ikke tro på en revolusjon, og jeg tror ikke at klokker kommer til å stjele altfor mye tid fra mobiltelefonen. Likevel merker jeg at jeg allerede nå sjekker først klokka når det plinger inn en ny e-post. Kommer denne bruken til å øke med oppgradert watchOS? Definitivt.

 

Ønsker du å være med å utvikle fremtids-Norge? Se våre ledige stillinger

Del på sosiale medier: