Responsive webdesignprincipper

I dag er det almindelig praksis at bygge et websted eller en app, der justerer brugergrænsefladen afhængigt af browseren eller enheden. Der er to tilgange til at nå dette mål. Den første involverer oprettelse af forskellige versioner af dit websted eller din app til forskellige enheder. Men det er ineffektivt og kan føre til uforudsigelige fejl.

I en søgen efter en pålidelig, fremtidssikret tilgang blev det responsive-eller adaptive-design opfundet. Det fokuserer på at opbygge en enkelt version af dit layout, der automatisk tilpasser sig forskellige browsere eller enheder.

I denne artikel lærer vi om responsivt webdesign og de grundlæggende principper, der hjælper dig med at lave et fantastisk websted.

Responsive webdesign ingredienser

Responsivt webdesign er ikke så kompliceret som det lyder. Det er et sæt praksis, du kan bruge, når du skriver CSS, ikke en separat teknologi, som du skal lære fra bunden. Du følger måske allerede flere af disse principper uden at vide det. Du kan forstå responsivt webdesign ved at udforske dets fire ingredienser: flydende layout, responsive enheder, fleksible billeder og medieforespørgsler.

Væskelayout

Med et flydende layout kan du oprette websider, der tilpasser sig den aktuelle visningsports bredde og højde. Almindelig praksis omfatter brug af max-bredde ejendom i stedet for at give et element en fast bredde. Brug også procent (%), visningshøjde (vh) eller visningsportens bredde (vw) hjælper med at forbedre tilpasningsevne, der ikke er mulig med pixels (px). Så næste gang du bygger et layout, skal du sørge for at introducere disse små ændringer og begynde at drage fordel af responsive designteknikker.

Responsive enheder

Når du flytter til mere avanceret CSS, vil du ofte se brugen af rem og em enheder for længde i stedet for px enheder. Dette er fordi rem enhed gør det super let at skalere hele layoutet. Som standard er 1rem lig med 16px, fordi det er proportional med elementets skriftstørrelse, typisk 16px. Du kan dog indstille 1rem lig med 10px (eller enhver anden værdi) for lettere beregninger ved at justere skriftstørrelsen på øverste niveau.

Fleksible billeder

Billeder er en vigtig bekymring, mens de designer selv det mest grundlæggende layout. Du skal altid passe på at få dem til at passe ordentligt, så de passer til designet. Som standard skaleres de ikke med ændringer i visningsporten. Så du skal bruge % for dimensionerne på dine billeder sammen med max-bredde ejendom.

Du kan give responsive websteder liv ved hjælp af medieforespørgsler. Flydende net er gode til at starte med, men du vil opdage, at der er et par punkter, hvor layoutet begynder at bryde sammen. Tilføjelse af brydepunkter for disse viewportbredder indstiller layoutet til forskellige enheder. Medieforespørgsler hjælper dig med selektivt at anvende CSS baseret på resultaterne af mediefunktionstest. Du kan udforske nyt CSS -funktioner til at lave et responsivt websted på kortere tid.

Responsive webdesignprincipper

Selvom responsivt webdesign er en frelser, når det kommer til problemer med flere skærme, har du muligvis ikke en fast fysisk begrænsning at referere til. Derfor er der seks grundlæggende responsive webdesignprincipper at komme i gang med, når du designer et responsivt layout.

Brug indholdsbaserede brydepunkter

Et af de grundlæggende designprincipper siger, at dit webstedsdesign skal understøtte indholdet, ikke omvendt. Medieindhold som videoer, fotografier og tekstindhold som lang og kort webkopi skal gengives optimalt på alle skærme. Nøglen til responsivt webdesign er at bruge indholdsbaserede breakpoints frem for enhedsbaserede.

Vælg webskrifttyper og systemfonte klogt

Webskrifttyper ser fantastiske ud! Du har mange muligheder for at ændre dit design med seje webfonte. Men du skal vide, at browsere skal downloade hver webskrifttype. Flere webskrifttyper, mere downloadtid. I modsætning hertil er system skrifttyper lynhurtige. Hvis brugeren ikke har en navngivet systemskrifttype på sin lokale enhed, falder den tilbage til den næste skrifttype i skrifttypefamiliestakken. Sørg derfor for at overveje indlæsningstid og designkrav, når du vælger skrifttyper.

Optimer bitmapbilleder og vektorer

Har du forskellige ikoner på dit websted, der understøtter indholdet? Det er ofte god praksis at bruge et bitmapformat, hvis dine ikoner har mange detaljer. På den anden side er vektorformater vejen til ikoner, der pænt skalerer op og ned. Vektorer er ofte små, men ulempen er, at nogle ældre browsere muligvis ikke understøtter dem. Der er også tilfælde, hvor vektorer er tungere end bitmaps, f.eks. Når billedet er meget detaljeret. Sørg derfor altid for, at du optimerer dine bitmapbilleder og vektorer, før de går online.

Udfør tests for Responsive First Fold

Den første fold af et websted er den visning, som besøgende ser, når det først indlæses, inden der rulles. Det indeholder ofte en heltsektion med en responsiv navigationslinje, indledende kopi og medier og en CTA. Responsivitet er ikke kun begrænset til mobile enheder. Du bør også overveje tablets, spillekonsoller og andre skærme. Så nøglen er at udføre hyppige tests i det mindste for den første foldvisning af webstedet. Du kan bruge Chrome DevTools (Fyrtårn) for at teste websidens kvalitet.

Skjul ikke indhold på mindre skærme

Mange plejede at antage, at mobilbrugere altid har travlt og leder efter bitstore oplysninger, mens desktop-brugere er mere til langformet indhold. Vi erkender nu, at dette ikke er sandt i nutidens verden. Folk bruger mobile enheder overalt og leder efter komplet indhold og fuld adgang til alle tjenester. Du bør sikre, at du i stedet for at skjule indhold styrer layoutet og breakpoints for at præsentere det så let og ubesværet som muligt.

Administrer layoutet ved hjælp af indlejrede objekter

At bygge et stedlayout og placere elementer korrekt kræver en anstændig indsats. Du har måske også oplevet svært ved at styre en masse elementer, der er afhængige af hinanden. Derfor bør du overveje at indpakke relaterede elementer i en beholder eller. Dette hjælper med at reducere opgaven med at lægge flere elementer ud til et, hvor du blot lægger et enkelt element ud.

Responsivt design: Skal du gå med desktop først eller mobil først?

Den første tilgang til skrivebordet betyder, at du skriver CSS til store skærme og derefter anvender medieforespørgsler for at formindske designet til mindre skærme. I modsætning hertil involverer den mobile første tilgang at skrive CSS til mobile enheder med mindre skærme og derefter anvende medieforespørgsler for at udvide designet til større skærme. Det primære fokus er at reducere webstedet og apps til det absolutte væsentlige.

Hvis du lige er startet med responsiv webudvikling, skal du gå til desktop-first tilgang som ved slutningen af ​​dagen, bliver du nødt til at stable containeren efter hinanden på mobilen enheder. Selvom det helt er en personlig beslutning, hjælper den første mobile tilgang dig med at strukturere HTML på en bedre måde, mens den desktop-første tilgang hjælper dig med layout og afstand teknikker.

De 6 bedste kurser til at lære UX -design

Hvis du ønsker at lære UX -design eller forbedre dine færdigheder, er her de seks bedste online kurser, du kan tage.

Læs Næste

Om forfatteren