Jeg udvikler en webapplikation, som er ret informationstung. Det betyder, at hver pixel, der er tilgængelig på skærmen til visning, hjælper meget for at undgå brugergrænsefladen ser for rodet ud og viser relevante data.
Jeg spekulerede på: hvad er den “almindelige” skærmopløsning? For mange år siden var det noget i retning af 1024 × 768, men i dag skal det være noget meget højere. Jeg kan ikke stole på, hvad jeg bruger som jeg, er en udvikler, og jeg har sandsynligvis større skærme og opløsning end den gennemsnitlige Joe-bruger.
Så hvor kan jeg finde den aktuelt anbefalede opløsning til webapps?
Kommentarer
- Se dette spørgsmål på webmastersiden – webmasters.stackexchange.com/questions/2494/…
- Du bør ikke ‘ ikke bruger skærmopløsning til at styre dine beslutninger; du skal kende størrelsen på browservinduer. Især når skærme får hu ge dig kan ikke antage, at folk tager en browser i fuld skærm; det ville være for stort til at læse de fleste websteder.
- Se også dette spørgsmål angående fast bredde vs væskelayout .
- At tænke i form af skærmopløsning, som om det er en statisk parameter, lyder anakronistisk. @MonicaCellio fik punktet rigtigt. Tildeling af fast ejendom til en applikation er dynamisk og er i brugerens hænder.
- Bemærk: Med responsivt design i stigning er mange mennesker klar over, at det også er vigtigt at overveje, hvad der er en god maksimal søjle bredde, og at læsbarheden af tekst ofte kan sikres ved at nærme sig bredden på det indhold, der er specifikt for skriftstørrelsen, dvs. 35-40em for en solid tekstbredde.
Svar
Det afhænger virkelig af, hvor du er i verden. På verdensplan er 1366×768 stadig den mest almindelige, men 1920×1080 er den eneste opløsning, der faktisk øges i brug (formodentlig fordi dette ser ud til at være standardwidescreen til moderne bærbare computere).
Hjemmesiden StatCounter.com skal hjælpe dig med yderligere viden om dette.
HVORDAN , husk at bare fordi visse opløsninger er mere almindelige end andre, tager det ikke højde for, hvor bredt brugeren har deres browser Desværre er der kun få kendte målinger til denne statistik (Google analytics plejede at levere dette, men er ophørt med at understøtte det).
Kommentarer
- Også verdensomspændende gennemsnit for denne type data (vil) muligvis ikke være de samme som din brugerbase. Indtil du prøver dine FAKTISKE brugere, donerer du ikke ‘ ved ikke, hvad de ‘ bruger. Derfor er dit bedste valg at designe dit layout til at arbejde i flere (og varierende) opløsninger.
- For oplysninger om fordelingen af skærmopløsning blandt Android- og iOS-smartphones og tablets, se Opløsning ‘ sektion mod slutningen af opensignalmaps.com/reports/fragmentation.php . Bekvemt her er skærmopløsningen mere tilbøjelige til at tilnærme visnings- / browservinduet på smartphones og tablets end på bærbare computere og desktops. Uhensigtsmæssigt for Android afspejles platformens ‘ fragmentering temmelig stærkt i den brede distribution af skærmopløsninger. Dette ville sandsynligvis gøre flydende layout til mobile enheder til en god ide.
- Ligesom en opdatering har 1366×768 overhalet 1024×768 med ganske lidt siden dette svar blev sendt.
- @DangerZone Godt punkt . Desværre tilbyder StatCounter ‘ t links til ‘ nuværende ‘ da de altid kræver suffikset a datointerval (dermed flere redigeringer af dette svar gennem årene!). Ive ændrede svaret med opdaterede statistikker. Jeg antager, at jeg ‘ jeg bliver nødt til at gøre det samme om et år eller deromkring!
Svar
Husk, at bærbare computere og desktops ikke længere er de eneste webbaserede enheder. IPad har en opløsning på 1024×768, iPhone 4 har en opløsning på 960×640, forudsat at du bruger dem i liggende tilstand.
Kommentarer
- Afaik the iPhone 4 gengiver sider som om den ville have den gamle 480 * 320 opløsning. Sider på mine 4 er ‘ t halvt så store som på en 3GS. Den ekstra opløsning bruges kun til gengivelse af skrifttyper / billeder er, hvad jeg ‘ kommer til.
- Helt gyldigt punkt. Skærmbredden på 960 pixel forbliver relevant, selv når skærmstørrelserne på skrivebordet øges, fordi mange håndholdte enheder også kan vise denne størrelse.Lad være med det faktum, at websteder bare er ulæselige, når de er meget brede (1600+).
Svar
Valget af minimum skærmopløsning kommer alt sammen ned til, hvor mange brugere du er villig til at ekskludere.
Hvis du har ikke en historie med opløsningsdata for dine specifikke brugere, en mulighed er at bruge offentlige, globale brugsstatistikker som en retningslinje. Ved hjælp af en sådan kilde til globale data oprettede jeg følgende graf for at hjælpe med at formidle tilstanden på skrivebordsskærmbredderne med et øjeblik.
Svar
“men i dag skal det være noget meget højere”
Hvert svar herinde ser ud til at ignorere hele mobilverdenen.
Sikker på, desktopskærme bliver større. Men alle bruger også mobile enheder. Så meget af internettet er nu tilgængeligt på telefoner og tablets.
Adaptivt design er virkelig vejen at tage.
Kommentarer
- JA. Dette er nøglepunktet. Flydende webdesign er vigtigt, fordi så mange mennesker har adgang til websteder fra telefoner og tablets i disse dage. Opløsningstendensen er fragmentering, ikke udvidelse.
Svar
Hvorfor designer du ikke tilpasset til “uanset hvad du har ledig “?
Med javascript kan du finde ud af størrelsen på browservinduet og foretage nogle typografiændringer. For eksempel, hvis du har en grafisk rig, stor billedbaggrund med en 960 px-søjle, baggrundsbilledet er ikke nødvendigt for dem, der kører 1024-768, så du behøver ikke at indlæse det. Du kan også ændre din skriftstørrelse for at udnytte den tilgængelige ejendom på skærmen bedst muligt.
Svar
Mest populære opløsning i 2011 er 1280×800. 18,09% af brugerne på internettet bruger det.
Her er top 10-opløsningerne for 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Kommentarer
- +1 til reference, men med 1024×768 tæt på og være den nederste af de to topopløsninger, burde dette måske have højere overvejelse på trods af en lidt lavere procentdel.
- 1024 vil være omkring et stykke tid + nye mobile enheder. Så jeg vil anbefale at designe websteder til denne opløsning, hvis du ikke planlægger at udføre strækbart design.
Svar
Jeg er enig med Jon i, at man skal være forsigtig med at bruge fuldskærmsopløsningen som base, når man designer webapps. Han har også ret, når han siger, at widescreen-varianten af 768 er meget almindelig i disse dage.
Jeg har dog for nylig oplevet nogle meget gode grunde til at mindske min egen politik for skærmopløsning. Tv og multimedie-bærbare computere bruger nu HD-standarden som deres opløsning. Det betyder, at det er en god chance for, at flere brugere har 1280 × 720 som deres opløsning. Målretning 768 som højde kan være lidt for meget for mange brugere.
Svar
Hvis du vil være sikker med skrivebords / bærbare computerskærme ved hjælp af et statisk layout, skal du fortsætte med at bruge et minimum af 1024×768. Men den bedre mulighed er at designe et flydende (fleksibelt) layout.
Svar
Microsoft sendte for nylig deres telemetridata i dette område til Windows 7-brugere :
Du kan se, at der (i det mindste for brugere, der stadig er i opgraderingscyklussen), en enorm mængde brugere, der kører 16: 9 og 16:10 skærme i stedet for 4: 3 (og antallet af dem kører ved 1366 × 768).
Kommentarer
- Synes at selv internt ignorerer Microsoft mobillandskabet.)
Svar
Ja, prøv at overveje et fleksibelt layout. Hvis du planlægger at bruge alle tilgængelige pixel, er det den bedste løsning at dække hele skærmen med brug af javascript. Du skal gennemgå Responsivt webdesign fra ALA og se på eksempel . Hvornår se dette eksempel, prøv at ændre størrelsen på din browser og se, hvordan indholdet reagerer. På denne måde kan dit websted se godt ud på enhver skærm, kan det være desktop, bærbar computer, tablet-telefon.
Kommentarer
- bemærk, hvis du går ned ad stien til at bruge hver eneste tilgængelige pixel, kan det gøre din tekst sværere at læse af dine læsere.
Svar
Jeg har målrettet mod 1280 X 1024, med et layout vil det være adaptivt, hvis mobilbegrænsninger er en faktor.
Ellers henviser jeg normalt til analyser og prøver at være opmærksom på de øverste opløsninger til givet websted.
Svar
Et par ting at overveje:
- Hvem er denne app til? Hvis det er internt (dvs. virksomhedsmiljø), skal du tale med IT og se, hvilken opløsning medarbejdernes skærmbilleder er indstillet på. Se især på de medarbejdere, der mest ville arbejde i appen.
- Hvis det ” en offentlig ansigt-app, så tænk over, hvilke data du har om dine brugeres “opløsninger. Hvis du” redesigner igen, skal du kontrollere analyserne på det aktuelle websted og få en fornemmelse af, hvilke opløsninger dine brugere kører. Du bemærker muligvis et mønster her (dvs. folk har tendens til at have meget høje opløsninger, da de er strømbrugere osv.), Men chancerne er, at det “vil være overalt.
- Tænk på de data, du er præsentere. Hvis det er så mange net, er det måske et flydende layout, der er bedst. Derefter kan brugeren strække deres skærm for at vise mere af de data, de har brug for.
Design til 1024 er en sikker rute til Internettet, men det er doven, hvis du ikke prøver at lære mere om dine brugere, inden du træffer en beslutning.
Svar
1024 * 768 skal stadig være som en sund fornuft. Ellers afhænger det virkelig af dit publikum. Hvis du laver en website eller app til designere, for eksempel, skal du optimere til meget højere opløsning som 1680 * 1050.
Du skal teste det eller bede om det ønskede publikum, men 1024 * 768 er stadig et must!
I en ideel verden ville der være forskellige (CSS) stilarter til forskellige opløsninger og enheder. 🙂
Kommentarer
- ” Hvis du f.eks. laver et websted eller en app til designere, skal du op timize for meget højere opløsning som 1680 * 1050. ” De fleste ‘ designere ‘ har iPhones .
- @ DA01 – Således er de forskellige CSS for forskellige enheder.
- Det hjælper, men jeg adresserede hovedsageligt ‘ optimeret til ‘. Ideelt set optimerer du ‘ til ‘ alle enheder.
Svar
Almindelige projektoropløsninger:
- XGA = 1024 x 768 pixels
- WXGA = 1280 x 800 pixels
- HD = 1920 x 1080 pixels
- 4K = 4096 x 2160 opløsning
Kommentarer
- Kan du udvide dette? Og hvad mener du med projektoropløsninger?
- eksempel: Hvis du har en PT-EX600U LCD-projektor, ændres skærmopløsningen til: 1028 x 768 pixels, når du tilslutter den til din computer. / li>