Zalecana rozdzielczość strony (szerokość i wysokość)? [zamknięte]

Zły pomysł, jak sądzę. Celem oddzielenia treści od układu graficznego było umożliwienie wyświetlania strony internetowej w dowolnej przeglądarce.

Wprowadzenie sztucznych ograniczeń, takich jak minimalny rozmiar ekranu, ograniczy twój rynek.

Mimo to uważam, że każdy pulpit powinien być w stanie wyświetlić 1024x768. Ale co z przeglądarkami działającymi na iPhone ' ach lub innych urządzeniach z wyzwaniami ekranowymi, a nawet tymi, które nie używają całego pulpitu dla przeglądarki?

In odpowiedź na twoje konkretne pytanie, Nie, Nie wierzę, że istnieje jakiś standard dla minimum lub wspólnego obszaru wyświetlania w przeglądarkach.

Zmuszanie użytkownika do przewijania w poziomie jest poważnym naruszeniem interfejsu użytkownika. O ile nie budujesz specjalnie strony internetowej dla populacji o znanym rozmiarze ekranu, najbezpieczniej jest zapewnić, że twój projekt działa z ekranami o szerokości tak małej, jak 800 pikseli(około 8% populacji surfującej po internecie, jeśli pamięć mi służy). Dobrze jest dostosować go do większych ekranów, ale nie kosztem ludzi, którzy nadal surfują w 800x600.

Jeszcze jedna rzecz do rozważenia: nie każdy uruchamia swoją przeglądarkę na pełnym ekranie(ja nie). Tak więc pomysł, że jeśli jest Ok, aby zaprojektować dla określonego (i dużego) "rozmiaru ekranu" naprawdę nie działa z wielu powodów.

Update on 12/15/2010: kiedy po raz pierwszy odpowiedziałem na to pytanie, 800 pikseli było odpowiednią odpowiedzią. Jednak w tym momencie polecam szerokość 1024 pikseli (lub 960, jak ktoś inny wskazuje). Technologia maszeruje dalej...

Oto statystyki wyświetlania przeglądarki w 2008 roku: http://www.w3schools.com/browsers/browsers_display.asp

Około 50% użytkowników nadal używa 1024x768. Jeśli chcesz, aby Twoja strona wyglądała ładnie w wysokich rozdzielczościach, użyj elastycznego układu.

Istnieją rzeczywiście standardy branżowe dla szerokości (dobrze według yahoo przynajmniej). Ich obsługiwane szerokości to 750, 950, 974, 100%

Istnieją zalety tych szerokości dla ich predefiniowanych siatek (układów kolumn), które dobrze współpracują ze standardowymi wymiarami dla reklam, jeśli miałbyś je uwzględnić.

Ciekawa rozmowa też warta obejrzenia.

Zobacz baza YUI

Oto niesamowite narzędzie: Rozmiar przeglądarki Google Labs

Powiedziałbym, że należy oczekiwać tylko od użytkowników monitora o rozdzielczości 800x600. Rząd kanadyjski ma standardy, które wymieniają to jako jeden z wymogów. Chociaż może to wydawać się niskie dla kogoś z fantazyjnym monitorem panoramicznym, pamiętaj, że nie każdy ma ładny monitor. Wciąż znam wielu ludzi biegających na 1024x768. I wcale nie jest rzadkością, aby spotkać kogoś, kto działa w 800x600, zwłaszcza w tanich kawiarniach internetowych podczas podróży. Ponadto, miło jest mieć aby okno przeglądarki było pełnoekranowe, jeśli nie chcesz. Możesz rozszerzyć witrynę na szerszych monitorach, ale nie zmuszaj użytkownika do przewijania w poziomie. Nigdy. Kolejną zaletą obsługi niższych rozdzielczości jest to, że witryna będzie działać na telefonach komórkowych i Nintendo Wii jest o wiele łatwiejsze.

Notka o szerokości co najmniej 1280, muszę powiedzieć, że to przesada. Większość 17, a nawet moje 19-calowe monitory panoramiczne obsługują tylko maksymalną rozdzielczość 1280x1024. I 14-calowy panoramiczny laptop, na którym teraz piszę, ma tylko 1280 pikseli. Powiedziałbym, że największa minimalna rozdzielczość, do której powinieneś dążyć, to 1024x768, ale 800x600 byłoby idealne.

Wszystkie odpowiedzi do tej pory mówią o monitorach stacjonarnych, ale używam stack overflow na moim iPhonie i nie sądzę, że należy wykluczać żadnej platformy mobilnej, kierując 1024 lub 1280 poziomych pikseli. Oznacz swoją stronę, aby przeglądarka wiedziała, co to wszystko oznacza, a jej użyteczność pojawi się za darmo, nawet na czytnikach ekranu i innych zestawach, o których nie pomyślałeś.

