Vyvíjím webovou aplikaci, která je poměrně náročná na informace. To znamená, že každý pixel dostupný na obrazovce pro zobrazení hodně pomáhá, vyhnout se uživatelskému rozhraní vypadat příliš přeplněně a zobrazit relevantní data.
Zajímalo by mě: jaké je „běžné“ rozlišení obrazovky? Před lety to bylo něco jako 1024 × 768, ale v dnešní době to musí být něco mnohem vyššího. Nemohu se spoléhat na to, co používám, protože jsem vývojář a pravděpodobně mám větší obrazovky a rozlišení než průměrný uživatel Joe.
Takže, kde najdu aktuálně doporučené řešení pro webové aplikace?
Komentáře
- Podívejte se na tuto otázku na webu Webmasters – webmasters.stackexchange.com/questions/2494/…
- Neměli byste ‚ používat rozlišení obrazovky, které vám pomůže při rozhodování; potřebujete znát velikosti oken prohlížeče. Zejména když se monitory dostanou nemůžete předpokládat, že si lidé vezmou prohlížeč na celou obrazovku; to by bylo příliš velké na to, aby bylo možné číst většinu webů.
- Přečtěte si také tuto otázku týkající se rozvržení s pevnou šířkou a plynulým uspořádáním .
- Myšlení z hlediska rozlišení obrazovky, jako je nějaký statický parametr, zní anachronicky. @MonicaCellio má pravdu. Alokace nemovitostí pro aplikaci je dynamická a je v rukou uživatele.
- Poznámka: S rostoucím responzivním designem si mnoho lidí uvědomilo, že je také důležité zvážit, co je dobrá maximální šířka sloupce a že čitelnost textu lze často zajistit přiblížením šířky obsahu specifické pro velikost písma, tj. 35-40em pro plnou šířku textu.
Odpověď
To opravdu záleží na tom, kde na světě jste. Celosvětově 1366×768 je stále nejběžnější, ale 1920×1080 je jediné rozlišení, které se ve zvyšování absorpce ve skutečnosti zvyšuje (pravděpodobně proto, že se zdá být standardní širokoúhlou obrazovkou pro moderní notebooky).
Web StatCounter.com by vám měl v tomto ohledu pomoci získat další informace.
HOWEVER mějte však na paměti, že právě proto, že některá rozlišení jsou běžnější než jiná, ve skutečnosti nebere v úvahu, jak široký má uživatel prohlížeč okno. Bohužel pro tuto statistiku existuje jen málo známých měření (analytika Google ji poskytovala, ale přestala ji podporovat).
Komentáře
- Celosvětové průměry pro tento druh dat také nemusí (nebudou) být stejné jako u vaší uživatelské základny. Dokud nevyzkoušíte své SKUTEČNÉ uživatele, nebudete ‚ Nevím, co ‚ znovu používají. Proto je nejlepší navrhnout rozvržení tak, aby fungovalo v různých (a různých) rozlišeních.
- Údaje o distribuci rozlišení obrazovky mezi smartphony a tablety Android a iOS najdete v Rozlišení ‚ sekce ke konci opensignalmaps.com/reports/fragmentation.php . Pohodlí zde je, že rozlišení obrazovky se pravděpodobně blíží rozměrům výřezu / okna prohlížeče u smartphonů a tabletů než u notebooků a stolních počítačů. Pro Android je fragmentace ‚ platformy nepříjemně odráží v široké distribuci rozlišení obrazovky. To by pravděpodobně udělalo plynulé rozložení pro mobilní zařízení dobrým nápadem.
- Stejně jako aktualizace 1366×768 od doby, kdy byla tato odpověď zveřejněna, celkem předstihla 1024×768.
- @DangerZone Dobrý bod . StatCounter bohužel nenabízí ‚ t odkazy na ‚ aktuální ‚, protože vždy vyžadují příponu a časové období (tedy několik úprav této odpovědi v průběhu let!). Odpověď jsem upravil o aktuální statistiky. Myslím, že ‚ budu muset udělat totéž asi za rok!
Odpovědět
Pamatujte, že notebooky a stolní počítače již nejsou jedinými webovými zařízeními. IPad má rozlišení 1024×768, iPhone 4 má rozlišení 960×640, za předpokladu, že je používáte v režimu na šířku.
Komentáře
- Afaik the iPhone 4 vykresluje stránky, jako by měl staré rozlišení 480 * 320. Stránky na mém 4 divák ‚ t poloviční velikosti jako na 3GS. Zvláštní rozlišení se používá pouze pro vykreslování písma / obrázků, na které se ‚ dostávám.
- Absolutně platný bod. Šířka obrazovky 960 pixelů zůstává relevantní i při zvětšování velikosti obrazovky pro stolní počítače, protože tuto velikost může zobrazit i mnoho ručních zařízení.Nemluvě o tom, že weby jsou nečitelné, když jsou velmi široké (1600+).
Odpovědět
Výběr minimálního rozlišení obrazovky závisí na tom, kolik uživatelů jste ochotni vyloučit.
Pokud nemáte historii údajů o rozlišení svých konkrétních uživatelů, jednou z možností je použít jako vodítko veřejné, globální statistiky využití . Pomocí jednoho takového zdroje globálních dat jsem vytvořil následující graf, který mi na první pohled pomůže vyjádřit stav šířky obrazovky plochy.
Odpověď
„ale dnes to musí být něco mnohem vyššího“
Zdá se, že každá odpověď zde ignoruje celý mobilní svět.
Jistě, obrazovky pro počítače se zvětšují. Ale každý také používá mobilní zařízení. K velké části webu nyní přistupují telefony a tablety.
Adaptivní design je skutečně cestou, kterou se máme vydat.
Komentáře
- ANO. To je klíčový bod. Plynulý webový design je zásadní, protože v dnešní době tolik lidí navštěvuje webové stránky z telefonů a tabletů. Trendem rozlišení je fragmentace, nikoli expanze.
Odpověď
Proč nenavrhujete adaptivně pro „cokoli máte k dispozici „?
Pomocí JavaScriptu můžete zjistit velikost okna prohlížeče a provést některé změny stylů. Například pokud máte graficky bohaté a velké pozadí obrázku se sloupcem 960 px, obrázek pozadí není potřeba pro ty, kteří používají 1024-768, takže jej nemusíte načítat. Můžete také upravit velikost písma, abyste co nejlépe využili dostupné nemovitosti na obrazovce.
Odpovědět
Nejoblíbenější rozlišení v roce 2011 je 1280×800. Používá jej 18,09% uživatelů internetu.
Zde je 10 nejlepších rozlišení pro rok 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Komentáře
- +1 pro referenci, ale s 1024×768 těsně za sebou a jako nižší ze dvou hlavních rozlišení, které by to snad mělo mít vyšší úvaha i přes mírně nižší procento.
- 1024 bude na chvíli asi + nová mobilní zařízení. Doporučuji tedy navrhnout weby pro toto rozlišení, pokud neplánujete roztažitelný design.
Odpověď
Souhlasím s Jonem, že při navrhování webových aplikací je třeba dávat pozor, aby bylo jako základ použito rozlišení celé obrazovky. Má také pravdu, když prohlásí, že širokoúhlá varianta 768 je v dnešní době velmi běžná.
Nedávno jsem však zažil několik velmi dobrých důvodů, proč snížit vlastní politiku rozlišení obrazovky. Televizory a multimediální notebooky nyní jako rozlišení používají standard HD. To znamená, že je dobrá šance, že několik uživatelů bude mít rozlišení 1280 × 720 . Cílení na výšku 768 může být pro mnoho uživatelů trochu příliš mnoho.
Odpovědět
Pokud chcete být v bezpečí s obrazovkami stolů / notebooků pomocí statického rozvržení, používejte minimální 1024×768. Lepší možností je navrhnout plynulé (flexibilní) rozvržení.
Odpověď
Microsoft nedávno zveřejnil jejich telemetrická data v této oblasti pro uživatele Windows 7 :
Můžete vidět, že (alespoň pro uživatele, kteří jsou stále v cyklu upgradu) existuje obrovské množství uživatelů, kteří provozují obrazovky 16: 9 a 16:10 namísto 4: 3 (a jejich množství běží na 1366 × 768).
Komentáře
- Zdá se, že i interně Microsoft ignoruje mobilní prostředí;;)
Odpověď
Ano, zkuste zvážit flexibilní rozvržení. Pokud plánujete použít každý dostupný pixel, pak je nejlepším řešením pokrytí celé obrazovky pomocí musíte použít javascript. Měli byste projít Responzivní webový design od ALA a podívat se na příklad . Kdy při prohlížení tohoto příkladu zkuste změnit velikost prohlížeče a uvidíte, jak obsah reaguje. Tímto způsobem může váš web vypadat skvěle na jakékoli obrazovce, ať už na počítači, notebooku nebo tabletu telefonu.
Komentáře
- mějte prosím na paměti, pokud jdete na cestě k využití každého dostupného pixelu může čtenáři váš text těžší číst.
Odpovědět
Byl jsem cílení 1280 X 1024, s rozložením bude adaptivní, pokud jsou omezení mobilních telefonů faktorem.
Jinak se obvykle odkládám na analytiku a snažím se pamatovat na nejvyšší rozlišení pro dané stránky.
Odpověď
Několik věcí, které je třeba zvážit:
- Pro koho je tato aplikace určena? Pokud jde o interní řešení (tj. Podnikové prostředí), promluvte si s IT a podívejte se, na jaké rozlišení jsou nastaveny obrazovky zaměstnanců. Podívejte se zejména na zaměstnance, kteří by v aplikaci pracovali nejvíce.
- Pokud je to “ Jako veřejná aplikace, přemýšlejte o tom, jaké údaje máte o rozlišeních vašich uživatelů. Pokud měníte vzhled, zkontrolujte analytiku na aktuálním webu a získejte představu o tom, jaká rozlišení vaši uživatelé používají. Zde si můžete všimnout vzoru (tj. Lidé mají obvykle velmi vysoké rozlišení, protože jsou pokročilí uživatelé atd.), Ale je pravděpodobné, že to bude všude.
- Přemýšlejte o datech, která jste prezentující. Pokud je to spousta mřížek, možná je nejlepší plynulé rozložení. Pak může uživatel roztáhnout obrazovku a zobrazit více potřebných dat.
Návrh pro 1024 je bezpečná cesta pro web, ale je líné, pokud se před rozhodnutím nepokoušíte o svých uživatelích zjistit více.
Odpovědět
1024 * 768 by mělo zůstat zdravým rozumem. Jinak to opravdu záleží na vašem publiku. Například web nebo aplikace pro designéry, měli byste optimalizovat pro mnohem vyšší rozlišení, například 1680 * 1050.
Měli byste to otestovat nebo požádat o požadované publikum, ale 1024 * 768 je stále nutností!
V ideálním světě by existovaly různé styly (CSS) pro různá rozlišení a zařízení. 🙂
Komentáře
- “ Pokud například vytváříte web nebo aplikaci pro designéry, měli byste časování pro mnohem vyšší rozlišení, například 1680 * 1050. “ Většina ‚ návrhářů ‚ má iPhony .
- @ DA01 – Tedy různé CSS pro různá zařízení.
- To pomáhá, ale hlavně jsem řešil ‚ optimalizovaný pro ‚. V ideálním případě ‚ optimalizujete pro ‚ všechna zařízení.
Odpovědět
Běžná rozlišení projektoru:
- XGA = 1024 x 768 pixelů
- WXGA = 1280 x 800 pixelů
- HD = 1920 x 1080 pixelů
- 4K = rozlišení 4096 x 2160
Komentáře
- Mohl byste to rozšířit? A co myslíte pod rozlišením projektoru?
- příklad: pokud máte LCD projektor PT-EX600U, když jej připojíte k počítači, rozlišení obrazovky se změní na: 1028 x 768 pixelů.