Nuförtiden är det vanligt att bygga en webbplats eller app som justerar användargränssnittet beroende på webbläsaren eller enheten. Det finns två sätt att uppnå detta mål. Den första handlar om att skapa olika versioner av din webbplats eller app för olika enheter. Men det är ineffektivt och kan leda till oförutsägbara fel.
I ett sökande efter ett pålitligt, framtidssäkert tillvägagångssätt myntades den lyhörda – eller adaptiva – designen. Den fokuserar på att bygga en enda version av din layout som automatiskt anpassar sig till olika webbläsare eller enheter.
I den här artikeln kommer vi att lära oss om responsiv webbdesign och de grundläggande principerna som hjälper dig att skapa en fantastisk webbplats.
Ingredienser för responsiv webbdesign
Responsiv webbdesign är inte så komplicerat som det låter. Det är en uppsättning metoder som du kan använda när du skriver CSS, inte en separat teknik som du måste lära dig från grunden. Du kanske redan följer flera av dessa principer utan att inse det. Du kan förstå responsiv webbdesign genom att utforska dess fyra ingredienser: flytande layouter, responsiva enheter, flexibla bilder och mediefrågor.
Flytande layouter
Med en flytande layout kan du skapa webbsidor som anpassar sig till den aktuella visningsportens bredd och höjd. Vanlig praxis inkluderar att använda maximal bredd egenskap istället för att ge en fast bredd till ett element. Använd också procent (%), viewport höjd (vh), eller visningsportens bredd (vw) hjälper till att förbättra anpassningsförmågan som inte är möjlig med pixlar (px). Så nästa gång du bygger en layout, se till att införa dessa små ändringar och börja dra nytta av responsiva designtekniker.
Responsiva enheter
När du går över till mer avancerad CSS kommer du ofta att se användningen av rem och em enheter för längd istället för px enheter. Detta beror på att rem enhet gör det superenkelt att skala hela layouten. Som standard är 1rem lika med 16px eftersom det är proportionellt mot elementets teckenstorlek, vanligtvis 16px. Du kan dock ställa in 1rem lika med 10px (eller något annat värde) för enklare beräkningar genom att justera teckenstorleken på översta nivån.
Flexibla bilder
Bilder är ett viktigt problem när man designar även den mest grundläggande layouten. Du måste alltid se till att dimensionera dem rätt så att de passar designen. Dessutom skalas de som standard inte med ändringar i visningsporten. Så du bör använda % för dimensionerna på dina bilder, tillsammans med maximal bredd fast egendom.
Mediafrågor
Du kan väcka responsiva webbplatser till liv genom att använda mediafrågor. Vätskenät är bra att börja med, men du kommer att upptäcka att det finns några punkter där layouten börjar gå sönder. Genom att lägga till brytpunkter för dessa vyportsbredder anpassas layouten för olika enheter. Mediefrågor hjälper dig att selektivt tillämpa CSS baserat på resultaten av mediefunktionstester. Du kan utforska nya CSS-funktioner för att göra en responsiv webbplats på kortare tid.
Principer för responsiv webbdesign
Även om responsiv webbdesign är en räddare när det kommer till problem med flera skärmar, kanske du inte har en fast fysisk begränsning att hänvisa till. Därför finns det sex grundläggande principer för responsiv webbdesign att komma igång med när du designar en responsiv layout.
Använd innehållsbaserade brytpunkter
En av de grundläggande designprinciperna säger att din webbdesign ska stödja innehållet, inte tvärtom. Medieinnehåll som videor, fotografier och textinnehåll som långa och korta webbkopior bör renderas optimalt på alla skärmar. Nyckeln till responsiv webbdesign är att använda innehållsbaserade brytpunkter snarare än enhetsbaserade.
Välj webbteckensnitt och systemteckensnitt klokt
Webbteckensnitt ser fantastiska ut! Du har många alternativ för att modifiera din design med snygga webbteckensnitt. Men du bör veta att webbläsare måste ladda ner varje webbteckensnitt. Fler webbteckensnitt, mer nedladdningstid. Däremot är systemteckensnitt blixtsnabba. Om användaren inte har ett namngivet systemteckensnitt på sin lokala enhet, kommer det att falla tillbaka till nästa teckensnitt i teckensnittsfamiljen. Se därför till att ta hänsyn till laddningstid och designbehov när du väljer typsnitt.
Optimera bitmappsbilder och vektorer
Har du olika ikoner på din webbplats som stödjer innehållet? Det är ofta bra att använda ett bitmappsformat om dina ikoner har många detaljer. Å andra sidan är vektorformat vägen att gå för ikoner som skalas upp och ner snyggt. Vektorer är ofta små, men nackdelen är att vissa äldre webbläsare kanske inte stöder dem. Det finns också fall då vektorer är tyngre än bitmappar, till exempel när bilden är mycket detaljerad. Se därför alltid till att du optimerar dina bitmappsbilder och vektorer innan de går online.
Genomför tester för Responsive First Fold
Den första vikningen av en webbplats är vyn som besökarna ser när den laddas först, innan någon rullning. Den innehåller ofta en hjältesektion med ett responsivt navigeringsfält, inledande kopia och media och en CTA. Lyhördhet är inte bara begränsad till mobila enheter. Du bör också överväga surfplattor, spelkonsoler och andra skärmar. Så nyckeln är att utföra frekventa tester åtminstone för den första vikningsvyn av webbplatsen. Du kan använda Chrome DevTools (Lighthouse) för att testa webbsidans kvalitet.
Dölj inte innehåll på mindre skärmar
Många människor brukade anta att mobilanvändare alltid har bråttom och letar efter bra information, medan datoranvändare är mer intresserade av långformat innehåll. Vi inser nu att detta inte är sant i dagens värld. Människor använder mobila enheter överallt och letar efter komplett innehåll och full tillgång till alla tjänster. Du bör se till att du, istället för att dölja innehåll, hanterar layouten och brytpunkterna för att presentera det så enkelt och enkelt som möjligt.
Hantera layouten med kapslade objekt
Att bygga en webbplatslayout och placera element korrekt kräver en anständig mängd ansträngning. Du kan också ha haft svårt att hantera många element som är beroende av varandra. Därför bör du överväga att slå in relaterade element i en behållare eller
Responsiv design: Ska du gå med skrivbordet först eller mobilt först?
Desktop first-metoden innebär att du skriver CSS för stora skärmar och sedan tillämpar mediefrågor för att krympa designen för mindre skärmar. Däremot innebär den första mobilansatsen att skriva CSS för mobila enheter, med mindre skärmar, och sedan tillämpa mediefrågor för att utöka designen för större skärmar. Huvudfokus är att reducera webbplatsen och apparna till det absolut nödvändigaste.
Om du precis har börjat med responsiv webbutveckling bör du gå för skrivbordet-först, eftersom du i slutet av dagen måste stapla behållaren på varandra på mobila enheter. Även om det är helt och hållet ett personligt beslut, hjälper Mobile First-metoden dig att strukturera HTML-koden på ett bättre sätt medan desktop-first-metoden hjälper dig med layout- och avståndstekniker.
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