Najlepiej nie kierować się konkretną rozdzielczością, ale łatwo dostosować się do wielu różnych rozdzielczości.

Wytyczne, których używamy, które wydają się być dość szeroko stosowane i są poparte danymi, które otrzymujemy od Google Analytics, mają na celu zaprojektowanie witryny tak, aby działała na ekranie o szerokości 1024 pikseli i wysokości 768 pikseli (1024x768 i 1280x800 to najczęstsze rozdzielczości, które widzimy, stanowiąc co najmniej 70% całego ruchu).

Dlatego widzisz wiele witryn (w tym jedną), które używają centralnej kolumny o szerokości ok. 1000 pikseli i z najważniejszymi treściami w top 500-600 pikseli, więc jest powyżej krotnie, gdy jest oglądany na ekranach tej wielkości.

Używanie Układu o szerokości 1000 pikseli działa dość dobrze na ekranach o szerokości do około 1680 pikseli (zwykle tak wysokiej, jak widać na laptopach, z wyjątkiem dużych 17-calowych), ale zaczynają wyglądać nieco głupio na komputerach o szerokości 1920 pikseli (wysokiej klasy komputery, zazwyczaj stacje robocze), jednak te bardzo wysokie rozdzielczości nie stanowią dużego odsetka ruchu w ogólnym internecie - 2% lub mniej (na laptopach). z drugiej strony, jeśli masz wyspecjalizowaną publiczność, taką jak ta strona, Liczba o wysokich rozdzielczościach może być nieco wyższa).

Chociaż najlepsza szerokość może do 1024 będziesz musiał dostosować wysokość dla konta dla różnych ustawień przeglądarki (pasek narzędzi nawigacji, pasek zakładek, pasek statusu itp.) i konto dla ustawień paska zadań. Szybko spadnie 768 do około 550.

Bez względu na rozmiar docelowej przeglądarki, upewnij się, że miejsce na paski narzędzi przeglądarki, paski stanu i paski przewijania, jak powyżej. Internet Explorer (IME) często ma ponad 100px pionowej przestrzeni w paskach narzędzi i paskach stanu. Zazwyczaj, jeśli fotografuję na 1024 x 768, starałbym się stworzyć projekt około 960-980px szerokości i 600px wysokości, aby być bezpiecznym. W ten sposób można pomieścić przewijanie w razie potrzeby i trochę ładnej białej przestrzeni (jeśli projekt tego wymaga). Gorąco polecam siatki YUI dla instancji gdzie trzeba kierować konkretne rozmiary:

YUI Grid

Często dostaję pytania od projektantów dotyczące nie tylko szerokości, ale także wysokości, której użyć ,aby "zachować wszystko powyżej zagięcia". Oto jedna odpowiedź, którą ostatnio dałem -

Jeśli chodzi o szerokość, nie jestem projektantem, ale czytałem, że szerokość 960px jest w dzisiejszych czasach drogą, ponieważ nadaje się do dzielenia na kolumny, które wyglądają ładnie i ładnie mieszczą się w większości wyświetlaczy. Jeśli możesz, Zaprojektuj płynny układ-ale nie zawsze jest to praktyczne w zależności od Twojego projektanta, Twoich umiejętności CSS, obrazów i ilość tekstu.

(zawsze chcesz, aby w każdej linii było 65-80 znaków, a wysokość linii wynosiła około 1,15). Jest to optymalna szerokość kolumny dla tekstu i udowodniono, że jest ona znacznie szybsza i przyjemniejsza w czytaniu niż bardzo szerokie lub wąskie Kolumny)

Jeśli chodzi o 'above the fold', muszę tylko przestrzec przed używaniem takiej koncepcji w sieci. Przewijanie poziome można i należy unikać, ale przewijanie pionowe jest czymś, czego nie można w 100% uniknąć. Wszystko co mogę ci powiedzieć to to, że na wyświetlaczu 1024x768 (co najmniej 95% użytkowników ma to lub więcej) powinno być OK ze stałym blokiem 600px. Ale istnieje wiele różnych formatów wyświetlania, przeglądarka chrome może zająć dużo miejsca, a nie każdy maksymalizuje okno przeglądarki.

Oto kilka innych stron, które mówią mniej więcej to samo-ale planowanie, aby uzyskać absolutnie wszystko "powyżej fałdy" dla każdego jest trudne bo wtedy możesz mieć tylko 400px lub tak, zgodnie z rzeczywistą statystyki.

I wreszcie dobry długi artykuł, który idzie w szczegółach (ja bym post więcej, ale tak mówi jestem zbyt noob) - Jak zaprojektować Rozmiar przeglądarki - baekdal.com

Osobiście zawsze trzymałem się maksymalnej szerokości 1000px, wyśrodkowanej na środku strony(poprzez margines lewo / prawo: auto).

