Du öppnar din egen webbplats i mobilen. Texten går att läsa, menyn fälls ihop snyggt och bilderna ändrar storlek utan att något hamnar utanför skärmen. Det är responsiv webbdesign som fungerar som den ska. När den inte gör det lämnar besökare sidan innan de läst ett ord.
Din webbplats har en uppsättning innehåll och en uppsättning kod. Responsiv webbdesign är arbetssättet som gör att den enda kodbasen fungerar rätt för alla besökare, oavsett om de sitter vid en bredbildsskärm eller håller mobilen upprätt. I stället för att bygga en separat mobilversion av webbplatsen anpassar en responsiv design layout, bilder och navigering automatiskt efter skärmen som används.
En webbplats som bara ser rätt ut på en dator sviker de flesta av sina besökare innan de hunnit läsa något. För de flesta företagare är responsiv design inget beslut att fundera på. Det är en självklar förväntning som du ska kontrollera före lansering.
Hur fungerar responsiv design?
En responsiv webbplats använder CSS-regler som kallas media queries för att läsa av storleken på besökarens skärm. Utifrån den informationen anpassas layouten. Ett avsnitt med tre kolumner på dator kan bli en enda kolumn på mobil. En vågrät navigeringsmeny kan fällas ihop till en knapp. Bilder ändrar storlek för att passa den tillgängliga bredden utan att flöda över sina behållare.
Grundprincipen är att innehållet förblir detsamma. Det som ändras är hur innehållet ordnas och visas. En responsiv webbplats är inte en annan webbplats för mobilanvändare. Det är samma webbplats, anpassad för en annan skärm.
För en djupare teknisk förklaring av hur det fungerar går artikeln om vad responsiv design är igenom mekaniken i detalj, inklusive hur flytande rutnät och flexibla bilder fungerar över olika enhetsstorlekar.
Vad är skillnaden mellan responsiv design och en webbplats enbart för mobil?
Innan responsiv design blev standard byggde många företag en separat mobilversion av sin webbplats, ofta på en annan webbadress. En besökare på mobil skickades vidare till mobilversionen. En besökare på dator såg huvudwebbplatsen.
Det här arbetssättet gav två separata saker att underhålla. Ändringar i den ena slog inte automatiskt igenom i den andra. Innehållet hamnade ur synk. Mobilversionen hade ofta färre funktioner eller mindre innehåll. Att hantera två kodbaser dubblerade arbetet utan att dubblera resultatet.
Responsiv design ersatte det genom att få en enda webbplats att fungera överallt. En webbadress, en uppsättning innehåll, en kodbas, anpassad för alla skärmstorlekar. Det är enklare att bygga, enklare att underhålla och bättre för sökmotorer, som föredrar en enda auktoritativ webbadress för varje innehåll.
Vad ändras mellan dator och mobil på en responsiv webbplats?
Anpassningarna mellan dator och mobil är mer omfattande än de flesta först inser.
Layoutkolumner viks ihop. Ett avsnitt med fyra produktkort bredvid varandra på dator blir en stapel som går att scrolla på mobil. Navigeringsmenyer ändrar form. Vågräta menyer blir hopfällbara paneler eller utfällbara sidomenyer. Textstorlekar justeras så att de förblir läsbara utan zoom. Knappar blir större så att de är lättare att trycka på med ett finger än att klicka på med en mus.
Bilder ändrar storlek för att fylla sina behållare utan att flöda över. Bakgrundsbilder kan beskäras annorlunda för att fungera i stående format. Formulär anpassar fältens storlek och avstånd så att de går att använda med ett mobiltangentbord.
Provet på en väl utförd responsiv design är inte bara att den inte går sönder på mobil. Det är att upplevelsen på mobil känns genomtänkt snarare än hoptryckt.
Hur hänger responsiv design ihop med sidans hastighet?
Responsiv design och sidhastighet är nära kopplade. En responsiv webbplats som levererar bilder i full datorupplösning till mobilbesökare är tekniskt responsiv men i praktiken långsam. Mobilbesökare på mobilnät laddar ned bilder som är mycket större än vad deras skärm kan visa.
En väl genomförd responsiv design hanterar det genom att leverera lagom stora bilder till varje enhet, komprimera filer för mobila anslutningar och skjuta upp icke-väsentliga element som saktar ned den första laddningen. Målet är inte bara anpassad layout. Det är en snabb och smidig upplevelse oavsett enhet eller anslutningshastighet.
Artikeln om vad webbplatshastighet är beskriver hur laddningsprestanda påverkar användarupplevelse och sökrankning, och vad som gör att webbplatser går långsammare än de borde.
Vad ska du kontrollera när du utvärderar en malls responsivitet?
Alla mallar som kallas responsiva är inte lika väl utformade för mobil. När du utvärderar en finns det specifika saker värda att kontrollera innan du bestämmer dig.
Öppna malldemon på din mobil, inte bara i en förhandsvisning på datorn. Gå igenom varje avsnitt. Kontrollera att menyn öppnas utan problem och att alla länkar går att nå. Kontrollera att texten går att läsa utan zoom. Kontrollera att knappar med uppmaning till handling är tillräckligt stora för att trycka på bekvämt. Kontrollera att bilder visas rätt och inte skjuter innehåll utanför skärmen.
Ägna uppmärksamhet åt avstånden på mobil. Avsnitt som känns luftiga på dator kan kännas trånga när kolumnerna viks ihop på en liten skärm. Kontrollera att innehållsavsnitten har tillräcklig marginal så att texten inte går från kant till kant. Artikeln om hur du väljer en webbplatsmall tar upp mobiltestning som en del av hela utvärderingen av en mall.
Vilka tecken visar att en webbplats inte är ordentligt responsiv?
Vissa brister i responsiviteten är tydliga. Andra är så subtila att du kanske inte märker dem förrän en kund säger något.
Vanliga tecken på att en webbplats inte är ordentligt responsiv är text som kräver sidledsscroll för att läsas i sin helhet, bilder som flödar över sina behållare och klipps av i kanterna, navigeringsmenyer som är omöjliga att använda utan muspekare, knappar som är för små för att trycka på pålitligt och formulär där inmatningsfälten inte ändrar storlek rätt för ett mobiltangentbord.
Mindre uppenbara tecken är en layout som tekniskt sett ryms på mobilen men ser ut som en datorwebbplats som kläms ned i en smal kolumn. Avsnitt med för många kolumner som viks ihop i en förvirrande ordning. Sidhuvuden och sidfötter som beter sig annorlunda på mobil på sätt som den ursprungliga designen inte tagit hänsyn till.
Standardkontrollen är att gå igenom varje sida på en riktig mobil. Förhandsvisningar i webbläsaren är användbara under utvecklingen men återskapar inte helt upplevelsen på en pekskärmsenhet.
Hur påverkar responsiv design sökrankningen?
Sökmotorer använder mobilversionen av din webbplats som primär version för indexering och ranking. En webbplats som fungerar bra på mobil och laddas snabbt på en mobil presterar generellt bättre i sökresultaten än en som i första hand byggts för dator.
Utöver indexeringsfördelen sänder en dåligt responsiv webbplats negativa signaler. Hög avvisningsfrekvens bland mobilbesökare, långa laddtider på mobilnät och innehåll som är svårt att läsa drar ned prestandan över tid. Besökare som lämnar direkt för att webbplatsen inte fungerar på deras mobil visar sökmotorerna att sidan inte gav dem något.
För en helhetsbild av hur sökoptimering fungerar och vilka tekniska faktorer som betyder mest täcker artikeln om vad SEO är hela ämnet.
Så hanterar WEMASY responsiv design
Varje mall i webbplatsbyggaren i WEMASY är byggd för att vara responsiv på dator, surfplatta och mobil. Den visuella redigeraren har en mobilförhandsvisning vid sidan av datorvyn så att du kan se hur avsnitten beter sig vid olika skärmstorlekar medan du bygger. Prestanda och mobilanpassning sköts av plattformen i stället för att kräva manuell konfiguration.
Se vad som ingår i webbplatsbyggaren i WEMASY eller jämför planerna på prissidan.
Vanliga frågor
Är min webbplats automatiskt responsiv om jag använder en webbplatsbyggare?
De flesta moderna webbplatsbyggare använder responsiva mallar som standard. Om du valde en mall från en aktuell webbplatsbyggare är den sannolikt responsiv. Det viktiga är inte om mallen är märkt som responsiv utan om den beter sig bra på en mobil. Gå igenom din webbplats på en riktig mobil och testa navigering, bilder, textstorlek och formulär innan du antar att allt fungerar. Med webbplatsbyggaren i WEMASY kan du sätta upp det direkt på din webbplats.
Kan en äldre webbplats bli responsiv utan att byggas om?
Det beror på hur den ursprungliga webbplatsen byggdes. På webbplatser som byggts i moderna webbplatsbyggare går mobilupplevelsen ofta att förbättra genom att justera mallens inställningar eller byta till en bättre mall. Webbplatser som kodats från grunden eller byggts på äldre plattformar kan kräva stora omarbetningar. I många fall går det snabbare och ger ett bättre resultat att bygga om på en aktuell plattform än att försöka bygga in responsivitet i en äldre kodbas.
Påverkar responsiv design hur snabbt min webbplats laddas?
Responsiv design i sig gör inte en webbplats långsammare. Hur den genomförs kan göra det. En webbplats som levererar bilder i full datorstorlek till mobilbesökare på mobilnät laddas långsamt även om layouten anpassas rätt. En väl genomförd responsiv design innehåller bildstorlekar anpassade för mobil, komprimerade filer och fördröjd laddning av icke-väsentliga element. Att layouten anpassas efter skärmen är bara en del av en komplett mobilupplevelse.
Vad är mobile first-design?
Mobile first-design är ett arbetssätt där mobilversionen av en webbplats designas och byggs före datorversionen, i stället för tvärtom. Man utgår från den mest begränsade miljön och bygger utåt. Att designa för mobil först tvingar fram tydligare prioriteringar. När utrymmet är begränsat överlever bara det viktigaste innehållet och de viktigaste handlingarna. Datorversionen får sedan utrymme att bygga vidare på den grunden.
Hur kontrollerar jag om min webbplats är mobilanpassad?
Gå igenom varje sida på en riktig mobil. Testa navigering, bilder, textstorlek, formulär och knappar. Sökmotorer erbjuder också gratis mobiltestverktyg där du anger din webbadress och de flaggar specifika problem som text som är för liten att läsa eller klickbara element som ligger för nära varandra. Kombinationen av en manuell genomgång och en kontroll med verktyg avslöjar de problem som betyder mest.