De beste Pixel Størrelser for bilder på nettsteder

Mobiltelefoner, nettbrett og dataskjermer har ulike bruksområder, brukere og dimensjoner, tigge spørsmålet for nettstedet utviklere: Hvilken størrelse bør bildene mine være? Hvis området skal være utformet for å bli besøkt og sett av 'standard' brukere på en widescreen-skjerm på 1680 x 1024 pikslers oppløsning, bør nettstedet størrelsen være skreddersydd for å passe i hovednettleservinduet. Hvis området er ment for bruk av mobile enheter, bør det være dimensjonert for en mye mindre skjerm.

Fluid vs Statiske utforminger

Den første vurdering er om ditt nettsted krever et sett dimensjon i piksler i det hele tatt. Ved hjelp av prosenter i stedet, kan du lage en "flytende" layout som re-størrelser innholdet områder dynamisk, avhengig av størrelsen på brukerens nettleservinduet. Når den brukes i kombinasjon med automatisk innpakning tekst, kan væske oppsett være det beste valget når du oppretter en nettside for standard skjermoppløsning samt mobile nettlesere. Fluid oppsett er oppnådd ved hjelp av "width = 100%" i innholdet CSS erklæring heller enn "width = 960 x", for eksempel.

Montering Standard skjermstørrelser

Å skape "faste" eller statisk oppsett, må bredden av hovedinnholdet divs, wrappers eller tabeller passer i en brukers nettleservindu, tar hensyn til både rullefeltet og nettleseren. Du ønsker også å vurdere å designe for de fleste besøkende. I 2014, 99 prosent av nettlesere bruker en skjermoppløsning på 1024 x 768 piksler eller høyere. Dette betyr at du kan designe for 1680-by-1024 piksler, men det er en god idé å satse på en middelvei. 960 piksler bred og 980 piksler bred er to idiotsikre bredder brukes til å vise innhold komfortabelt i nettleseren for alle som bruker en 1024 x 768 pikslers oppløsning eller høyere. Dette systemet skalerer også godt på mobile enheter som kan vise full nettsteder. Hvis dette er for smal, 1080 piksler er den neste beste bredde. Husk høyden av en standard nettleser vindu i en gitt oppløsning for å holde den viktigste informasjonen over "fold", eller det punkt der rulling er nødvendig.

Mobil Screens

Hvis du vil at nettstedet skal se bra ut på en rekke mobile enheter, vil du trenger for å designe spesielt for enheten eller opprette en spesiell stil-ark som brukes av mobile nettlesere for å vise en "mobil" versjon av websiden. En oppløsning på 240 x 320 piksler er en gjeldende standard for de fleste smarttelefoner og internett-ready mobile enheter som iPhone. Det anbefales å bruke prosenter eller 'flytende' oppsett her, men, som mange enheter støtter både liggende og stående modus.

The Golden Grid

Kanskje den beste system for å bestemme layout dimensjoner er gjennom bruk av et bæresystem. Rister beregne perfekt balanserte regioner innen en gitt bredde for å gi en retningslinje for hvordan størrelsen elementer innenfor din viktigste layout eller innholdsområdet. Disse elementene kan inkludere reklamebokser, sidebars, ad-plass eller avsnitt. Som et eksempel, en layout ved hjelp av en total bredde på 1080 piksler, og delt opp ved hjelp av den gylne nettet ville ha en venstre område for blogginnlegg som er 739 piksler bred og en høyre sidepanel som er 311 piksler bred, både ved hjelp av en 10 pixel margin. Sluttresultatet er en perfekt balansert og justert layout. Du kan eksperimentere med forskjellige nett ved å gå bæresystemet generator (se Ressurser).