Zalecana rozdzielczość witryny (szerokość i wysokość)? [Zamknięte]

Czy jest jakiś standard dotyczący rozdzielczości popularnych witryn internetowych?

Naszym celem są nowsze monitory, być może o szerokości co najmniej 1280 pikseli, ale wysokość może się różnić, a każda przeglądarka może mieć również inne wysokości pasków narzędzi.

Czy jest w tym jakiś standard?

Rada w dzisiejszych czasach to:

Optymalizuj pod kątem 1024x768 . W przypadku większości witryn obejmie to większość odwiedzających. Większość dzienników pokazuje, że 92-99% odwiedzin będzie miało szerokość powyżej 1024. Chociaż 1280 jest coraz bardziej powszechne, przy 1024 wciąż jest ich dużo, a niektóre poniżej tego. Optymalizuj pod kątem tego, ale nie ignoruj ​​innych.

1024 = ~ 960 . Uwzględnienie pasków przewijania, krawędzi okien itp. Oznacza, że ​​rzeczywista szerokość ekranu 1024x768 wynosi około 960 pikseli . Niektóre narzędzia są oparte na nieco mniejszym rozmiarze, około 940 . To jest domyślna szerokość kontenera w bootstrapie Twittera .

Nie projektuj dla jednego rozmiaru . Rozmiary okien są różne. Nie zakładaj, że rozmiar ekranu jest równy rozmiarowi okna. Projektuj pod kątem rozsądnego minimum, ale zakładaj, że się dostosuje.

Korzystaj z elastycznego projektowania i płynnych układów . Użyj układów, które dostosowują się po zmianie rozmiaru okna. Ludzie często to robią, zwłaszcza na dużych monitorach. To po prostu dobra praktyka CSS. Istnieje kilka platform front-end, które to obsługują.

Traktuj telefon komórkowy jako obywatela pierwszej kategorii . Cały czas uzyskujesz większy ruch z urządzeń mobilnych. Wprowadzają one jeszcze więcej rozmiarów ekranu. Nadal możesz zoptymalizować pod kątem 960, ale stosowanie elastycznych technik projektowania witryn internetowych oznacza, że ​​Twoja strona dostosowuje się do rozmiaru ekranu.

Informacje o wyświetlaniu w przeglądarce dziennika . Możesz uzyskać aktualne liczby na ten temat. Znalazłem kilka liczb tutaj i tutaj i tutaj . Możesz także tak skonfigurować swoją witrynę, aby gromadziła te same dane.

Użytkownik będzie przewijał, więc nie przejmuj się zbytnio wysokością . Stary argument polegał na tym, że użytkownicy nie przewijali treści i wszystko, co ważne, powinno znajdować się „na ekranie”. To zostało obalone lata temu. Użytkownicy dużo przewijają .

Więcej o rozdzielczościach ekranu:

• Rozdzielczość ekranu i układ strony
• Najlepsza rozdzielczość ekranu do projektowania witryn internetowych
• Projekt dostosowany do rozmiaru przeglądarki, a nie rozmiaru ekranu

Więcej o projektowaniu responsywnym:

• Responsive Web Design (25 maja 2010), Ethan Marcotte, A List Apart.
• Responsive Web Design w Wikipedii
• Wzorce układu dla wielu urządzeń (14 marca 2012) Łukasz Wróblewski. Kataloguje najpopularniejsze wzorce dla dostosowywalnych układów ekranu dla wielu urządzeń.

Narzędzia i frameworki front-end do projektowania responsywnego i płynnych układów:

• Twitter Bootstrap
• Fundacja Zurb
• 50 fantastycznych narzędzi do projektowania responsywnych stron internetowych (2012, 24 kwietnia) Denise Jacobs i Peter Gasston

Myślę, że zły pomysł. Celem oddzielenia treści od układu było umożliwienie wyświetlania Twojej 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 komputer stacjonarny powinien wyświetlać rozdzielczość 1024x768. Ale co z przeglądarkami działającymi na iPhone'ach lub innych urządzeniach z ekranami, a nawet tymi, które nie używają całego pulpitu w przeglądarce?

