Hva er responsiv design?

Hva er responsiv design?

0

Responsiv design er fortsatt ganske nytt for mange. Kort kan man si at en nettside med et responsivt design endre seg etter størrelsen på skjermen du bruker. Under finner du vår FAQ om dette begrepet.

01. Hva er responsiv design?

Begrepet responsivt design brukes i all hovedsak om websider som er designet og tilpasset ulike skjermformater. Smarttelefoner, lesebrett og dataskjermer har mange forskjellige størrelser, formater og oppløsning. Målet med responsiv webdesign er å lage optimaliserte visninger for alle disse ulike skjermene. Smarttelefon tar over stadig mer av internettbruken, og det stiller krav om å lage nettsider som også ser bra ut på mobil. Begrepet «mobil først» brukes ofte for å forklare en designprosess der man starter med å definere nøkkeltjenestene i en informasjonsoppgave og samtidig sørge for at dette innholdet får en tilpasset plass og en presentasjon. Større skjermer kan presentere mer informasjon. Designoppgaven er å sørge for at hver plattform og skjermstørrelse utnyttes optimalt samtidig som at alt innholdet finnes i en enkelt responsive webside.

02. Trenger du responsivt design?

Har du mange brukere som benytter smarttelefon eller lesebrett mot websidene dine, vil du trolig ha god nytte av responsivt design. Webstatistikk-programmer som f.eks. Google Analytics vil raskt kunne gi deg svar på brukermønsteret. Nyere statistikk viser også at mer enn 50 prosent av all bruk av internett nå gjøres fra mobiltelefoner. Det er lite trolig at den andelen vil avta.

03. Hvorfor er responsivt design å foretrekke?

Frem til nylig var de aller fleste nettsider ikke responsive. Benyttet du en mobil til surfing på en slik side, brukte du mye tid til zooming og scrolling for å få lest innholdet. Med et responsivt design tilpasses innholdet seg til skjermflaten på mobilen. Besøker du en responsiv nettside med bruk av en større skjerm, antar vi at du ønsker mer informasjon enn det som vises på en liten skjerm. Med responsiv design kan vi tilby begge deler i en og samme sidekode. Tilsvarende kan vi også bake inn forskjellig navigasjonsløsninger tilpasset f.eks. skjermbrettet, slik at noen av bevegelsene du ellers benytter i «apps» også kan benyttes til navigasjon på nettsiden.

Kun en nettside! Med responsiv design lages kun en nettside til alle enheter. Du slipper å bygge egne sider til mobil og lesebrett.
04. Hvordan starter du med responsiv design?

Det finnes mange forskjellige måter å tilnærme seg en designprosess som skal ende opp i et nytt responsivt design-rammeverk for en nettside.

I Millimeterpress tar vi ofte utgangspunkt i hva som skal formidles og søker å definere nøkkeltjenestene som leveres fra et nettsted for deretter å bygge opp sidevisningene rundt disse nøkkeltjenestene. Men like ofte kan oppgaven være å lage responsive sider av allerede eksisterende løsninger, da blir ofte oppgaven å redusere informasjonsmengden.

Uansett tilnærming, oppgaveløsning og gjennomføring, så er målet å utvikle på et visuelt rammeverk, en presentasjon og et tilpasset innhold som er konsistent og tilrettelagt for visning på alle enheter.

Ved å justere størrelsen på dette nettleservinduet (dra og slipp i vinduets nedre, høyre hjørne) kan du simulere hvordan vi har valgt å tilpasse innholdet på disse sidene til forkskjellige skjermstørrelser. Du vil da oppleve at form, innhold og størrelser endres i tre steg, en visning for store skjermer, en visning for lesebrett og mindre skjermer og en enklere visning for mobil. Ser du nøyere etter vil du også se at en del innhold spesielt i sidespaltene er fjernet fra mobilvisningen.

Kostnadseffektivt: Responsivt design er billigere både å utvikle og vedlikehold enn egne, dedikerte mobilsider.
05. Hvordan fungerer et responsivt design?

Et responsivt design tilpasser layouten til visningsenheten ved bruk av et flytende grid, skalerbar bildestørrelser og ved utbytting av stilark (CSS - Cascading Style Sheets). Stilarkene er tilpasset de forskjellige skjermstørrelsene. I et flytende grid med skalerbare bildestørrelser fastsettes ofte høyde og breddeverdier i prosent fremfor i faste størrelser. Ved bruk av såkalte «break-points» velger systemet et nytt stilark som endre layout og innhold slik at det tilpasses enhetens skjermstørrelse og karakteristikk. Et responsivt design kan utvikles fra scratch, men de fleste velger å benytte et responsivt rammeverk for å lette utviklingsarbeidet.

06. Hva er ulempene med responsivt design?

Har du et nettsted som viser bannerannonser eller videoer, er disse som oftes ikke ikke laget som skalerbare objekter. Det er flere løsningsmodeller for dette, men som en hovedregel vil bruk av ikke skalerbart innhold i et skalerbart rammeverk, vil medføre at dette innholdet ikke bli vist optimalt.

Et responsivt nettsted tilpasser ofte også mengden av innhold. Det er vanlig at en del sidespalter, faktabokser og annen ekstra informasjon i en artikkel, fjernes fra de minste skjermene. Dette medfører at det stilles høyere krav til tilretteleggingen og redigeringen av innholdet.

07. Gode eksempler på responsive nettsteder?

Nettavisen The Boston Globe var tidlig ute med responsivt design i avisverden. Nettstedet Creative Bloq har stadig nye artikler om de beste responsive nettsidene.

I den norske nettverden vil vi kanskje trekke frem Khrono, som er utviklet av vår samarbeidspartner Ramsalt Lab og vårt eget bidrag: ByPlanOslo.

Share This Post: