Ik ben een webtoepassing aan het ontwikkelen die behoorlijk veel informatie bevat. Dit betekent dat elke pixel die beschikbaar is op het scherm voor weergave veel helpt, om de gebruikersinterface te vermijden ziet er te rommelig uit en om relevante gegevens weer te geven.
Ik vroeg me af: wat is de “gewone” schermresolutie? Jaren geleden was het zoiets als 1024 × 768, maar tegenwoordig moet het iets veel hogers zijn. Ik kan niet vertrouwen op wat ik gebruik als ontwikkelaar en ik heb waarschijnlijk grotere schermen en resolutie dan de gemiddelde Joe-gebruiker.
Dus, waar kan ik vinden de momenteel aanbevolen oplossing voor webapps?
Reacties
- Zie deze vraag op de Webmasters-site – webmasters.stackexchange.com/questions/2494/…
- Je mag ‘ niet gebruiken schermresolutie om uw beslissingen te sturen, u moet de grootte van browservensters kennen, vooral omdat monitoren hu je kan niet aannemen dat mensen een browser op volledig scherm gebruiken; dat zou te groot zijn om de meeste sites te lezen.
- Zie ook deze vraag over vaste breedte versus vloeiende lay-out .
- Denken in termen van schermresolutie, alsof het een statische parameter is, klinkt anachronistisch. @MonicaCellio had het goed. De toewijzing van onroerend goed voor een applicatie is dynamisch en is in handen van de gebruiker.
- Opmerking: nu responsive design in opkomst is, zijn veel mensen gaan beseffen dat het ook belangrijk is om te bedenken wat een goede maximale kolombreedte , en dat de leesbaarheid van tekst vaak kan worden verzekerd door de breedte van de inhoud te benaderen die specifiek is voor de lettergrootte, dwz 35-40em voor een vaste tekstbreedte.
Antwoord
Dat hangt er echt van af waar ter wereld je bent. Wereldwijd is 1366×768 nog steeds de meest voorkomende, maar 1920×1080 is de enige resolutie die daadwerkelijk toeneemt in opname (vermoedelijk omdat dit het standaard breedbeeldscherm lijkt te zijn voor moderne laptops).
De website StatCounter.com zou u hier wat meer kennis over moeten geven.
, houd er echter rekening mee dat, alleen omdat bepaalde resoluties vaker voorkomen dan andere, dit niet echt rekening houdt met hoe breed de browser van de gebruiker is venster. Helaas zijn er weinig metingen bekend voor deze statistiek (Google Analytics gebruikte hiervoor, maar ondersteunt deze niet meer).
Opmerkingen
- Bovendien zijn de wereldwijde gemiddelden voor dit soort gegevens mogelijk niet hetzelfde als die van uw gebruikersbestand. Totdat u een steekproef van uw ACTUAL-gebruikers neemt, hoeft u ‘ weet niet wat ze ‘ gebruiken. Daarom kun je het beste je lay-out zo ontwerpen dat deze werkt met meerdere (en verschillende) resoluties.
- Voor gegevens over de verdeling van de schermresolutie tussen Android- en iOS-smartphones en -tablets, zie de Resolutie ‘ sectie tegen het einde van opensignalmaps.com/reports/fragmentation.php . Handig hier is dat de schermresolutie eerder de afmetingen van de viewport / browservensters op smartphones en tablets benadert dan op laptops en desktops. Onhandig voor Android, de fragmentatie van het platform ‘ wordt behoorlijk duidelijk weerspiegeld in de brede verspreiding van schermresoluties. Dit zou waarschijnlijk een vloeiende lay-out voor mobiele apparaten een goed idee maken.
- Net als een update heeft 1366×768 1024×768 met een behoorlijk beetje ingehaald sinds dit antwoord werd gepost.
- @DangerZone Goed punt . Helaas biedt StatCounter ‘ geen links aan naar ‘ huidige ‘ omdat ze altijd een achtervoegsel vereisen datumbereik (vandaar verschillende bewerkingen in dit antwoord door de jaren heen!). Ive heeft het antwoord aangepast met up-to-date statistieken. Ik denk dat ik ‘ over een jaar hetzelfde moet doen!
Antwoord
Houd er rekening mee dat laptops en desktops niet langer de enige apparaten met internet zijn. De iPad heeft een resolutie van 1024×768, de iPhone 4 heeft een resolutie van 960×640, ervan uitgaande dat je ze in landschapsmodus gebruikt.
Opmerkingen
- Afaik the De iPhone 4 geeft paginas weer alsof ze de oude resolutie van 480 * 320 hebben. Paginas op mijn 4 zijn ‘ niet half zo groot als op een 3GS. De extra resolutie wordt alleen gebruikt voor het renderen van lettertypen / afbeeldingen is waar ik ‘ naar bedoel.
- Absoluut geldig punt. De schermbreedte van 960 pixels blijft relevant, zelfs als de schermafmetingen van het bureaublad toenemen, omdat veel handheld-apparaten deze grootte ook kunnen weergeven.Laat staan dat websites gewoon onleesbaar zijn als ze erg breed zijn (1600+).
Antwoord
De keuze van de minimale schermresolutie komt allemaal neer op het aantal gebruikers dat u wilt uitsluiten.
Als u heeft geen geschiedenis van resolutiegegevens voor uw specifieke gebruikers, een optie is om openbare algemene gebruiksstatistieken als richtlijn te gebruiken. Met behulp van een dergelijke bron van globale gegevens heb ik de volgende grafiek gemaakt om de toestand van de schermbreedtes op het bureaublad in één oogopslag weer te geven.
Antwoord
“maar tegenwoordig moet het iets veel hogers zijn”
Elk antwoord hier lijkt te negeren de hele mobiele wereld.
Natuurlijk worden desktopschermen steeds groter. Maar iedereen gebruikt ook mobiele apparaten. Een groot deel van het internet wordt nu geopend op telefoons en tablets.
Adaptief ontwerp is echt de weg die u moet inslaan.
Reacties
- JA. Dit is het belangrijkste punt. Vloeiend webdesign is van vitaal belang omdat tegenwoordig zoveel mensen websites bezoeken vanaf telefoons en tablets. De oplossingstrend is fragmentatie, niet uitbreiding.
Antwoord
Waarom ontwerp je niet adaptief voor “wat dan ook you have available “?
Met javascript kun je de grootte van het browservenster achterhalen en een aantal stylesheet-wijzigingen aanbrengen. als je bijvoorbeeld een grafisch rijke, grote afbeeldingsachtergrond hebt met een kolom van 960 px, dan is de achtergrondafbeelding is niet nodig voor degenen die 1024-768 draaien, dus u hoeft het niet te laden. U kunt ook uw lettergrootte wijzigen om optimaal gebruik te maken van het beschikbare onroerend goed op het scherm.
Antwoord
Meest populaire resolutie in 2011 is 1280×800. 18,09% van de gebruikers op internet gebruikt het.
Hier zijn de 10 beste resoluties voor 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Opmerkingen
- +1 voor de referentie, maar met 1024×768 vlak achter en als de laagste van de twee hoogste resoluties zou dit misschien moeten hebben hogere overweging ondanks een iets lager percentage.
- 1024 zal nog een tijdje bestaan + nieuwe mobiele apparaten. Dus ik zou aanraden sites te ontwerpen voor deze resolutie, als je niet van plan bent om rekbaar ontwerp te maken.
Antwoord
Ik ben het met Jon eens dat men voorzichtig moet zijn om de volledige schermresolutie als basis te gebruiken bij het ontwerpen van webapps. Hij heeft ook gelijk als hij stelt dat de breedbeeldvariant van 768 tegenwoordig heel gewoon is.
Ik heb onlangs echter enkele zeer goede redenen ervaren om mijn eigen schermresolutiebeleid te verlagen. Tvs en multimedia-laptops gebruiken nu de HD-standaard als hun resolutie. Dat betekent dat het een goede kans is dat meerdere gebruikers 1280 × 720 als hun resolutie hebben. Het targeten van 768 als hoogte kan voor veel gebruikers een beetje te veel zijn.
Answer
Als u veilig wilt zijn met bureau- / laptopschermen met een statische lay-out, gebruik dan een minimum van 1024×768. Maar de betere optie is het ontwerpen van een vloeiende (flexibele) lay-out.
Antwoord
Microsoft heeft onlangs hun telemetriegegevens in dit gebied voor Windows 7-gebruikers :
Je kunt zien dat (in ieder geval voor gebruikers die nog bezig zijn met de upgradecyclus), er een enorm aantal gebruikers is met 16: 9- en 16:10-schermen in plaats van 4: 3 (en het aantal ervan draait op 1366 × 768).
Opmerkingen
- Het lijkt erop dat Microsoft zelfs intern het mobiele landschap negeert.;)
Antwoord
Ja, probeer een flexibele lay-out te overwegen. Als u van plan bent elke beschikbare pixel te gebruiken, is het volledig scherm bedekken de beste oplossing, met de moet javascript gebruiken. U moet het Responsive Web Design van ALA doorlopen en de voorbeeld . Wanneer Als u dit voorbeeld bekijkt, probeer dan het formaat van uw browser aan te passen en kijk hoe de inhoud reageert. Op deze manier ziet uw website er op elk scherm geweldig uit, of het nu desktop, laptop, tablet of telefoon is.
Reacties
- let op als je gaat door elke beschikbare pixel te gebruiken, kan het uw tekst moeilijker leesbaar maken voor uw lezers.
Antwoord
Ik heb me gericht op 1280 X 1024, met een lay-out die adaptief zal zijn als mobiele beperkingen een factor zijn.
Anders ga ik meestal over op analyse en probeer ik me bewust te zijn van de beste resoluties voor de bepaalde site.
Antwoord
Een paar dingen om te overwegen:
- Voor wie is deze app bedoeld? Als het intern gericht is (dwz de bedrijfsomgeving), praat dan met IT en kijk op welke resolutie de schermen van de medewerkers zijn ingesteld. Kijk vooral naar de medewerkers die het meest in de app zouden werken.
- Als dit het geval is ” een openbare app is, moet u nadenken over de gegevens die u heeft over de resoluties van uw gebruikers. Als u opnieuw aan het ontwerpen bent, controleert u de analyses op de huidige site en krijgt u een idee van de resoluties die uw gebruikers gebruiken. U zult hier een patroon opmerken (dwz mensen hebben de neiging om zeer hoge resoluties te hebben omdat ze krachtige gebruikers zijn, enz.), Maar de kans is groot dat het “overal zal zijn.
- Denk na over de gegevens die u ontvangt. presenteren. Als het veel rasters zijn, is een vloeiende lay-out misschien het beste. De gebruiker kan dan zijn scherm uitrekken om meer van de benodigde gegevens weer te geven.
Ontwerpen voor 1024 is een veilige route voor internet, maar het is lui als je niet probeert meer over je gebruikers te weten te komen voordat je een beslissing neemt.
Antwoord
Het 1024 * 768 moet nog steeds een gezond verstand blijven. Anders hangt het echt af van je publiek. Als je een website of app voor ontwerpers, moet u optimaliseren voor een veel hogere resolutie, zoals 1680 * 1050.
U moet het testen of het aan uw gewenste publiek vragen, maar 1024 * 768 is nog steeds een must!
In een ideale wereld zouden er verschillende (CSS) stijlen zijn voor verschillende resoluties en apparaten. 🙂
Reacties
- ” Als je bijvoorbeeld een website of app voor designers maakt, moet je op timize voor een veel hogere resolutie, zoals 1680 * 1050. ” De meeste ‘ ontwerpers ‘ hebben iPhones .
- @ DA01 – Dus de verschillende CSS voor verschillende apparaten.
- Dat helpt, maar ik sprak voornamelijk over de ‘ geoptimaliseerd voor ‘. Idealiter ‘ optimaliseer je voor ‘ alle apparaten.
Antwoord
Algemene projectorresoluties:
- XGA = 1024 x 768 pixels
- WXGA = 1280 x 800 pixels
- HD = 1920 x 1080 pixels
- 4K = 4096 x 2160 resolutie
Reacties
- Kun je hier wat meer over zeggen? En wat bedoel je met projectorresoluties?
- voorbeeld: als je een PT-EX600U LCD-projector hebt en je die op je computer hebt aangesloten, verandert je schermresolutie in: 1028 x 768 pixels.