Jeg utvikler en webapplikasjon som er ganske informasjonstung. Dette betyr at hver piksel som er tilgjengelig på skjermen for visning hjelper mye, for å unngå brukergrensesnittet ser for rotete ut og viser relevante data.
Jeg lurte på: hvilken er den «vanlige» skjermoppløsningen? For mange år siden var det noe sånt som 1024 × 768, men i dag må det være noe mye høyere. Jeg kan ikke stole på det jeg bruker som jeg er en utvikler, og jeg har sannsynligvis større skjermer og oppløsning enn den gjennomsnittlige Joe-brukeren.
Så, hvor kan jeg finne den for øyeblikket anbefalte oppløsningen for webapps?
Kommentarer
- Se dette spørsmålet på nettstedet til webansvarlige – webmasters.stackexchange.com/questions/2494/…
- Du bør ikke ‘ ikke bruker skjermoppløsning for å styre beslutningene dine, du må vite størrelsen på nettleservinduene. Spesielt når skjermer blir hu ge deg kan ikke anta at folk tar en nettleser i fullskjerm; det ville være for stort til å lese de fleste nettsteder.
- Se også dette spørsmålet angående fast bredde vs flytende layout .
- Å tenke i form av skjermoppløsning, som om det er en statisk parameter, høres anakronistisk ut. @MonicaCellio fikk poenget riktig. Eiendomstildeling for en applikasjon er dynamisk og er i brukerens hender.
- Merk: Med responsiv design i økende grad har mange mennesker fått med seg at det også er viktig å vurdere hva som er en god maksimal kolonne bredde, og at lesbarheten til tekst ofte kan sikres ved å nærme seg bredden på innholdet som er spesifikt for skriftstørrelsen, dvs. 35-40em for en solid tekstbredde.
Svar
Det kommer virkelig an på hvor du er i verden. Over hele verden er 1366×768 fremdeles den vanligste, men 1920×1080 er den eneste oppløsningen som faktisk øker i bruk (antagelig fordi dette ser ut til å være standard widescreen for moderne bærbare datamaskiner).
Nettstedet StatCounter.com bør hjelpe deg med å få litt ytterligere kunnskap om dette.
MEN , husk at bare fordi visse oppløsninger er vanligere enn andre, tar det ikke hensyn til hvor bredt brukeren har nettleseren sin. Dessverre er det få kjente målinger for denne statistikken (Google Analytics brukte for å gi dette, men har sluttet å støtte den).
Kommentarer
- Også verdensomspennende gjennomsnitt for denne typen data kan (vil) ikke være de samme som brukerbasen din. Inntil du prøver på de faktiske brukerne dine, trenger du ikke ‘ vet ikke hva de ‘ bruker. Derfor er det beste alternativet å designe layouten slik at den fungerer med flere (og varierende) oppløsninger.
- For informasjon om fordelingen av skjermoppløsning blant Android- og iOS-smarttelefoner og nettbrett, se Oppløsning ‘ seksjon mot slutten av opensignalmaps.com/reports/fragmentation.php . Beleilig her er skjermoppløsningen mer sannsynlig å tilnærme visnings- / nettleservinduet på smarttelefoner og nettbrett enn på bærbare datamaskiner og stasjonære datamaskiner. Uhensiktsmessig for Android, reflekteres plattformen ‘ fragmentering ganske sterkt i den brede fordelingen av skjermoppløsninger. Dette vil sannsynligvis gjøre flytende layout for mobile enheter til en god ide.
- Akkurat som en oppdatering, har 1366×768 gått 1024×768 ganske mye siden dette svaret ble lagt ut.
- @DangerZone Bra poeng . Dessverre tilbyr ikke StatCounter ‘ t lenker til ‘ gjeldende ‘ da de alltid krever suffiks datoperiode (derav flere redigeringer av dette svaret gjennom årene!). Jeg har endret svaret med oppdatert statistikk. Jeg antar at jeg ‘ jeg må gjøre det samme om et år eller så også!
Svar
Husk at bærbare datamaskiner og stasjonære datamaskiner ikke lenger er de eneste nettaktiverte enhetene. IPad har en oppløsning på 1024×768, iPhone 4 har en oppløsning på 960×640, forutsatt at du bruker dem i liggende modus.
Kommentarer
- Afaik the iPhone 4 gjengir sider som om den hadde den gamle 480 * 320-oppløsningen. Sider på mine 4 er ‘ t halvparten så store som på en 3GS. Ekstra oppløsningen brukes bare til gjengivelse av skrift / bilder er det jeg ‘ kommer til.
- Helt gyldig punkt. Skjermbredden på 960 piksler forblir relevant selv når skjermstørrelsene på skrivebordet øker, fordi mange håndholdte enheter også kan vise denne størrelsen.La alene det faktum at nettsteder bare er uleselige når de er veldig brede (1600+).
Svar
Valget av minimum skjermoppløsning kommer alt ned til hvor mange brukere du er villig til å ekskludere.
Hvis du ikke har en historie med oppløsningsdata for dine spesifikke brukere. Ett alternativ er å bruke offentlig, global bruksstatistikk som en retningslinje. Ved å bruke en slik kilde til globale data opprettet jeg følgende graf for å hjelpe med å formidle tilstanden til skjermbredder på skrivebordet på et øyeblikk. / p>
Svar
«men i dag må det være noe mye høyere»
Hvert svar her ser ut til å ignorere hele mobilverdenen.
Visst, stasjonære skjermer blir større. Men alle bruker også mobile enheter. Så mye av nettet er nå tilgjengelig på telefoner og nettbrett.
Adaptivt design er virkelig veien å ta.
Kommentarer
- JA. Dette er nøkkelpunktet. Flytende webdesign er viktig fordi så mange mennesker har tilgang til nettsteder fra telefoner og nettbrett i disse dager. Oppløsningstrenden er fragmentering, ikke utvidelse.
Svar
Hvorfor ikke designer du adaptivt for «uansett du har tilgjengelig «?
Med javascript kan du finne ut størrelsen på nettleservinduet og gjøre noen stilendringsendringer. Hvis du for eksempel har en grafisk rik, stor bildebakgrunn med en kolonne på 960 px, er bakgrunnsbildet er ikke nødvendig for de som kjører 1024-768, så du trenger ikke å laste den inn. Du kan også endre skriftstørrelsen for å utnytte den tilgjengelige eiendommen på skjermen best mulig.
Svar
Mest populære oppløsningen i 2011 er 1280×800. 18,09% av brukerne på internett bruker den.
Her er topp 10 oppløsninger for 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Kommentarer
- +1 for referansen, men med 1024×768 tett bak og å være den laveste av de to toppoppløsninger, burde dette kanskje ha høyere hensyn til tross for litt lavere prosentandel.
- 1024 vil være rundt en stund + nye mobile enheter. Så jeg vil anbefale å designe nettsteder for denne oppløsningen hvis du ikke planlegger å gjøre strekkbar design.
Svar
Jeg er enig med Jon i at man bør være forsiktig med å bruke fullskjermoppløsningen som base når man designer webapper. Han har også rett når han uttaler at widescreen-varianten av 768 er veldig vanlig i disse dager.
Jeg har nylig opplevd noen gode grunner til å redusere min egen policy for skjermoppløsning. TV-er og multimedia-bærbare datamaskiner bruker nå HD-standarden som oppløsning. Det betyr at det er en god sjanse for at flere brukere har 1280 × 720 som oppløsning. Å målrette 768 som høyde kan være for mye for mange brukere.
Svar
Hvis du vil være trygg med skrivebord / bærbare skjermer med statisk layout, må du fortsette å bruke et minimum av 1024×768. Men det bedre alternativet er å utforme et flytende (fleksibelt) oppsett.
Svar
Microsoft postet nylig deres telemetrodata i dette området for brukere av Windows 7 :
Du kan se at (i det minste for brukere som fremdeles er i oppgraderingssyklusen), det er en stor mengde brukere som kjører 16: 9 og 16:10 skjermer i stedet for 4: 3 (og antallet av dem kjører på 1366 × 768).
Kommentarer
- Synes at selv internt ignorerer Microsoft mobillandskapet.;)
Svar
Ja, prøv å vurdere et fleksibelt oppsett. Hvis du planlegger å bruke alle tilgjengelige piksler, er å dekke hele skjermen den beste løsningen, med må du bruke javascript. Du bør gå gjennom Responsive Web Design fra ALA og ta en titt på eksempel . Når ser på dette eksemplet, prøv å endre størrelsen på nettleseren din og se hvordan innholdet reagerer. På denne måten kan nettstedet ditt se bra ut på hvilken som helst skjerm, enten det er stasjonær, bærbar datamaskin, nettbrett på telefonen.
Kommentarer
- Vær oppmerksom på om du går nedover banen for å bruke hver eneste tilgjengelige piksel, kan det gjøre teksten vanskeligere å lese av leserne dine.
Svar
Jeg har målrettet mot 1280 X 1024, med et oppsett vil det være adaptivt hvis mobilbegrensninger er en faktor.
Ellers henviser jeg vanligvis til analyse, og prøver å være oppmerksom på de beste oppløsningene for gitt nettsted.
Svar
Noen ting du bør vurdere:
- Hvem er denne appen til? Hvis det er internt vendt (dvs. bedriftsmiljø), snakk med IT og se hvilken oppløsning medarbeiderskjermbildene er satt på. Se spesielt på de ansatte som ville jobbe mest i appen.
- Hvis det » en offentlig vendt app, tenk på hvilke data du har om brukernes oppløsninger. Hvis du redesigner, sjekk analysene på det nåværende nettstedet og få en følelse av hvilke oppløsninger brukerne kjører. Du vil kanskje legge merke til et mønster her (dvs. folk har en tendens til å ha veldig høye oppløsninger siden de er strømbrukere osv.), Men sjansen er stor for at det «vil være overalt.
- Tenk på dataene du er presentere. Hvis det er mange rutenett, er det kanskje best med en flytende layout. Da kan brukeren strekke skjermen for å vise mer av dataene de trenger.
Design for 1024 er en trygg rute for på nettet, men det er lat hvis du ikke prøver å lære mer om brukerne dine før du tar en beslutning.
Svar
1024 * 768 skal fortsatt være som sunn fornuft. Ellers kommer det virkelig an på publikum. nettsted eller app for designere, for eksempel, bør du optimalisere for mye høyere oppløsning som 1680 * 1050.
Du bør teste det eller be fra ønsket publikum, men 1024 * 768 er fortsatt et must!
I en ideell verden ville det være forskjellige (CSS) stiler for forskjellige oppløsninger og enheter. 🙂
Kommentarer
- » Hvis du for eksempel lager et nettsted eller en app for designere, bør du velge timere for mye høyere oppløsning som 1680 * 1050. » De fleste ‘ designere ‘ har iPhones .
- @ DA01 – Dermed forskjellige CSS for forskjellige enheter.
- Det hjelper, men jeg adresserte hovedsakelig ‘ optimalisert for ‘. Ideelt sett ‘ optimaliserer for ‘ alle enheter.
Svar
Vanlige projektoroppløsninger:
- XGA = 1024 x 768 piksler
- WXGA = 1280 x 800 piksler
- HD = 1920 x 1080 piksler
- 4K = 4096 x 2160 oppløsning
Kommentarer
- Kan du utvide dette? Og hva mener du med projektoroppløsninger?
- eksempel: Hvis du har en PT-EX600U LCD-projektor, når du kobler den til datamaskinen, vil skjermoppløsningen endres til: 1028 x 768 piksler. / li>