Er gamle layout ideer noe å ta med seg i en moderne nettside? Har du tilpasset designet ditt for større skjermer?
Meny og logo som skal være synlig hele tiden, god lesbarhet og et søkefelt tar opp plass på skjermen. Samtidig vil du best mulig vise frem tydelig hvem nettsiden er for. Høres dette kjent ut?
Som designere har vi lenge forhold oss til gitte, faste flater, og tilpasset innhold til format. Nå i en tid hvor innholdet (nettsiden) blir vist på så mange ulike skjermstørrelser, hvordan designer man for det?
Teknologien forandrer design
Webdesign forandrer seg i takt med den teknologien som brukes for å vise nettsider.
For 10 år siden laget vi design for desktop PCer, og uniformt var det design tilpasset en bredde på 960 pixler som gjaldt. Det var den bredden som man regnet med at de fleste desktop skjermer ville vise på skjermflaten. (Basert på de vangliste skjermoppløsningene da). Så kom nettbrettene og smarttelefoner som snudde alt på hodet. Vi kunne ikke lenger bare designe for en type skjerm, ikke bare for et breddeformat lenger, men og nå i et høydeformat.
Mobilside vs Responsivt design
Mange webdesignere løste mobil nettinnhold med å lage en egen versjon av nettsiden for mobil. Brukerne som leste nettsiden på mobilen var på en annen nettside enn de som leste nettsiden på desktop. Man laget helt eget design for mobil, og tilpasset da innholdet (som kunne være en forenklet mer sammenfattet versjon av det som fantes på "desktopversjonen"). Det var mange fordeler med dette, den største var at man måtte holde mobilsiden "rask", og at alt innhold var raskt å laste inn. Ulempen med dette var at man stadig vekk tilpasset og vedlikeholdt to ulike websider, innholdet ble flere ganger lagret to ganger i publiserinsløsningene de bukte.
Samtidig med et stadig raskere og bedre mobilnettverk (bredbånd) kom en økende variasjon av nettbrett og laptopper. Med så mange ulike skjermstørrelser ble denne tilnærmingen langt fra optimal. Responsivt design kom som et alternativ. De aller fleste websider benytter seg av responsivt design i dag. Innholdet blir lagt inn og tilpasset til alle skjermstørrelser.
Responsivt design bruker breakpoints
Breakpoints er satte verdier - hvor verdien indikerer hvor bred skjermen er, når et breakpoint er nådd skiftes layouten i designet for å tilpasses den nye skjermoppløsningen. For en designer handler dette om å tilpasse layout til de skjermene man regner med at blir brukt. For oss fleste har dette vært å tilpasse layouten fra desktop versjonen til layout som skulle fungerer på tablet og på mobilskjerm.
Er det kanskje på tide å begynne å tenke på hvordan designet skal se ut på enda større skjermoppløsninger? For mellom det man vanligvis kaller tablet oppløsning (768 pixler i bredde) og den nest vanligste skjermoppløsningen i Norge i dag (1920 px i bredde - typisk oppløsning på en ekstern skjerm på rundt 20") er det et ganske stort sprang. Det er mer enn en "hel skjermbredde" i pixler kan man si. Et forslag kan være å lage et layout for større skjermer (eks breakpoint på >1440px). Ved å bruke skjermbredden har man mulighter som kanskje tar vare på innholdet "above the fold" som det snakkes mye om. (Se forøvrig blogg innlegg om scrolling)
.png)
Over: De mest brukte skjermoppløsninger i Norge målt i pixler (kilde Statcounter)
Må menyen alltid være på topp?
I forrige tiår var det vanligste å dele opp navigasjonen med topp og venstremeny. I de senere har normen vært å samle menyelementer og navigasjon på toppen av siden. Fordelen med dette er at man kan ha en konsekvent visning av menyen på samme plass uavhengi av skjermstørrelse. Menyen er og ofte "låst" til toppen og følger med sida når man scroller for å gi bedre brukeropplevelse, lettere navigasjon og tydelig branding.
Med de større og brede skjermene er kanskje toppen ikke nødvendigvis alltid den beste plasseringen. Innhold som ligger "above the fold" (eller forklart på en annen måte - det første man ser uten å scrolle) er fremdeles veldig viktig for brukeropplevelsen. Det gjør høyden på en nettside til verdifull. Kanskje spesielt på større og bredere skjermer hvor høyden er mye mindre enn bredden. En løsning er å innføre en varient av venstremeny igjen. Flere moderne websider har flyttet menyene sine til venstre del av skjermen. Både som tradisjonell åpen meny, men og som en aktiv meny som kan skjules og og visest med brukerinteraksjon.
Det man kaller fullskjerm menyer (og megamenyer) er blitt introdusert som en reel tredje mulighet (og som ikke nødvendigvis gjør brukeropplevelsen noe dårligere). Da får man fullt fokus på navigasjonen og har hele flaten til sin disposisjon når det gjelder layout. Adobe er en av de større aktørene som brukte denne type meny på websiden sin.
Begge disse "design" grepene er hentet fra brukervaner og atferd på mobilapper. Facebook var en av de første som gjorde "slide inn" meny vanlig - at et lite ikon skjuler hele menyen utafor skjermen, og "slides" eller sklir inn ved aktivering. Og pga liten skjermplass er det å vie full fokus på menyen en vanlig grep i mobilapper.
Hva sitter jeg igjen med?
Uansett hvordan du jobber med designet - mobil først, desktop sist eller omvendt er det viktigste at brukeropplevelsen skal være like god uavhengi av skjerm. Forvent at websiden ikke nødvendigvis blir lik og at designet ditt ikke blir pixelperfekt på alle oppløsninger. Bredere skjermer kan gi gode layout alternativer, og vi i DCode følger spendt med på utviklingen videre.
Kilder:
http://1stwebdesigner.com/responsive-design-breakpoints/
http://gs.statcounter.com/screen-resolution-stats/desktop/norway#monthly-201607-201707-bar