Jeśli używasz czegoś mniej niż 1024x768, nadszedł czas na aktualizację. Poważnie. Jest prawie rok 2010. Możesz kupić okazyjne monitory LCD o natywnej rozdzielczości 1280x1024.

Proponuję rzucić okiem na media-queries. Jest to przydatny nowy dodatek do CSS, który naprawdę ma taki sens, że zastanawiasz się, dlaczego nie zostało to zaimplementowane waaay wcześniej. Zasadniczo pozwala na kierowanie atrybutów przeglądarki (takich jak maksymalne i minimalne szerokości) bezpośrednio za pomocą CSS i rozgałęzienie kodu układu stamtąd. Podobnie jak w przypadku tworzenia arkusza stylów wydruku, możesz tworzyć układy na pulpicie i urządzeniach mobilnych równolegle w tym samym pliku, co daje kopa w rozwoju.

Elastyczne lub płynne układy nie ograniczają projektowania, na przykład, jeśli używasz obrazów tła, które muszą pasować do obrazu tła ciała.

Wolałbym zrobić różne układy css dla witryny i mieć je zastosować w zależności od rozdzielczości użytkownika, lub jeśli nie jest to możliwe (nie zagłębiłem się w to jeszcze), zrobić z tego opcję wyboru.

W porządku, widzę tu mnóstwo dezinformacji. Na początek, stworzenie strony internetowej przy użyciu określonej rozdzielczości, na przykład 800x600, sprawia, że strona renderuje się poprawnie tylko przy użyciu tej rozdzielczości! Gdy ta sama strona jest wyświetlana na cudzym laptopie lub monitorze komputera domowego, strona zostanie wyświetlona przy użyciu bieżącej rozdzielczości ekranu, a nie rozdzielczości użytej podczas projektowania strony. Nie twórz stron WWW dla jednej konkretnej rozdzielczości! Jest zbyt wiele różnych proporcji i rozdzielczości ekranu, aby oczekiwać" jeden rozmiar dla wszystkich " scenariusz, że z projektowania stron internetowych nie istnieje. Oto rozwiązanie: użyj CSS3 Media Queries, aby utworzyć kod z możliwością dostosowania rozdzielczości. Oto przykład:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Widzisz, to co właśnie zrobiliśmy to określenie 3 zestawów stylów, które renderują się w różnych rozdzielczościach. W przypadku naszego przykładu, jeśli rozdzielczość ekranu jest większa niż 800px, zamiast tego zostanie wykonany CSS dla 1024. Podobnie, jeśli ekran wyświetlający zawartość był 1224px, 1280 będzie być wykonywany od 1224 jest większy niż 1024. Strona, nad którą pracuję, działa teraz we wszystkich rozdzielczościach od 800x600 do 1920x1080. Inną rzeczą, o której należy pamiętać, jest to, że nie wszystkie monitory o tej samej rozdzielczości mają ekrany o tym samym rozmiarze. Można umieścić laptopy 15.4 obok siebie, podczas gdy oba wyglądają tak samo, oba mogą mieć drastycznie różne rozdzielczości, ponieważ nie wszystkie piksele są tego samego rozmiaru na różnych ekranach LCD. Użyj więc zapytań o media i zacznij tworzyć swoją stronę za pomocą ekranu laptopa z Wysoka rozdzielczość, szczególnie 1280+. Utwórz również każde zapytanie o media przy użyciu innej rozdzielczości na swoim laptopie. Możesz użyć ustawień rozdzielczości w systemie Windows, aby dostosować 800x600 i utworzyć zapytanie o media w tym res, a następnie przełączyć się na 1024x768 i utworzyć kolejne zapytanie o media w tym res.

Aktualizacja: oto link do korzystania z zapytań o media, które pomogą wyjaśnić więcej, innowacyjne projektowanie stron internetowych dla urządzeń mobilnych z zapytaniami o Media

Ten samouczek pokaże Ci, jak projektować dla wszystkich urządzeń. Dostępne są również samouczki dotyczące zapytań o Media. Stworzyłem całą stronę, aby renderować na wszystkich urządzeniach, wszystkich ekranach i wszystkich rozdzielczościach, bez subdomen i tylko CSS! Nadal pracuję nad obsługą tabletów i smartfonów. Witryna doskonale renderuje się na dowolnym laptopie lub 50-calowym telewizorze LCD, a wiele stron działa doskonale na wszystkich urządzeniach mobilnych. Jeśli umieścisz cały kod na stronie, to Twoje strony ładuje się szybko! Pamiętaj również, aby zwrócić uwagę na dyskusję w tym artykule na temat właściwości CSS " background-size: cover;" lub "contain", które sprawią, że grafika w tle będzie płynna i będzie w stanie renderować idealnie we wszystkich rozdzielczościach.