Odpowiadając na Twoje konkretne pytanie, nie, nie sądzę, aby istniał jakiś standard określający minimalny lub wspólny obszar wyświetlania w przeglądarkach.

Zmuszanie użytkownika do przewijania w poziomie to poważne naruszenie interfejsu użytkownika. Jeśli nie tworzysz witryny internetowej specjalnie dla populacji o znanym rozmiarze ekranu, najbezpieczniej jest upewnić się, że projekt będzie działał z ekranami o szerokości nawet 800 pikseli (około 8% populacji surfującej po sieci, jeśli pamięć mi dobrze służy). Rozsądnie jest dostosować go do większych ekranów, ale nie kosztem ludzi, którzy nadal surfują w rozdzielczości 800x600.

Oto kolejna rzecz do rozważenia: nie każdy uruchamia przeglądarkę na pełnym ekranie (ja nie). Pomysł, że jeśli jest OK, projektować dla określonego (i dużego) „rozmiaru ekranu”, naprawdę nie działa z wielu powodów.

Aktualizacja 15.12.2010: Kiedy po raz pierwszy odpowiedziałem na to pytanie, 800 pikseli było właściwą odpowiedzią. Jednak w tym momencie zalecałbym szerokość 1024 pikseli (lub 960, jak ktoś inny wskazuje). Technologia idzie 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 rozdzielczości 1024x768. Jeśli chcesz, aby Twoja witryna wyglądała ładnie w wysokiej rozdzielczości, użyj elastycznego układu.

w rzeczywistości istnieją standardy branżowe dotyczące szerokości (przynajmniej według Yahoo). Ich obsługiwane szerokości to 750, 950, 974, 100%

Te szerokości mają zalety ze względu na ich predefiniowane siatki (układy kolumn), które dobrze współpracują ze standardowymi wymiarami reklam, jeśli jakieś zostały uwzględnione.

Ciekawa rozmowa też warta obejrzenia.

zobacz YUI Base

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

Powiedziałbym, że od użytkowników należy oczekiwać tylko monitora o rozdzielczości 800x600. Rząd kanadyjski ma standardy, które wymieniają to jako jedno z wymagań. Chociaż komuś z eleganckim panoramicznym monitorem może się to wydawać niskie, pamiętaj, że nie każdy ma ładny monitor. Wciąż znam wiele osób korzystających z rozdzielczości 1024x768. I nie jest niczym niezwykłym spotkać kogoś, kto działa w rozdzielczości 800x600, zwłaszcza w tanich kawiarniach internetowych podczas podróży. Dobrze jest też ustawić okno przeglądarki na pełnym ekranie, jeśli nie chcesz. Możesz poszerzyć witrynę na szerszych monitorach, ale nie zmuszaj użytkownika do przewijania w poziomie. Zawsze. Kolejną zaletą obsługi niższych rozdzielczości jest to, że Twoja witryna będzie działać na telefonach komórkowych, a Nintendo Wii jest o wiele łatwiejsza.

Notatka o szerokości co najmniej 1280, muszę powiedzieć, że to zdecydowanie przesada. Większość 17-calowych, a nawet 19-calowych monitorów nie panoramicznych obsługuje tylko maksymalną rozdzielczość 1280x1024. A 14-calowy szerokoekranowy laptop, na którym teraz piszę, ma tylko 1280 pikseli średnicy. Powiedziałbym, że największa minimalna rozdzielczość, do której powinieneś dążyć, to 1024x768, ale 800x600 byłoby idealne.

Wszystkie dotychczasowe odpowiedzi dotyczą monitorów stacjonarnych, ale używam przepełnienia stosu na moim iPhonie i nie sądzę, abyś wykluczał jakąkolwiek platformę mobilną, kierując reklamy na 1024 lub 1280 poziomych pikseli. Oznacz swoją stronę, aby przeglądarka wiedziała, co to wszystko znaczy, a udostępnienie jej będzie dostępne za darmo, nawet w przypadku czytników ekranu i innych zestawów, o których nie pomyślałeś.

Najlepiej nie kierować się żadną 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 uzyskanymi z 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ęściej spotykane rozdzielczości, stanowiące co najmniej 70% całego ruchu).

