Før du bruker for lang tid på å vurdere eksakte skjermoppløsninger for designet ditt, bør du huske at all moderne webdesign er responsiv, noe som betyr at den er konstruert for å tilpasse seg på tvers av forskjellige skjermoppløsninger. Med ett design må du støtte alt fra de minste mobile skjermene til ultra HD-stasjonære skjermer.
Med Responsivt webdesign, oppretter du mer generelle mobil-, nettbrett- og skrivebordsoppsett. Når og hvordan hvert sideelement skifter på plass for disse layoutene, bestemmes av spesielle brytepunkter skrevet inn i din CSS. Disse brytpunktene bestemmes av visse vanlige skjermoppløsninger.
Selv om du ikke vil målrette mot spesifikke oppløsninger eller sette opp en fast størrelse for designene dine, vil du vurdere skjermen oppløsninger for å etablere bruddpunkter og skape jevne overganger slik at nettstedet ditt ser bra ut på alle enheter og skjerm størrelse.
Vanlige skrivebordsoppløsninger
- 1280x720 Standard HD - Du kjenner kanskje denne bedre som 720p. Det var standard HD-oppløsning da HD først ble vanlig. Du vil sannsynligvis ikke finne mange nye skjermer som bruker denne oppløsningen, men det er mange av dem fremdeles i naturen fra de var mer populære.
- 1366x768 - Det er noe av en uvanlig oppløsning, men det er veldig populært på mindre bærbare datamaskiner og noen nettbrett. Hvis du har å gjøre med lavere ende Chromebook, det er en god sjanse for at dette er oppløsningen du målretter mot.
- 1920x1080 Den vanligste - Når du tenker på skrivebord, har du sannsynligvis å gjøre med 1920x1080, bedre kjent som 1080p. Denne oppløsningen er absolutt overalt. De fleste stasjonære skjermer er fortsatt 1080p, og det er også mange bærbare datamaskiner i full størrelse. Du finner også en anstendig andel nettbrett i 1080p i landskapet.
- 2560x1440 - 1440p er en annen merkelig mellomgrunn i skjermoppløsningsbildet. Det er høyere enn hva du vil vurdere 2k, men det er ikke helt 4k. Når det er sagt, er det en vanlig løsning i spillmonitormarkedet, og det er et rimelig alternativ til å gå full 4k. Avhengig av nettstedet ditt, kan det være verdt å støtte 1440p eller ikke.
- 3840x2160 Den nærmeste fremtiden - Dette er full 4k eller Ultra HD. Mens 4k vanligvis er reservert for avanserte PC-er nå, faller prisene, grafikkteknologien forbedres, og etterspørselen etter 4k drives av TV-markedet, der det er mye mer vanlig. Det er trygt å anta at i løpet av de neste årene vil 4k lett overgå 1080p som de facto-standarden, så det er absolutt verdt å regne med 4k nå.
Vanlige nettbrett / landskapsoppløsninger
Nettbrett er kanskje ikke så populære som de en gang var, og økende telefonstørrelser sammen med konvertible bærbare datamaskiner ser ut til å ha kuttet betydelig i markedsandelen. Likevel, overføring av nettbrettoppløsninger overlapper betydelig med stasjonære og bærbare datamaskiner. Det kan hende du kan bruke nettbruddpunkter for å lage brytepunkter for visse plagsomme elementer som ikke passer riktig i visse oppløsninger.
- Du bør absolutt ta nettbrettoppløsninger i betraktning for enheter som holdes i stående modus. Ikke alle vil surfe på nettbrettet sitt i landskap, så du bør legge til minst ett brytpunkt for en vanlig nettbrett som holdes i portrett.
- 1280x800 En oppløsning som pleide å være vanlig - Eldre nettbrett, nedre tabletter og mindre nettbrett har ofte noen av Amazons Fire-nettbrett, og de bruker fortsatt 1280x800. Dette er en av de siste virkelig mobile oppløsningene på nettbrett.
- 1920x1200 Vanlig på 7 "og 8" tabletter - I landskapet kan du stole på de samme brytpunktene som 1080p, mesteparten av tiden. Men når du ser en av disse i landskapet, er situasjonen mye annerledes. Denne oppløsningen er vanlig blant mange 7 og 8-tommers nettbrett, inkludert Amazon Fire.
- 2048x1536 Apple-tabletter -Dette er Apples vanligste nettbrettoppløsning. Det ligner på 1440p for å gjøre veldig liten forskjell, men igjen er portrettet uvanlig. I alle fall er det en god ide å teste nettstedet ditt med denne oppløsningen for å sikre at ingenting rart skjer på iPads.
Nettbrett med høyere oppløsning begynner å komme inn på skrivebordet. Mesteparten av tiden trenger du ikke engang å redegjøre for dem fordi oppløsningen faller innenfor et område du allerede har redegjort for. Det er alltid en god ide å teste, for å være helt sikker.
Vanlige mobiloppløsninger
Mobilenheter er lett de mest kompliserte å håndtere. Det er et så mangfoldig utvalg av enheter, inkludert eldre som fremdeles er i bruk. Det er ikke lett å dekke dem alle. Derfor er mobil-første design så populær. Filosofien er enkel. Start med den enkleste mobile designen først, og bygg den videre for større og større skjermer. På denne måten fungerer selv de eldste og minste enhetene, men med mindre innhold og færre funksjoner. Nettstedet er ikke hindret, det viser bare bare den viktigste og mest tilgjengelige informasjonen først.
Her er et interessant triks for håndtering av telefoner; snu skrivebordsoppløsningen på siden. Visst, det er uvanlige avvikere, men de fleste nåværende telefoner følger dette mønsteret.
- 720x1280 vanlig på eldre enheter - i en årrekke var 720p på siden den vanligste standarden for en mobil enhet. I så fall trenger du ikke å bekymre deg for liggende modus, siden det er det samme som skrivebordet 720p. Bare dekk portrettoppløsningen med en bredde på 720 piksler.
- 1080x1920 midtveien - 1080p har vært standarden i veldig lang tid. Det er fortsatt veldig vanlig på mellomstore enheter. Hvis du bare vil støtte en mobiloppløsning, er dette det.
- 1440x2560 nåværende topp-end - Mobile enheter blir stadig større, og skjermer blir stadig høyere og høyere oppløsninger. 1440p er en interessant standard fordi det er en rekke skjermbredder - lengder i dette tilfellet - som faller innenfor det området. På både stasjonære og mobile maskiner er den vanligste 1440x2560. Det gir skjermen det vanlige 16: 9-sideforholdet. På mobil betyr det litt mindre enn stasjonære datamaskiner fordi lengden på enheten ikke påvirker designene dine mye.
Før du lykkelig bare støtter tre mobile oppløsninger, bør du også innse at noen bruker latterlig gamle telefoner med små skjermer. Du bør alltid bygge i en bunn minimal oppløsning for å sikre at nettstedet ditt ser bra ut selv for noen som bruker en telefon fra flere år tilbake.
Enkle tips å huske på
Det er lett å ta en rekke fakta om skjermoppløsninger, avrenning og begynne å spotte design, og det er akkurat når du kommer i trøbbel. Det er noen viktige ideer å huske på når du designer et nettsted, og de gjelder i de fleste, om ikke alle situasjoner.
- Responsivt design er flytende - Du kan føle tilbøyeligheten til å bygge et stort utvalg av brytpunkter i CSS for å ta hensyn til alle mulige skjermstørrelser og situasjoner. Det er en fin måte å gjøre deg gal på. Responsiv webdesign er ment å være fleksibel nok til å fylle ut hull og uregelmessigheter. Hvis du finner ut at du definerer for mange statiske tall, enten de er i mediespørsmål eller for elementene selv, er du sannsynligvis på vei mot feil vei.
- Folk maksimerer ikke alltid nettleseren sin - Denne typen går hånd i hånd med forrige punkt. Du kan design for skjermstørrelser, men når noen ikke maksimerer nettleservinduet sitt, går alt som røyker opp. Ved å holde ting i design flytende, kan du unngå problemer med forskjellige nettleservinduestørrelser.
- Test alt - Prøv å bryte nettstedet ditt. Det er den eneste måten du skal finne alle feilene og uoverensstemmelsene som vil ødelegge den besøkendes opplevelse. Chrome har innebygde verktøy for å teste enhetsoppløsninger med en full liste over populære enheter å jobbe med. Du har alltid muligheten til å dra nettleservinduet til forskjellige størrelser selv for å se både hvordan nettstedet ser ut i forskjellige størrelser og hvordan det tilpasser seg og går i stykker.
- Ikke forvent at brukerne skal ha det nyeste og beste - Dette går tilbake til forrige punkt om eldre telefoner og små oppløsninger. Du kan ikke forvente at folk skal ha nye enheter. Det gjelder både skjermoppløsning og prosessorkraft. Laster inn et nettsted med for mye grafikk og for mye JavaScript er en god måte å få folk med en treg enhet til å forlate og aldri komme tilbake.