Du åbner din egen hjemmeside på en telefon. Teksten kan læses, menuen klapper pænt sammen, og billederne ændrer størrelse, uden at noget skubbes ud af skærmen. Det er responsivt hjemmesidedesign, der virker, som det skal. Når det ikke gør, forlader besøgende siden, før de har læst et ord.
Din hjemmeside har ét sæt indhold og ét sæt kode. Responsivt hjemmesidedesign er den tilgang, der får den ene kodebase til at betjene hver besøgende korrekt, uanset om de sidder foran en bred computerskærm eller holder en telefon på højkant. I stedet for at bygge en separat mobilversion tilpasser et responsivt design layout, billeder og navigation automatisk efter den skærm, der bruges.
En hjemmeside, der kun ser rigtig ud på en computer, svigter de fleste af sine besøgende, før de har læst noget. For de fleste virksomhedsejere er responsivt design ikke noget, man skal overveje. Det er et grundkrav, du skal tjekke, før du går live.
Hvordan virker responsivt design?
En responsiv hjemmeside bruger CSS-regler kaldet media queries til at registrere størrelsen på den skærm, en besøgende bruger. Ud fra den information tilpasser layoutet sig. Et afsnit med tre kolonner på computer kan blive til én kolonne på mobil. En vandret navigationsmenu kan klappe sammen til en knap. Billeder skaleres, så de passer til den tilgængelige bredde uden at løbe ud over deres felter.
Det vigtigste princip er, at indholdet er det samme. Det, der ændrer sig, er, hvordan indholdet arrangeres og vises. En responsiv hjemmeside er ikke en anden hjemmeside for mobilbrugere. Det er den samme hjemmeside, tilpasset en anden skærm.
Vil du have en dybere teknisk forklaring på, hvordan det virker, så gennemgår artiklen om hvad responsivt design er mekanikken i detaljer, blandt andet hvordan fleksible gitre og billeder fungerer på tværs af enhedsstørrelser.
Hvad er forskellen på responsivt design og en hjemmeside kun til mobil?
Før responsivt design blev standard, byggede mange virksomheder en separat mobilversion af deres hjemmeside, ofte på en anden webadresse. En besøgende på en telefon blev sendt videre til mobilversionen. En besøgende på en computer så den almindelige hjemmeside.
Den fremgangsmåde skabte to ting, der skulle vedligeholdes. Ændringer i den ene blev ikke automatisk lavet i den anden. Indholdet kom ud af trit. Mobilversionen havde ofte færre funktioner eller mindre indhold. To kodebaser gav dobbelt arbejde uden at give dobbelt resultat.
Responsivt design afløste det ved at lade én hjemmeside virke overalt. Én webadresse, ét sæt indhold, én kodebase, tilpasset alle skærmstørrelser. Det er enklere at bygge, enklere at vedligeholde og bedre for søgemaskiner, som foretrækker én autoritativ webadresse til hvert stykke indhold.
Hvad ændrer sig mellem computer og mobil på en responsiv hjemmeside?
De justeringer, der sker mellem computer og mobil, er mere omfattende, end de fleste først tror.
Layoutkolonner klapper sammen. Et afsnit med fire produktkort side om side på computer bliver til en stak, man kan scrolle i, på mobil. Navigationsmenuer skifter form. Vandrette menuer bliver til sammenklappelige paneler eller skuffer, der glider ind fra siden. Skriftstørrelser justeres, så de kan læses uden zoom. Knapper bliver større, så de er lettere at trykke på med en finger end at klikke på med en mus.
Billeder skaleres, så de udfylder deres felter uden at løbe over. Baggrundsbilleder kan blive beskåret anderledes, så de passer til stående format. Formularer justerer feltstørrelser og afstande, så de kan bruges med et mobiltastatur.
Testen på et velgennemført responsivt design er ikke kun, at det ikke går i stykker på mobil. Det er, at oplevelsen på mobil føles gennemtænkt frem for presset sammen.
Hvordan hænger responsivt design sammen med sidehastighed?
Responsivt design og sidehastighed hænger tæt sammen. En responsiv hjemmeside, der sender billeder i fuld computeropløsning til mobile besøgende, er teknisk set responsiv, men i praksis langsom. Mobile besøgende på mobilnettet henter billeder, der er langt større, end deres skærm kan vise.
Et godt implementeret responsivt design løser det ved at sende passende store billeder til hver enhed, komprimere filer til mobilforbindelser og udskyde ikke-nødvendige elementer, der forsinker den første indlæsning. Målet er ikke kun tilpasning af layout. Det er en hurtig, glat oplevelse uanset enhed eller forbindelseshastighed.
Artiklen om hvad hjemmesidehastighed er forklarer, hvordan indlæsningshastighed påvirker brugeroplevelse og placering i søgeresultater, og hvad der får hjemmesider til at køre langsommere, end de burde.
Hvad skal du tjekke, når du vurderer en skabelons responsivitet?
Ikke alle skabeloner, der er mærket som responsive, er lige godt designet til mobil. Når du vurderer en, er der nogle bestemte ting, du bør tjekke, før du vælger.
Åbn skabelonens demo på din telefon, ikke kun i en forhåndsvisning på computer. Gå igennem hvert afsnit. Tjek, at menuen åbner pænt, og at alle links kan nås. Tjek, at teksten kan læses uden zoom. Tjek, at knapper med opfordring til handling er store nok til at trykke på uden besvær. Tjek, at billeder vises korrekt og ikke skubber indhold ud af skærmen.
Læg mærke til afstande på mobil. Afsnit, der ser luftige ud på computer, kan føles trange, når kolonner klapper sammen på en lille skærm. Tjek, at indholdsafsnit har nok polstring, så teksten ikke løber fra kant til kant. Artiklen om sådan vælger du en hjemmesideskabelon dækker mobiltest som en del af hele vurderingen af en skabelon.
Hvad er tegnene på, at en hjemmeside ikke er ordentligt responsiv?
Nogle fejl i responsivitet er tydelige. Andre er så subtile, at du måske først opdager dem, når en kunde nævner dem.
Almindelige tegn på, at en hjemmeside ikke er ordentligt responsiv, er tekst, der kræver vandret scrolling for at læse den helt, billeder der løber ud over deres felter og bliver skåret af i kanterne, navigationsmenuer der ikke kan bruges uden en markør, knapper der er for små til at ramme sikkert, og formularer hvor indtastningsfelter ikke tilpasser sig et mobiltastatur.
Mindre tydelige tegn er et layout, der teknisk set passer på mobil, men ligner en computerhjemmeside, der er klemt ind i en smal kolonne. Afsnit med for mange kolonner, der klapper sammen i en forvirrende rækkefølge. Sidehoveder og sidefødder, der opfører sig anderledes på mobil, på måder der ikke var tænkt ind i det oprindelige design.
Standardtjekket er at gå igennem hver side på en rigtig telefon. Browserforhåndsvisninger er nyttige under udvikling, men giver ikke helt den samme oplevelse som en enhed med touchskærm.
Hvordan påvirker responsivt design placeringen i søgeresultaterne?
Søgemaskiner bruger mobilversionen af din hjemmeside som den primære version til indeksering og rangering. En hjemmeside, der virker godt på mobil og indlæses hurtigt på en telefon, klarer sig generelt bedre i søgeresultaterne end en, der primært er bygget til computer.
Ud over præferencen for indeksering sender en dårligt responsiv hjemmeside negative signaler. Høj afvisningsrate fra mobile besøgende, lange indlæsningstider på mobilnettet og indhold, der er svært at læse, trækker alt sammen ydeevnen ned over tid. Besøgende, der straks forlader siden, fordi den ikke virker på deres telefon, fortæller søgemaskinerne, at siden ikke hjalp dem.
Vil du have det fulde billede af, hvordan søgemaskineoptimering virker, og hvilke tekniske faktorer der betyder mest, så dækker artiklen om hvad SEO er emnet fuldt ud.
Sådan klarer WEMASY responsivt design
Hver skabelon i WEMASYs hjemmesidebygger er bygget til at være responsiv på computer, tablet og mobil. Den visuelle editor har en mobilvisning ved siden af computervisningen, så du kan se, hvordan afsnit opfører sig på forskellige skærmstørrelser, mens du bygger. Ydeevne og mobiltilpasning klarer platformen, så du ikke skal sætte det op manuelt.
Se, hvad der er med, hos WEMASYs hjemmesidebygger, eller se planerne på prissiden.
Ofte stillede spørgsmål
Er min hjemmeside automatisk responsiv, hvis jeg bruger en hjemmesidebygger?
De fleste moderne hjemmesidebyggere bruger responsive skabeloner som standard. Hvis du har valgt en skabelon fra en nutidig hjemmesidebygger, er den sandsynligvis responsiv. Det vigtige at tjekke er ikke, om skabelonen er mærket responsiv, men om den opfører sig godt på en telefon. Gå din hjemmeside igennem på en rigtig mobil enhed, og test navigation, billeder, tekststørrelse og formularer, før du tager for givet, at alt virker. Med WEMASYs hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Kan en ældre hjemmeside gøres responsiv uden at bygge den om?
Det afhænger af, hvordan den oprindelige hjemmeside blev bygget. På hjemmesider bygget i moderne hjemmesidebyggere kan mobiloplevelsen ofte forbedres ved at justere skabelonens indstillinger eller skifte til en bedre skabelon. Hjemmesider kodet fra bunden eller bygget på ældre platforme kan kræve et stort omarbejde. I mange tilfælde er det hurtigere og giver et bedre resultat at bygge om på en nutidig platform end at forsøge at eftermontere responsivitet på en ældre kodebase.
Påvirker responsivt design, hvor hurtigt min hjemmeside indlæses?
Responsivt design i sig selv gør ikke en hjemmeside langsom. Måden, det implementeres på, kan. En hjemmeside, der sender billeder i fuld computerstørrelse til mobile besøgende på mobilnettet, indlæses langsomt, selv om layoutet tilpasser sig korrekt. Et godt implementeret responsivt design har billedstørrelser, der passer til mobil, komprimerede filer og udskudt indlæsning af ikke-nødvendige elementer. At layoutet tilpasser sig skærmen er kun en del af en komplet mobiloplevelse.
Hvad er mobile-first design?
Mobile-first design er en fremgangsmåde, hvor mobilversionen af en hjemmeside designes og bygges før computerversionen, i stedet for omvendt. Man starter i de mest begrænsede omgivelser og bygger udad. Når man designer til mobil først, tvinges man til tydeligere prioriteter. Når pladsen er begrænset, er det kun det vigtigste indhold og de vigtigste handlinger, der overlever. Computerversionen har så plads til at bygge videre på det fundament.
Hvordan tjekker jeg, om min hjemmeside er mobilvenlig?
Gå hver side igennem på en rigtig telefon. Test navigation, billeder, tekststørrelse, formularer og knapper. Søgemaskiner tilbyder også gratis mobiltestværktøjer, hvor du skriver din webadresse, og de påpeger konkrete problemer som tekst, der er for lille til at læse, eller elementer, der kan klikkes på, men ligger for tæt. Kombinationen af en manuel gennemgang og et værktøjstjek finder de problemer, der betyder mest.