Z tego powodu widzisz wiele witryn (w tym ta), które używają środkowej kolumny o szerokości około 1000 pikseli i najważniejszych treści w górnych 500-600 pikseli, więc podczas wyświetlania na ekranach tego rozmiaru znajduje się ona powyżej części strony widocznej na ekranie.

Układ o szerokości 1000 pikseli działa dość dobrze na ekranach o szerokości do około 1680 pikseli (zazwyczaj tak wysokich, jak na laptopach, z wyjątkiem dużych 17-calowych), ale na 1920 pikselach zaczyna wyglądać trochę głupio szerokie (komputery wysokiej klasy, zazwyczaj stacje robocze), jednak te bardzo wysokie rozdzielczości nie stanowią dużego procentu ruchu w ogólnym internecie - 2% lub mniej (z drugiej strony, jeśli masz specjalistyczną grupę docelową, taką jak ta strona , liczba przy wysokich rozdzielczościach może być nieco wyższa).

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

Niezależnie od docelowego rozmiaru przeglądarki upewnij się, że jest miejsce na paski narzędzi przeglądarki, paski stanu i paski przewijania, jak powyżej. Internet Explorer (IME) często ma ponad 100 pikseli pionowej przestrzeni na paskach narzędzi i paskach stanu. Zwykle, jeśli kręcę w rozdzielczości 1024 x 768, starałbym się stworzyć projekt o szerokości około 960 - 980 pikseli i wysokości 600 pikseli, aby był bezpieczny. W ten sposób uwzględnisz przewijanie, jeśli to konieczne, i trochę ładnej białej przestrzeni (jeśli wymaga tego projekt). Bardzo polecam siatki YUI w przypadkach, w których musisz kierować reklamy na określone rozmiary:

Siatka YUI

Projektanci często zadają mi pytania nie tylko o szerokość, ale także o to, jakiej wysokości użyć, aby „trzymać wszystko na zgięciu”. Oto jedna odpowiedź, której ostatnio udzieliłem -

Jeśli chodzi o szerokość, nie jestem projektantem, ale przeczytałem, że szerokość 960 pikseli jest obecnie właściwą drogą, ponieważ można ją podzielić na kolumny, które wyglądają ładnie i dobrze pasują do 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 projektanta, umiejętności CSS, obrazów i ilości tekstu.

(zawsze chcesz, aby każdy wiersz zawierał 65-80 znaków, a wysokość wiersza to około 1,15). Jest to optymalna szerokość kolumny dla tekstu, która okazała się znacznie szybsza i przyjemniejsza w czytaniu niż bardzo szerokie lub wąskie kolumny)

Jeśli chodzi o „przewijanie”, po prostu muszę uważać, aby nie używać takiego pojęcia w sieci. Przewijania w poziomie można i należy unikać, ale przewijania w pionie 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) powinieneś być OK ze stałym blokiem o wysokości 600 pikseli. Ale istnieje wiele różnych formatów wyświetlania, chromowanie przeglądarki może zajmować dużo miejsca i nie wszyscy maksymalizują okno przeglądarki.

tutaj jest kilka innych witryn, które mówią mniej więcej to samo - ale planowanie, aby uzyskać absolutnie wszystko „na zakładkę” dla wszystkich, jest trudne, ponieważ wtedy możesz mieć tylko 400 pikseli, zgodnie z rzeczywistymi statystykami.

I wreszcie dobry, długi artykuł, który zawiera wiele szczegółów (opublikowałbym więcej, ale SO mówi, że jestem zbyt noobem) - Jak projektować pod kątem rozmiarów przeglądarek - baekdal.com

Osobiście zawsze trzymałem się maksymalnej szerokości 1000 pikseli, wyśrodkowanej na środku strony (przez marginesy lewy / prawy: auto).

Jeśli masz mniej niż 1024x768, czas na aktualizację. Poważnie. Jest prawie rok 2010. Możesz kupić okazyjnie monitory lcd bin z natywną rozdzielczością 1280x1024.

