Bedste fremgangsmåder inden for responsiv webdesign

af Bradley Nice, Content Manager på ClickHelp.com - dokumentationsværktøj til software

Google har officielt anbefalet Responsive Web Design som deres foretrukne metode til opbygning af mobile websteder. Hvis du har et websted eller en blog, er det tid til at overveje at skifte til lydhør design i stedet for at vedligeholde separate mobil- og tabletvenlige websteder.

Hvis du er ny med begrebet Responsive Web Design (RWD), er her de almindelige spørgsmål, du måtte have omkring denne teknik.

Hvorfor skal jeg skifte mit websted til RWD?

Dit websted ser godt ud af skrivebordsskærmen, men det er muligvis ikke sandt, når dit websted vises på en smartphone eller en tablet. Når du har gjort designet lydhør, ser webstedet godt ud (og læsbart) på alle skærme.

Med Responsive Design kan du oprette et design, og det vil automatisk tilpasse sig selv baseret på skærmstørrelsen på den mobile enhed. Denne tilgang giver masser af fordele:

  • Det sparer tid og penge, da du ikke behøver at vedligeholde separate websteder til desktops og mobiltelefoner.
  • Responsive Design er godt for dit websteds SEO (søgerangeringer), da hver side på dit websted har en enkelt URL, og Google-juice er således bevaret. Du behøver ikke at bekymre dig om situationer, hvor nogle sider linker til dit mobilwebsted, mens andre linker til dit desktopwebsted.
  • Dine Google Analytics-rapporter maler et bedre billede af dit websteds brug, da data fra mobil- og desktopbrugere konsolideres.
  • Det samme gælder for de sociale delingsstatistikker (Facebook-likes, tweets, + 1'er), da mobil- og desktopversioner af dine websider har den samme URL.
  • Responsive design er lettere at vedligeholde, da de ikke involverer komponenter på serversiden. Du skal bare ændre den underliggende CSS på en side for at ændre dens udseende (eller layout) på en bestemt enhed.

Hvad skal jeg vide for at komme i gang med Responsive Design?

Responsivt design er ren HTML og CSS. Du opretter regler i CSS, der ændrer stil baseret på skærmstørrelsen på brugerens enhed.

For eksempel kan du skrive en regel, der siger, at hvis en brugers skærmstørrelse er mindre end 320 pixels, ikke viser sidebjælken, eller hvis skærmstørrelsen er større end 1920 pixels (widescreen desktop), skal du øge fontstørrelsen på kroppen tekst til 15px.

Hvordan kontrollerer jeg, om et bestemt websted bruger Responsive Design?

Det er nemt. Åbn dette websted i en hvilken som helst desktop browser, og ændre størrelsen på browseren. Hvis webstedets layout ændres, når du ændrer størrelsen, reagerer designet.

Hvis jeg følger fremgangsmåden med responsivt design, fungerer mit websted med ældre browsere?

Stort set ja. RWD bruger CSS3 mediespørgsmål og HTML5 (for bedre semantik), der ikke understøttes i ældre versioner af IE. Der er dog JavaScript-baserede løsninger - respond.js og moderniserer for eksempel - der bringer kraften i CSS3 og HTML5 til ældre browsere inklusive IE6.

Spiller Responsive Design fint med reklamenetværk som Google AdSense?

Hvis du bruger annoncer på dit websted, skal du omhyggeligt vælge formaterne, fordi brede enheder (som 728 × 60 pixel-leaderboard) muligvis ikke passer på en 320px mobilskærm. Jeg foretrækker at bruge standard rektangulære enheder (som 300 × 250), da de let passer på smartphoneskærme og widescreen-desktops.

Der er tusinder af mobile enheder. Hvilke skærmopløsninger skal mit responsive websted understøtte?

Jeg vil anbefale at indstille brudpunkter for mindst følgende udsigter i dine CSS3 Mediaqueries - 320px (iPhone-landskab), 480 px (iPhone-portræt), 600px (Android-tabletter), 768px (iPad + ~ Galaxy Tabs) og 1024px (iPad-landskab og desktops).

Hvordan kommer jeg i gang med Responsiv webdesign? Nogle gode tutorials?

Her er online ressourcer, der hjælper dig med at komme i gang:

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

Video-tutorials: YouTube, Net Tuts

Præsentationer: PowerPoint-dæk

Podcasts: Shop Talk, 5by5 webshow og industrien

Twitter: @RWD, @NetMag og @SmashingMag

Hvad er ulemperne ved at bruge Responsive Design?

  • Ekstra kilobyte til din webside, da de bliver nødt til at downloade CSS-stilarter og JavaScript-filer, der ellers var unødvendige.
  • Billeder. Du ønsker ikke at servere billeder med højere opløsning på dit mobilwebsted, men det er svært at opnå i responsivt design (medmindre du tager til en løsning på serversiden som Adaptive Images og Sencha.io).
  • Bestræbelser på at tilføje et lydhør lag til dit eksisterende websted. Nogle gange er det mere fornuftigt at starte fra bunden i stedet for at gøre dit eksisterende websted med fast bredde flydende.

Du kan måske også lide: Responsive Layouts Gratis EBOOK

Hav en god dag!

Bradley Nice,
Content Manager hos ClickHelp.com - bedste online dokumentationsværktøj til SaaS-leverandører