Tekst: Darija S. Hauge, Illustrasjoner: freepik.com
Artikkelen handler om design med tanke på mobilbrukere. Jeg snakker med to spesialister i bransjen og finner ut blant annet at:
- Det som bare apper kunne gjøre før – kan websider gjøre nå:
Push-varsler, vibrasjon, bevegelsesdetektor. - Det er umulig å lage en kvalitetsapp bare på entuasiasme og tjene penger på den.
- Det er trend med spesialiserte apper som gjør én oppgave
- Er du teknisk og vil du forbedre en eksisterende webside – sjekk Viewport, Mobile Emulator og Apache Cordova.
- Designer du for web? Glem dyr Photoshop! Prøv Sketch! (kun for Mac brukere)
Dette er del 1 av 2.
Johannes er Principal Engineer i Sopra Steria og ble nylig nominert som Nordic Startup Award Development Hero. Han snakker fra teknisk og forretningsmessig side.
– Design av apper eller av mobilvennlige nettsider?
– Det viktige er å ha løsninger som fungerer bra på mobil. Og forskjellige virksomheter vil velge forskjellige innfallsvinkler. For et par år siden var nesten alt som fungerte godt apper. Ulempen med det er at du må designe én app for Android og en for iOS – og hvis man ønsker det – en Windows-app også. Man starter praktisk talt på nytt med appen for hver plattform.
– Hvis du skal nå alle brukere, må du lage web-side for pc, en mobil web-side, Windows -app, Android-app og iOS-app.
– Alternativet til å lage en app til hver platform, er å lage en web side som pakkes inn i en applikasjon. Det finnes et open-source rammeverk som heter Apache Cordova, som begynner å bli veldig bra. Da får du det best fra to verdener. Ulempen er at en slik såkalt «hybrid» applikasjon ikke vil føles like naturlig som en skreddersydd app for iPhone eller Android.
– Hva er grunnen til å velge separate tilpassede apper for hver platform kontra å lage en webside som fungerer for alle?
– For et år siden fikk du ikke tilgang til kamera, lokasjon eller akserellometer (at mobiltelefonen oppdager hvordan du holder den), vibrasjonsfunksjon, å sende varsler eller å kunne installere om ikon på skjermen hvis du jobba lager mobil webside . Det var for ett år siden, altså, men nå er det mulig å gjøre alt dette med mobile websider.
Du kan ha en mobilside i dag som ber brukeren om tilgang til kameraet på mobiltelefonen. Og det siste som kom i Chrome var web-push-varsler. Hvis du f. eks. har installert Facebook på mobiltelefonen din, og det er noen som sender deg melding, så sier mobiltelefonen pling og du får et varsel.
– Nå har du muligheten for å gå til en webside som ber om tillatelse til å gjøre dette slik at websiden sender deg meldinger. Også dersom nettleseren ikke er åpen og du ikke har installert noe spesielt.
– Du kan for eksempel abonnere på et tema i en avis og så får du varsler på mobilen din om at det har kommer en ny artikkel. Før måtte du å ha en app, nå trenger du ikke det lenger. Det som er kult med dende typen teknologi er at den samme websiden sender deg varsel både på mobile og på pc-en din. Kamera og lokasjon er eksempler på ting som har vært tilgjengelig lenge. Noen av de mer overraskende tingene som går an på mobile websider er vibrasjon og bevegelsesdeteksjon. Alt dette er tilgjengelig via JavaScript.
– Hvordan skal man designe websider som er tilpasset mobil?
– Det er to spennende scenarier. Det ene er hvis du har en eksisterende web-side som skal fungere på mobil, og det andre er hvis du skal lage en ny.
Det er noen enkle ting du kan gjøre for å forbedre websiden uten at du må gjøre ting helt på nytt. For det første, fontstørrelsen på mobile websider blir ofte feil fordi du ikke har sagt at du skal støtte mobile sider. Det er en html-metatag som heter Viewport, som du legger til på siden din.
For det andre må du teste på mange forskjellige mobiltelefoner og se hvordan det ser ut. Det høres ganske klønete ut, men i Google Chrome og i mange andre nettlesere finnes det noe som heter mobile web emulator. Klikker du på et lite ikon av mobiltelefon i Developer Console i Chrome, så ser du websiden slik den vil se ut i en mobiltelefon, og du kan velge hvilken model du skal se. Det vises ikke perfekt men det er veldig mye bedre enn å gå i blinde. Og så må du naturligvis se på websiden din hvordan den ville se ut hvis den har cirka 300 pixler i bredden, for det er den typiske størrelsen på en mobiltelefon.
– Hva er de vanligste problemene som bør fikses?
– Det vanligste problemet er menyer, spesielt menyer på høyre eller venstre side. Du bør skjule dynamiske menyer når skjermbredden er liten.
Det finnes gode oppskrifter på nettet for hvordan du gjør det og det er noe du må gjøre bare én gang. En annen ting som er veldig viktig er å ikke bruke effekter som skjer når du holder musen over et element, såkalt hover effekter. For eksempel en popup-meny. Du har ikke det samme begrepet på en touch-skjerm. Du må finne en annen løsning.
– Hvordan lager man gode websider for mobil fra bunnen?
– FINN.no er et godt eksempel på en spennende strategi rundt mobile applikasjoner. Hvis du går til www.finn.no på mobilen din så blir du omdirigert til m.finn.no. Det er en separat webside som er laget med et tanke på mobiltelefon. Den websiden kan du også se på desktopen din, men mobilsiden er enklere strukturert enn desktopsiden. Så de har valgt å ha separate websider for mobil og desktop. Hvis du har kapasitet til det, så kan det gi en veldig god mobilopplevelse.
– Hva er trendene på app-fronten?
– FINN.no har flere apper: Selve finn.no-appen og FINN-torget-appen – en spesialisert app for ett formål. Ruter gjør det samme med Ruter bilett og Ruter reise. Det å ha flere små apper er en trend vi ser mer av. Det gjør at hver av appene kan bli enklere og du trenger ikke å ha et komplisert navigeringssystem i en stor app. Et annen eksempel på dette er Audi. Når jeg søker etter Audi på Google Play finner jeg 9 offisielle apper. Så biler har kommet langt på det området. Selv en økonomimodell som Skoda er har en serie apper.
– Hva skjer om fem år?
– Det er såpass store endringer at det er vanskelig å spå. Men du kan si at om fem år vil de fleste systemene man i dag går inn i via web på desktop bli aksessert i minst like stor grad fra mobiltelefon. I hvertfall de som er rettet mot forbrukere. Hvis du har en forbrukerwebside, så må du bli klar for at det blir mobile brukere i økende grad som vil være der. Det betyr ikke at du skal ignorere de brukere som benytter pc, men det er de mobile brukerne som kommer til å gi volumet. Antageligvis kommer vi også til å se at applikasjoner blir mindre og mer spesialiserte på den måten vi så med FINN.no torget og FINN.no, og Ruter bilett og Ruter reise.