Proponuję przyjrzeć się zapytaniom o media. To przydatny nowy dodatek do CSS, który naprawdę ma tak duży sens, że można by się zastanawiać, dlaczego nie zostało to zaimplementowane wcześniej. Zasadniczo umożliwia kierowanie atrybutów przeglądarki (takich jak max i min-width) bezpośrednio przez CSS i rozgałęzienie kodu układu z tego miejsca. Podobnie jak w przypadku tworzenia arkusza stylów drukowania, możesz tworzyć układy na komputery stacjonarne i urządzenia mobilne równolegle w tym samym pliku, co jest bardzo przydatne w rozwoju.

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

Wolałbym raczej stworzyć różne układy css dla strony i kazać je stosować w zależności od rozdzielczości użytkownika, a jeśli nie jest to możliwe (jeszcze się w to nie zagłębiałem), uczynić z tego opcję do wyboru.

W porządku, widzę tutaj dużo dezinformacji. Na początek, utworzenie strony internetowej przy użyciu określonej rozdzielczości, na przykład 800x600, powoduje, że strona renderuje się poprawnie tylko przy użyciu tej rozdzielczości! Gdy ta sama strona jest wyświetlana na czyimś laptopie lub monitorze komputera domowego, zostanie ona wyświetlona przy użyciu bieżącej rozdzielczości tego ekranu, a NIE rozdzielczości użytej podczas projektowania strony. Nie twórz stron internetowych dla jednej określonej rozdzielczości! Jest zbyt wiele różnych współczynników proporcji i rozdzielczości ekranu, aby oczekiwać scenariusza „jeden rozmiar dla wszystkich”, który przy projektowaniu 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
}

Zobacz, co właśnie zrobiliśmy, to określenie 3 zestawów stylów renderowanych w różnych rozdzielczościach. W przypadku naszego przykładu, jeśli rozdzielczość ekranu jest większa niż 800px, zamiast tego zostanie wykonany kod CSS dla 1024. Podobnie, jeśli ekran wyświetlający zawartość miał 1224px, 1280 zostałby wykonany, ponieważ 1224 jest większe niż 1024. Witryna, nad którą pracuję teraz działa 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 tego samego rozmiaru. Możesz umieścić laptopy 15,4 obok siebie, a oba wyglądają tak samo, oba mogą mieć drastycznie różne rozdzielczości, ponieważ nie wszystkie piksele mają ten sam rozmiar na różnych ekranach LCD. Użyj więc zapytań o media i zacznij tworzyć swoją witrynę z ekranem laptopa o wysokiej rozdzielczości, szczególnie 1280+. Również, utwórz każde zapytanie o media, używając innej rozdzielczości na swoim laptopie. Możesz użyć ustawień rozdzielczości w systemie Windows, aby zmniejszyć 800x600 i utworzyć zapytanie o media w tej rozdzielczości, a następnie przełączyć się na 1024x768 i utworzyć kolejne zapytanie o media w tej rozdzielczości. Mógłbym kontynuować i kontynuować, ale myślę, że powinniście zrozumieć, o co chodzi.

AKTUALIZACJA: Oto link do korzystania z zapytań o media, który pomoże wyjaśnić więcej, Innowacyjny projekt sieci Web dla urządzeń mobilnych z zapytaniami o media

Ten samouczek pokaże Ci, jak projektować dla wszystkich urządzeń. Istnieją również samouczki dotyczące zapytań o media. Opracowałem całą witrynę tak, aby renderowała się na wszystkich urządzeniach, wszystkich ekranach i we wszystkich rozdzielczościach bez subdomen i tylko z CSS! Nadal pracuję nad obsługą tabletów i smartfonów. Witryna doskonale wyświetla się na każdym 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, Twoje strony będą ładować się błyskawicznie! Pamiętaj też, aby zwrócić uwagę na dyskusję w tym artykule na temat CSS „background-size: cover;” lub „zawierają” właściwości, sprawią, że grafika w tle będzie płynna i będzie mogła doskonale renderować się we wszystkich rozdzielczościach.

Postępuj zgodnie z samouczkami dotyczącymi witryn i możesz stworzyć jedną stronę internetową, która będzie renderować się na wszystkim i czymkolwiek!

Spróbuj ustawić 1024 jako minimalną szerokość. Spróbuj, jak to wygląda na 800, ale nie przejmuj się zbytnio wykonywaniem tej pracy. Przy 800x600 prawie żadna z głównych witryn nie będzie działać, więc ludzie pracujący w tej rozdzielczości i tak będą mieli problemy przez cały czas.