Postępuj zgodnie z tutorialami stron i możesz stworzyć jedną stronę internetową, która renderuje na wszystko i cokolwiek!

Spróbuj wycelować 1024 jako minimalną szerokość. Spróbuj jak to wygląda na 800, ale nie zawracaj sobie tym głowy. Przy 800x600 prawie żadna z głównych stron internetowych nie będzie działać, więc ludzie pracujący w tej rozdzielczości i tak będą mieli problemy cały czas.

Jeśli chcesz wybrać układ płynny, upewnij się, że tekst nie jest zbyt szeroki {4]}, ponieważ gdy wiersze są zbyt długie, stają się trudne do odczytania. To jest główny powód, dla którego większość stron internetowych ma stałą szerokość.

Celuję w monitory o rozdzielczości 1024 pikseli (ale nie wykorzystuję 100% tej przestrzeni). Zrezygnowałem z tych z 800x600. Wolałbym raczej karać tych kilku przestarzałym sprzętem, zmuszając ich do przewijania, jeśli trzeba, zamiast karać wszystkich nowym sprzętem, marnując miejsce.

Przypuszczam, że zależy to od odbiorców i charakteru Twojej aplikacji.

Ostatecznie nie jest to kwestia standardów lub najlepszych praktyk dla znaczników, ale raczej znajomość odbiorców i upewnienie się, że Twoja strona robi to, co chcesz.

Ważniejsze jest, aby wziąć pod uwagę szerokość widoku przeglądarki, a nie rozdzielczość ekranu - nie można zakładać, że każdy piksel na wyświetlaczu zostanie przydzielony do przeglądarki (a nawet jeśli tak jest, musisz odjąć przeglądarkę chrome). Jeśli masz dostęp do analityki, która zgłosi szerokość przeglądarki (n. b. Szerokość przeglądarki, a nie rozdzielczość ekranu).

Miło jest próbować pomieścić jak najszerszy zakres widoków, ale są pewne ograniczenia. Niektóre wyzwania mogą być obsługiwane za pomocą CSS media type , niektóre Nie. niektóre mogą być obsługiwane za pomocą płynnych układów. Jednak układy płynne nie mogą działać we wszystkich sytuacjach, w zależności od rodzaju wyświetlanych informacji, długości linii, komfortu czytania, itp. niektóre układy płynne nie działają w szerokie wyświetlacze. Większość łamie się, gdy rozmiar jest mniejszy niż określona szerokość, itd.

Choć osobiście chciałbym zaprojektować dla viewportów ~960 pikseli i więcej, nie zawsze można to zrobić. Tak więc w niektórych przypadkach, to nadal najbezpieczniejsze do projektowania dla viewports

Gdzie konwersje są problemem -- i masz naprawiony układ szerokości-lepiej mieć dobry powód, aby umieścić wszystko, co użytkownik musi kliknąć, aby kasa poszła" ka-ching " w dowolnym miejscu na wschód od 760. piksela.

To samo dla podstawowej nawigacji.

Na koniec Przetestuj swój układ we wszystkim, co możesz dostać w swoje ręce. Duży. Małe. Pulpit. Ręczny. Dzieła. Nie ma substytutu.

Właśnie pobrałem próbkę rozdzielczości ekranu ze wszystkich witryn klientów, do których mam dostęp, Obejmuje to więcej niż 20 witryn w więcej niż 8 branżach oto wyniki:
alt text http://unkwndesign.com/so/percentScreenResolutions.png
Na tej podstawie powiedziałbym, że dobrze wygląda na 1024x768, ponieważ jest to większość tutaj na dłuższą metę. Nie martw się również o wysokość, jednak staraj się unikać tworzenia większości stron więcej niż 1-2 wydrukowanych stron domyślnie rozmiar czcionki, większość ludzi nie czyta strony tak długiej, a jeśli użytkownik instaluje pasek narzędzi, który zajmuje pionową przestrzeń, moje osobiste preferencje są takie, że jest to ich problem, ale nie sądzę, że to wielka sprawa.

*uwaga procent dodaje się do 100.05% z powodu zaokrąglenia.

Należy pamiętać, że im wyższa rozdzielczość, tym mniejsze prawdopodobieństwo, że przeglądarka internetowa zostanie zmaksymalizowana.

I niektóre przeglądarki też mają poprzeczne paski.

To zależy od tego, co chcesz renderować, ale wybrałbym układ o zmiennej szerokości, który nie łamie się na około 800-900 szerokości.

Wzrost to nie problem.

Sbeam powiedział, że "zawsze chcesz, aby było 65-80 znaków w linii". To nieprawda. Na przykład Wikipedia może mieć 180 znaków w wierszu. A może chodziło o konkretną stronę internetową?