Funker nettsidene på iPad?

Jon Olav Eikenes

Funker nettsidene på iPad?

Digitale tjenester Ingen kommentarer

Når kunder kommer til Halogen og skal utvikle nye nettsider ber de gjerne om at disse også skal fungere på iPad og andre nettbrett. Det høres kanskje ikke ut som noen stor utfordring, men i realiteten krever det at du tenker nøye gjennom hvordan nettsidene skal se ut og fungere. Hvilke utfordringer får du når du designer nettsider som skal fungere godt på et nettbrett?

Design for touch

På nettbrett bruker du berøringsskjerm for å interagere og navigere på nettsider. Det er den mest åpenbare forskjellen fra tradisjonell nettleser med mus/tastatur. Vi har tidligere skrevet om hvordan man kan designe vellykkede touch-grensesnitt. Når det gjelder design av nettsider som skal fungere på iPad, er dette noen av de viktigste utfordringene:

  • Hånden kan fort komme i veien slik at man ikke ser ting som er på skjermen
  • På grunn av ’pølsefingrene’ blir tradisjonelle knapper og trykkflater for små, og det kan være vanskelig å treffe rett knapp. Dersom du for eksempel har prøvd å bruke Facebook sine nettsider på iPad, vet du hva vi mener.
  • Mangel på konvensjoner. En del nye navigasjonsformer har dukket opp, for eksempel bruk av gester som sveip og knip. Bruken av disse varierer, så det er ofte uklart for brukeren hvor han skal trykke og hvor han skal sveipe. På nettsider er det spesielt utfordrende å vite hva som er trykkbart.
  • Du mister mulighet for mouseover-funksjonalitet, noe som ofte blir brukt i forbindelse med navigasjon på nettsider.

I tillegg får du en del utfordringer av mer teknisk art:

  • Båndbredde: mange brukere padler (= surfe via iPad, som hørt på Språkteigen) via mobilnettet, og gidder ikke å vente lenge på at nettsiden skal laste.
  • Skjermstørrelse og -orientering: du bør tilrettelegge for både horisontal og vertikal bruk.
  • Dårlig ytelse og manglende støtte for plugins. Det er godt kjent at Flash ikke fungerer på iPad. I tillegg er det også verdt å merke seg at JavaScript går tregere; du risikerer at transisjoner hakker, og at nettsiden ikke reagerer som du har planlagt.
  • Nettleserkompatibilitet er fortsatt en utfordring. iPad er ikke det eneste nettbrettet, og selv om flere enn Apple baserer sine nettlesere på WebKit, varierer graden av støtte for flere CSS og JavaScript-elementer. Utviklere kan ha god nytte av Peter-Paul Kochs kompatibilitetsoversikt for mobile enhter.

Et eksempel: nye nettsider for Hydro

Den 1. september ble et redesignet www.hydro.com lansert. Halogen har blant annet stått for interaksjonsdesign og grafisk design. Selv om nettsidene primært er laget for tradisjonelle nettlesere med mus/tastatur, var det også et krav at den skulle fungere på iPad.

Hydros nettsted på iPad

Konseptet som ble valgt for hovedmenyen er basert på mouseover; ved å holde pekeren over et menypunkt åpnes undermenyen. Hvordan løser man dette på iPad? Vi vurderte flere muligheter, og kom frem til at det beste alternativet er at man klikker en gang for å åpne undermenyen (tilsvarer mouseover), og en gang til for å åpne siden for gjeldende menypunkt. Til vår positive overraskelse viste det seg at dette også er måten Safari på iPad automatisk tolker mouseover. Samtidig sørget Julia, en av våre eminente grafiske designere, for at hvert menypunkt har stor trykkflate.

Åpning og lukking av menyen er animert ved hjelp av JavaScript. Siden iPad ikke klarer å kjøre JavaScript like smertefritt som vanlige PCer, kan det være nødvendig å justere animasjonshastigheten når siden vises på iPad.

Mer fleksibel design er på vei

Etter hvert som iPad og andre tablets så vel som smarttelefoner blir mer utbredt vil det blir enda viktigere å sørge for at nettsidene fungerer på kryss av plattformer.

En spennende retning å gå i er responsiv eller fleksibel design, som går ut på at selve layouten på nettsiden tilpasser seg ulike skjermstørrelser. Eksempler på slike nettsteder er Sasquatch festival og Clean Air Commute Challenge. Responsiv design løser imidlertid ikke problemene med pølsefinger og mangel på mouseover. Vi må også huske på at iPad-brukere forventer samme ”strømlinjeformede” opplevelse når de padler som når de bruker apps, og av den grunn vil forvente noe som er mer tilpasset iPad og utnytter mulighetene som ligger i plattformen.

Et alternativ til responsiv design er å tilpasse hele eller deler av nettsiden til ulike plattformer i stedet for å tvinge fram et minste felles multiplum. På den måten kan du for eksempel lage en alternativ meny som er spesialtilpasset iPad. Ved å tilpasse nettsiden til ulike plattformer kan du også tilpasse innhold og funksjonalitet slik at du treffer brukerens behov bedre.

Uansett må vi nesten spørre hvor lenge vi kan fortsette å tenke på den tradisjonelle nettleseren som den primære plattformen, og de mobile som sekundære. Skal vi tro NeoLabels framtidsvideo vil mobilen ha overtatt web allerede i 2015. Det er ikke veldig lenge til. Bør vi heretter designe for mobil først?

Innlegget er skrevet i samarbeid med Tone Nordbø og Sigrid Bygdås.