Creatur

Responsive web design – Kort forklart

-

Responsive web design (RWD) er en måte å designe nettsider på, som gjør det enkelt å benytte nettsiden på både mobile plattformer, nettbrett og vanlige skjermstørrelser. Når man skal lage en responsive nettside, så er det flere fremgangsmåter å velge mellom. Du har kanskje besøkt nettaviser via mobil, og med en gang blitt videresendt til en nettadresse som begynner på «m» eller «tablet»?

Responsive Design

Overnevnte metode er en måte tilpasse nettsiden for mobilbrukere på, men det finnes et bedre alternativ – Fremgangsmåten som Google anbefaler. Denne metoden går ut på å vise det samme innholdet og den samme HTML koden til nettbrukeren, men endre på stilen eller CSS egenskapene for siden, avhengig av skjermstørrelse.

Forklart av Google

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

Kilde: http://googlewebmastercentral.blogspot.no/2012/06/recommendations-for-building-smartphone.html

Møt «Media Queries»

For å oppnå dette må man benytte noe som heter «media queries» (MQ). MQ var noe som først dukket opp sammen med CSS3 helt tilbake i 2001, men har i Juni 2012 blitt den anbefalte standarden for responsive design.

En media query, er en spørring som spør hva skjermstørrelsen på nettleseren er, og så endrer stil på nettsiden deretter. Prøv for eksempel å endre størrelsen på nettleseren du nå sitter med samtidig som du er inne på vår side. Legg merke til at elementer får nye plasseringer, får andre størrelser og egenskaper. Dette er «media queries» og responsive design i praksis.

Vi kaller dette mobiltilpassede nettsider, og har i lengre tid levert nettsider som har disse egenskapene. Har du besøkende på nettsiden din som bruker mobil for å lese den? Da bør du vurdere en mobiltilpasset nettside i dag.