Beste praksis for responsiv nettdesign

av Bradley Nice, Content Manager på ClickHelp.com - dokumentasjonsverktøy for programvare

Google har offisielt anbefalt Responsive Web Design som deres foretrukne metode for å bygge mobile nettsteder. Hvis du har en webside eller en blogg, er det på tide å vurdere å bytte til responsiv design i stedet for å opprettholde separate mobil- og nettbrettvennlige nettsteder.

Hvis du er ukjent med konseptet Responsive Web Design (RWD), er her de vanlige spørsmålene du kan ha rundt denne teknikken.

Hvorfor skal jeg bytte nettstedet til RWD?

Nettstedet ditt ser bra ut på skrivebordsskjermen, men det er kanskje ikke sant når nettstedet ditt blir sett på en smarttelefon eller et nettbrett. Når du har gjort designen lydhør, vil nettstedet se bra ut (og lesbart) på alle skjermer.

Med Responsive Design kan du lage ett design, og det vil automatisk tilpasse seg selv basert på skjermstørrelsen på den mobile enheten. Denne tilnærmingen gir mange fordeler:

  • Det sparer tid og penger fordi du ikke trenger å vedlikeholde separate nettsteder for stasjonære maskiner og mobiltelefoner.
  • Responsive Design er bra for nettstedets SEO (søkerangeringer), siden hver side på nettstedet ditt vil ha en enkelt nettadresse og dermed er Google-juice bevart. Du trenger ikke å bekymre deg for situasjoner der noen nettsteder lenker til mobilsiden din mens andre lenker til skrivebordssiden din.
  • Google Analytics-rapportene dine maler et bedre bilde av nettstedets bruk siden dataene fra mobile brukere og stasjonære brukere blir konsolidert.
  • Det samme vil være tilfelle for statistikken for sosial deling (Facebook Likes, Tweets, + 1) siden mobil- og desktop-versjonene av websidene dine har den samme URL-adressen.
  • Responsive Design er enklere å vedlikeholde, da de ikke involverer serversiden. Du må bare endre den underliggende CSS-en på en side for å endre utseende (eller layout) på en bestemt enhet.

Hva bør jeg vite for å komme i gang med Responsive Design?

Responsive Design er ren HTML og CSS. Du oppretter regler i CSS som endrer stil basert på skjermstørrelsen på brukerens enhet.

Du kan for eksempel skrive en regel som sier at hvis en brukers skjermstørrelse er mindre enn 320 piksler, ikke viser sidefeltet, eller hvis skjermstørrelsen er større enn 1920 piksler (widescreen desktop), øker du skriftstørrelsen på kroppen tekst til 15px.

Hvordan sjekker jeg om et bestemt nettsted bruker Responsive Design?

Det er enkelt. Åpne nettstedet i hvilken som helst stasjonær nettleser og endre størrelsen på nettleseren. Hvis nettstedets layout endres når du endrer størrelse, svarer designet.

Hvis jeg bruker responsiv design-tilnærmingen, fungerer nettstedet mitt med eldre nettlesere?

Stort sett ja. RWD bruker CSS3 mediesøk og HTML5 (for bedre semantikk) som ikke støttes i eldre versjoner av IE. Imidlertid er det JavaScript-baserte løsninger - respond.js og moderniserer for eksempel - som bringer kraften til CSS3 og HTML5 til eldre nettlesere inkludert IE6.

Leker Responsive Design fint med annonseringsnettverk som Google AdSense?

Hvis du bruker annonser på nettstedet ditt, bør du velge formatene nøye fordi brede enheter (som topplisten 728 × 60 piksler) kanskje ikke passer på en 320 px mobilskjerm. Jeg foretrekker å bruke vanlige rektangulære enheter (som 300 × 250) siden de lett passer på smarttelefonskjermer og widescreen-stasjonære maskiner.

Det er tusenvis av mobile enheter. Hvilke skjermoppløsninger skal det responsive nettstedet mitt støtte?

Jeg vil anbefale å angi bruddpunkter for minst følgende visningsporter i CSS3 Mediaqueries - 320px (iPhone-landskap), 480 px (iPhone-portrett), 600px (Android-nettbrett), 768px (iPad + ~ Galaxy Tabs) og 1024px (iPad-landskap og stasjonære).

Hvordan kommer jeg i gang med Responsive Web Design? Noen gode opplæringsprogrammer?

Her er online ressurser for å hjelpe deg i gang:

Nettsteder: Net Magazine, Smashing Magazine, CSS Tricks og Web Designer Wall

Videoopplæringer: YouTube, Net Tuts

Presentasjoner: PowerPoint-dekk

Podcasts: Shop Talk, 5by5 Web Show og The Industry

Twitter: @RWD, @NetMag og @SmashingMag

Hva er ulempene ved å bruke Responsive Design?

  • Ekstra kilobyte til websiden din, da de må laste ned CSS-stiler og JavaScript-filer som ellers var unødvendige.
  • Bilder. Du vil ikke tjene bilder med høyere oppløsning på mobilområdet ditt, men det er vanskelig å oppnå med responsiv design (med mindre du bruker en løsning på serversiden som Adaptive Images og Sencha.io).
  • Arbeidet med å legge et responsivt lag til ditt eksisterende nettsted. Noen ganger er det mer fornuftig å starte fra bunnen av fremfor å gjøre det eksisterende nettstedet med fast bredde flytende.

Du kan også like: Responsive Layouts Free EBOOK

Ha en fin dag!

Bradley Nice,
Content Manager hos ClickHelp.com - beste online dokumentasjonsverktøy for SaaS-leverandører