Jeśli masz zamiar wybrać płynny układ, upewnij się, że tekst nie jest zbyt szeroki , ponieważ gdy linie są zbyt długie, stają się trudne do odczytania. To główny powód, dla którego większość witryn 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 ukarać nielicznych przestarzałym sprzętem, sprawiając, że przewijają się, jeśli zajdzie taka potrzeba, zamiast karać wszystkich nowym sprzętem przez marnowanie miejsca.

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

Ostatecznie nie jest to kwestia standardów ani najlepszych praktyk dotyczących znaczników, ale raczej znajomości odbiorców i upewnienia się, że Twoja witryna robi to, czego chcesz.

Ważniejsze jest rozważenie szerokości okna przeglądarki, a nie rozdzielczości ekranu - nie można zakładać, że każdy piksel na ekranie zostanie przydzielony przeglądarce (a nawet jeśli tak, to trzeba odjąć chrom przeglądarki). Jeśli masz dostęp do narzędzi analitycznych, które raportują szerokość przeglądarki ( nb , a nie rozdzielczość ekranu), zwróć szczególną uwagę.

Fajnie jest spróbować pomieścić jak najszerszy zakres rzutni, ale są pewne ograniczenia. Niektórym wyzwaniom można sprostać za pomocą mediów CSS , a innym nie. Niektóre można obsługiwać za pomocą układów płynnych. Jednak układy płynne nie działają we wszystkich sytuacjach, w zależności od typu wyświetlanych informacji, długości linii, komfortu czytania itp. Niektóre układy płynne nie działają na szerokich wyświetlaczach. Większość pęka, gdy rozmiar jest poniżej określonej szerokości itp.

Chociaż osobiście chciałbym projektować dla rzutni ~ 960 pikseli i więcej, nie zawsze możesz to zrobić. W niektórych przypadkach nadal najbezpieczniej jest projektować dla rzutni <= 760 pikseli lub więcej (wyświetlacz o szerokości 800 pikseli, zmaksymalizowany) - chociaż czas, w którym możemy w końcu odrzucić to ograniczenie raz na zawsze - przynajmniej w przypadku komputerów stacjonarnych - zbliża się bardzo szybko.

Tam, gdzie konwersja jest problemem - a masz układ o stałej szerokości - lepiej mieć cholernie dobry powód, aby umieścić cokolwiek, co użytkownik musi kliknąć, aby kasa fiskalna przeszła w dowolne miejsce na wschód od 760. piksel.

To samo dotyczy podstawowej nawigacji.

Na koniec przetestuj swój układ we wszystkim, co możesz zdobyć. Duży. Mały. Pulpit. Handheld. Prace. Nie ma substytutu.

Właśnie pobrałem próbkę rozdzielczości ekranu ze wszystkich witryn klienckich, do których mam dostęp, w tym ponad 20 witryn w ponad 8 branżach. Oto wyniki:
tekst alt http://unkwndesign.com/so/percentScreenResolutions.png
Opierając się na tym powiedziałbym, że wygląda dobrze na 1024x768, ponieważ jest to większość tutaj z długiej perspektywy. Nie przejmuj się też tak bardzo wysokością, ale staraj się unikać drukowania większości stron na więcej niż 1-2 strony przy domyślnym rozmiarze czcionki, większość ludzi nie czyta strony tak długiej, a jeśli użytkownik zainstaluje pasek narzędzi, który zajmuje przestrzeń pionowa, osobiście wolę, że to ich problem, ale nie sądzę, żeby to była wielka sprawa.

* uwaga procent sumuje się do 100,05% ze względu na zaokrąglenia.

Pamiętaj, że im wyższa rozdzielczość, tym mniejsze prawdopodobieństwo, że przeglądarka internetowa zostanie zmaksymalizowana.

Niektóre przeglądarki mają również paski boczne.

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

Wysokość nie jest problemem.

sbeam powiedział, że „zawsze chcesz mieć 65-80 znaków w linii”. To nie jest prawda. Na przykład Wikipedia może mieć 180 znaków w linii. A może miała to być konkretna witryna internetowa?