Responsiva webbdesignprinciper

Numera är det vanligt att bygga en webbplats eller app som anpassar användargränssnittet beroende på webbläsaren eller enheten. Det finns två metoder för att uppnå detta mål. Det 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 jakten på ett tillförlitligt, framtidssäkert tillvägagångssätt myntades den responsiva-eller adaptiva-designen. Det fokuserar på att bygga en enda version av din layout som anpassas till olika webbläsare eller enheter automatiskt.

I den här artikeln lär vi oss om responsiv webbdesign och de grundläggande principerna som hjälper dig att göra en fantastisk webbplats.

Lyhörd Webbdesign Ingredienser

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.

Vätskelayouter

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 element en fast bredd. Använd också procent (%), visningshö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å förändringar och börja dra nytta av lyhörd designteknik.

Responsiva enheter

När du går till mer avancerad CSS ser du ofta 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 16 pixlar. 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å högsta nivå.

Flexibla bilder

Bilder är en viktig fråga när de utformar även den mest grundläggande layouten. Du måste alltid vara noga med att dimensionera dem ordentligt så att de passar designen. Som standard skala de inte med ändringar i visningsporten. Så du bör använda % för måtten på dina bilder, tillsammans med maximal bredd fast egendom.

Du kan väcka responsiva webbplatser till liv med hjälp av mediefrågor. Vätskegaller ä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. Lägga till brytpunkter för dessa visningsportbredder stämmer 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.

Responsiva webbdesignprinciper

Även om responsiv webbdesign är en frälsare när det gäller problem med flera skärmar, har du kanske inte en fast fysisk begränsning att referera till. Därför finns det sex grundläggande responsiva webbdesignprinciper att komma igång med när du utformar 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ång och kort webbkopia ska återges 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

Webfonter ser fantastiska ut! Du har många alternativ för att ändra din design med snygga webbteckensnitt. Men du bör veta att webbläsare måste ladda ner varje webbsnitt. Fler webbfonter, mer nedladdningstid. Däremot är systemteckensnitt blixtsnabba. Om användaren inte har ett namngivet systemteckensnitt på sin lokala enhet faller det tillbaka till nästa typsnitt i typsnittsfamiljen. Se därför till att överväga laddningstid och designkrav när du väljer teckensnitt.

Optimera bitmappsbilder och vektorer

Har du olika ikoner på din webbplats som stöder innehållet? Det är ofta bra att använda ett bitmappformat om dina ikoner har mycket detaljer. Å andra sidan är vektorformat vägen för ikoner som snyggt skala upp och ner. Vektorer är ofta små, men nackdelen är att vissa äldre webbläsare kanske inte stöder dem. Det finns också fall där 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.

Utför tester för Responsive First Fold

Den första viken på en webbplats är den vy som besökare ser när den laddas första gången, innan någon rullning. Den innehåller ofta en hjältesektion med en responsiv navigeringsfält, inledande kopia och media, och en CTA. Responsiviteten är inte bara begränsad till mobila enheter. Du bör också överväga surfplattor, spelkonsoler och andra skärmar. Så, nyckeln är att genomföra täta test åtminstone för den första vikningen av webbplatsen. Du kan använda Chrome DevTools (Fyr) för att testa webbsidans kvalitet.

Dölj inte innehåll på mindre skärmar

Många brukade anta att mobilanvändare alltid har bråttom och letar efter bitstor information, medan skrivbordsanvändare är mer intresserade av långt innehåll. Vi inser nu att detta inte är sant i dagens värld. Människor använder mobila enheter överallt, 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 layout och brytpunkter för att presentera det så enkelt och enkelt som möjligt.

Hantera layouten med hjälp av kapslade objekt

Att bygga en webbplatslayout och placera element korrekt kräver en anständig 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. Detta hjälper till att minska uppgiften att lägga ut flera element till ett där du bara lägger ut ett enda element.

Responsiv design: Ska du gå med Desktop First eller Mobile First?

Skrivbordets första tillvägagångssätt 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 det mobila första tillvägagångssättet 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 minska webbplatsen och apparna till det absolut nödvändigaste.

Om du precis har börjat med responsiv webbutveckling bör du gå till desktop-first när du är i slutet av dagen måste du stapla behållaren en efter en på mobilen enheter. Även om det helt är ett personligt beslut, hjälper det mobila första tillvägagångssättet dig att strukturera HTML på ett bättre sätt medan det första skrivbordet kommer att hjälpa dig med layout och avstånd tekniker.

De 6 bästa kurserna för att lära dig UX -design

Om du vill lära dig UX -design eller förbättra dina färdigheter, här är de sex bästa onlinekurser du kan ta.

Läs Nästa

Om författaren