Responsive webdesignprinsipper

I dag er det vanlig praksis å bygge et nettsted eller en app som justerer brukergrensesnittet avhengig av nettleseren eller enheten. Det er to tilnærminger for å nå dette målet. Den første innebærer å lage forskjellige versjoner av nettstedet eller appen din for forskjellige enheter. Men det er ineffektivt og kan føre til uforutsigbare feil.

I et søk etter en pålitelig, fremtidssikker tilnærming ble det responsive-eller adaptive-designet. Det fokuserer på å bygge en enkelt versjon av oppsettet ditt som tilpasser seg forskjellige nettlesere eller enheter automatisk.

I denne artikkelen lærer vi om responsivt webdesign og de grunnleggende prinsippene som vil hjelpe deg med å lage et fantastisk nettsted.

Responsive Web Design Ingredienser

Responsivt webdesign er ikke så komplisert som det høres ut. Det er et sett med praksis du kan bruke når du skriver CSS, ikke en egen teknologi som du må lære fra bunnen av. Du følger kanskje allerede flere av disse prinsippene uten å innse det. Du kan forstå responsivt webdesign ved å utforske de fire ingrediensene: flytende oppsett, responsive enheter, fleksible bilder og medieforespørsler.

Væskeoppsett

Med et flytende oppsett kan du opprette websider som tilpasser seg gjeldende bredde og høyde i visningsporten. Vanlig praksis inkluderer bruk av maks bredde eiendom i stedet for å gi en fast bredde til et element. Bruk også prosent (%), visningshøyde (vh) eller visningsportens bredde (vw) bidrar til å forbedre tilpasningsevnen som ikke er mulig med piksler (px). Så neste gang du bygger et oppsett, sørg for å introdusere disse små endringene og begynn å dra fordel av responsive designteknikker.

Responsive enheter

Når du går til mer avansert CSS, ser du ofte bruken av rem og em enheter for lengde i stedet for px enheter. Dette er fordi rem enhet gjør det superenkelt å skalere hele oppsettet. Som standard er 1rem lik 16px fordi det er proporsjonalt med elementets skriftstørrelse, vanligvis 16 piksler. Du kan imidlertid sette 1rem lik 10px (eller hvilken som helst annen verdi) for enklere beregninger, ved å justere skriftstørrelsen på toppnivå.

Fleksible bilder

Bilder er en viktig bekymring mens de designer selv den mest grunnleggende layouten. Du må alltid passe på å få dem riktig størrelse slik at de passer til designet. Som standard skalerer de ikke med endringer i visningsporten. Så du bør bruke % for dimensjonene til bildene dine, sammen med maks bredde eiendom.

Du kan gi responsive nettsteder liv ved å bruke mediespørsmål. Væskegitter er gode å begynne med, men du vil oppdage at det er noen få punkter hvor oppsettet begynner å bryte sammen. Når du legger til brytpunkter for disse visningsportbreddene, justeres oppsettet for forskjellige enheter. Medieforespørsler hjelper deg med å selektivt bruke CSS basert på resultatene av mediefunksjonstester. Du kan utforske nytt CSS -funksjoner for å lage et responsivt nettsted på kortere tid.

Responsive webdesignprinsipper

Selv om responsivt webdesign er en frelser når det gjelder problemer med flere skjermer, har du kanskje ikke en fast fysisk begrensning å referere til. Derfor er det seks grunnleggende responsive webdesignprinsipper å komme i gang med når du designer et responsivt oppsett.

Bruk innholdsbaserte brytpunkter

Et av de grunnleggende designprinsippene sier at nettsteddesignet ditt skal støtte innholdet, ikke omvendt. Medieinnhold som videoer, fotografier og tekstinnhold som lang og kort webkopi bør gjengis optimalt på alle skjermer. Nøkkelen til responsivt webdesign er å bruke innholdsbaserte brytpunkter i stedet for enhetsbaserte.

Velg Web Fonts og System Fonts Wisely

Nettfonter ser fantastiske ut! Du har mange alternativer for å endre designet ditt med kule nettfonter. Men du bør vite at nettlesere må laste ned hver webskrift. Flere webfonter, mer nedlastingstid. I kontrast er systemfonter lynraske. Hvis brukeren ikke har en navngitt systemfont på sin lokale enhet, faller den tilbake til neste skrift i skriftfamiliebunken. Sørg derfor for å vurdere lastetid og designkrav når du velger fonter.

Optimaliser bitmapbilder og vektorer

Har du forskjellige ikoner på nettstedet ditt som støtter innholdet? Det er ofte god praksis å bruke et bitmap -format hvis ikonene dine har mange detaljer. På den annen side er vektorformater veien for ikoner som pent skalerer opp og ned. Vektorer er ofte små, men ulempen er at noen eldre nettlesere kanskje ikke støtter dem. Det er også tilfeller der vektorer er tyngre enn bitmaps, for eksempel når bildet er veldig detaljert. Sørg derfor alltid for at du optimaliserer bitmapbildene og vektorene dine før de går på nettet.

Utfør tester for Responsive First Fold

Den første folden av et nettsted er visningen som besøkende ser når det først lastes inn, før noen ruller. Det inkluderer ofte en heltseksjon med en responsiv navigasjonslinje, innledende kopi og media, og en CTA. Responsivitet er ikke bare begrenset til mobile enheter. Du bør også vurdere nettbrett, spillkonsoller og andre skjermer. Så nøkkelen er å utføre hyppige tester i det minste for den første foldvisningen av nettstedet. Du kan bruke Chrome DevTools (fyr) for å teste kvaliteten på websiden.

Ikke skjul innhold på mindre skjermer

Mange pleide å anta at mobilbrukere alltid har det travelt og leter etter bittstor informasjon, mens stasjonære brukere er mer interessert i langformet innhold. Vi innser nå at dette ikke er sant i dagens verden. Folk bruker mobile enheter overalt, på jakt etter komplett innhold og full tilgang til alle tjenester. Du bør sørge for at du i stedet for å skjule innhold administrerer oppsettet og brytpunktene for å presentere det så enkelt og uanstrengt som mulig.

Administrer oppsettet ved hjelp av nestede objekter

Å bygge et nettstedslayout og plassere elementene riktig krever en anstendig innsats. Du kan også ha opplevd problemer med å håndtere mange elementer som er avhengige av hverandre. Derfor bør du vurdere å pakke inn relaterte elementer i en beholder eller. Dette bidrar til å redusere oppgaven med å legge ut flere elementer til et element der du legger ut bare et enkelt element.

Responsive Design: Skal du gå med skrivebordet først eller mobil først?

Den første tilnærmingen på skrivebordet betyr at du skriver CSS for store skjermer og deretter bruker mediespørringer for å krympe designet for mindre skjermer. I kontrast innebærer den første mobile tilnærmingen å skrive CSS for mobile enheter, med mindre skjermer, og deretter bruke mediespørringer for å utvide designet for større skjermer. Hovedfokuset er å redusere nettstedet og appene til det absolutt viktige.

Hvis du bare har begynt med responsiv webutvikling, bør du gå til desktop-first tilnærming som på slutten av dagen, må du stable beholderen en etter en på mobil enheter. Selv om det er helt en personlig beslutning, hjelper den første mobile tilnærmingen deg med å strukturere HTML på en bedre måte, mens den første skrivebordsmetoden vil hjelpe deg med layout og mellomrom teknikker.

De 6 beste kursene for å lære UX -design

Hvis du ønsker å lære UX -design eller forbedre ferdighetene dine, her er de seks beste online -kursene du kan ta.

Les neste

Om forfatteren