Jaka jest „najczęstsza” szerokość i wysokość, jakie strony internetowe są obecnie projektowane?

9

Pracuję nad projektem grupowym i staram się, aby moi koledzy przesłali rysunek dotyczący ich wizji aplikacji online; ta aplikacja będzie wyświetlana na komputerze. Chociaż podejrzewam, że nie ma standardu branżowego, potwierdzam, że muszą istnieć wspólne podejścia do witryn z układami o stałej szerokości. Muszę znać najbardziej powszechne poczucie proporcji w branży.

Będziemy utrzymywać ten prototyp w prostocie, dlatego nie będziemy wykrywać przeglądarek, szerokości ekranu itp. Pomyślałem, że zapytam o to w prosty sposób, mając nadzieję na uzyskanie prostej odpowiedzi:

Jaka jest „najczęstsza” szerokość i wysokość, dla której ostatnio projektowane są strony internetowe. Byłoby bardzo pomocne, gdybym mógł znaleźć źródło, gdy mówię moim kolegom, dlaczego wybrałem określone poczucie proporcji, na których opierają swoje rysunki.

Zwróć uwagę, jak zadałem to pytanie:

  • Nie pytam o najczęstsze rozdzielczości ekranu.
  • Nie pytam o najpopularniejsze przeglądarki.

Chcę wiedzieć, jakie wymiary wybiera większość stron internetowych w odniesieniu do układów o stałym rozmiarze. Wiem, że ludzie zwykle przewijają się i dlatego wysokość może nie być częścią ~ standardu; w takim przypadku zadowalam się najczęstszą szerokością.

John R.
źródło

Odpowiedzi:

9

Tak jak powiedziałeś, nie ma standardowej wysokości, ponieważ jest ona wyjątkowo płynna, więc używaj czegokolwiek, co pomaga najlepiej zobrazować projekt.

W przypadku szerokości 960 pikseli wydaje się być obecnie „standardem” dla projektów o stałej szerokości. To dość powszechne, że witryna poświęcona jest badaniu układów na tej szerokości .

(Zakładam, że nie chcesz, aby ktokolwiek narzekał na stosowanie płynnego projektu?)

John Conde
źródło
3

Naprawdę nie ma standardowej szerokości, którą powinieneś ustawić. Liczba osób korzystających z monitora o rozdzielczości 1024 x 768 drastycznie spadła w ciągu ostatnich kilku lat, więc szerokość 960 ma mniejsze znaczenie. Wraz z pojawieniem się tak wielu nowych urządzeń (smartfonów, tabletów wraz z laptopami i komputerami stacjonarnymi), powinieneś utworzyć wiele arkuszy stylów dla każdego przypadku.

Zapytania o media CSS pozwalają zmieniać style w zależności od rozdzielczości ekranu użytkownika. Zwykle tworzę witryny z ogólnym arkuszem stylów, który obsługuje wszystkie style wizualne, a następnie osobne dla telefonu komórkowego, tabletu, standardowego komputera stacjonarnego / laptopa i bardzo szerokich ekranów, które układają stronę.

Sprawdź tę stronę na W3.org, aby zobaczyć kilka przykładów - http://www.w3.org/TR/css3-mediaqueries/

Jest to więcej pracy, ale pozwoli użytkownikowi uzyskać najlepszą możliwą jakość bez względu na to, czego używa do przeglądania swojej witryny.

Carson
źródło
1

Co powiedział @John Conde. Ponadto musisz wziąć pod uwagę, kto jest twoją grupą docelową. Na przykład, jeśli moja witryna jest blogiem technologicznym lub blogiem z gadżetami, istnieje prawdopodobieństwo, że moja grupa docelowa jest nieco bardziej zaawansowana technologicznie niż zwykła publiczność, więc mogę strzelać do układu o szerokości ponad 1200 pikseli. Lub gdybym koncentrował się na stronie / blogu / forum dla webmasterów, poszedłbym trochę dalej.

Pod koniec dnia sprawdź swoje masowe dane demograficzne i śledź, co ostatecznie dla nich zadziała.

Dwie BARDZO ważne rzeczy, o których należy pamiętać ...

1) Jeśli Twój projekt może pracować z rozdzielczością 900+ pikseli, nie ma powodu, aby rozciągać go do rozdzielczości 1200+ pikseli, nawet jeśli możesz sobie na to pozwolić.

2) Upewnij się, że masz odpowiednią strukturę, która może pomieścić użytkowników, którzy mogą nie mieć docelowej rozdzielczości.

Adil
źródło
Nie zgadzam się z punktem 2. Dzięki wyświetlaczowi o szerokości 1366 pikseli, prawdopodobnie najczęściej stosowanej szerokości w większości laptopów sprzedawanych w ciągu ostatnich kilku lat, nie można dopasować dwóch okien 900px obok siebie i widzieć oba jednocześnie. Jeśli masz tylko jeden układ o rozdzielczości 900 pikseli, marnujesz 34% przestrzeni poziomej za pomocą białych znaków. W takim przypadku szerokość 1200 pikseli byłaby idealna . Więc tak, nie jest to powód, aby ją rozciągnąć.
nhinkle
@nhinkle: Nie sądzę, żebyś rzeczywiście przeczytał punkt # 2 ... co twoja odpowiedź ma wspólnego z dopasowaniem dwóch okien 900px obok siebie? Ponadto prosimy o dokładne przeczytanie pytania, aby zrozumieć, o co prosi John R. To nie jest dyskusja na temat ekstremalnych przypadków użycia, takich jak chcesz mieć obok siebie 2 900px okien lub w moim przypadku, aby monitory 1600px (2 z nich) wykonały projekt. Raczej chodzi o zdecydowaną większość użytkowników, którzy nie są tobą ani mną ..
Adil
Przepraszam, chciałem odpowiedzieć na twój pierwszy punkt, a nie na twój drugi. Przepraszam, jeśli to spowodowało zamieszanie. Mój punkt widzenia jest nadal ważny: ogromna większość użytkowników ma wyświetlacze, które są wystarczająco szerokie, aby układ o rozdzielczości 900 pikseli marnował dużo miejsca. Zgadzam się z większością tego, co powiedziałeś w swojej odpowiedzi, ale twoja pierwsza „rzecz, o której należy pamiętać” tak naprawdę nie jest prawdą. Jeśli twoje dane demograficzne mogą pozwolić sobie na 1200 pikseli, powinieneś użyć tych 1200 pikseli, w przeciwnym razie marnujesz 300 ich pikseli.
nhinkle
@nhinkle: Źle interpretujesz mój punkt nr 1. Jeśli mój projekt może łatwo pokazać witrynę w rozdzielczości 900 pikseli, dlaczego miałbym ją rozciągać, aby uzyskać 1200 pikseli? Ponadto 13% użytkowników nadal ma rozdzielczość ekranu 1024 x 768. Przyznaję, że to niewielka liczba, ale jest wystarczająco duża, aby je dyskomfortować i tracić sprzedaż, kliknięcia reklam, potencjalnych klientów lub inny model biznesowy .... (dane cytowane z: w3schools .com / browsers / browsers_display.asp )
Adil
Wiem o co ci chodzi. Chodzi mi o to, że jeśli Twoi użytkownicy mają wystarczająco duże ekrany, aby użyć układu o szerokości 1200px, powinieneś. Na przykład witryny wymiany stosów są zoptymalizowane pod kątem szerokości około 1000 pikseli, ale wielu użytkowników poprosiło o opcję podglądu źródła postu i podglądu znaczników obok siebie, co wymagałoby więcej miejsca w poziomie. w3schools nie jest reprezentatywną próbą użytkowników sieci, ale poza tym ta dyskusja dotyczyła stron, w których 1200 byłoby logiczne, gdyby pasowało do projektu.
nhinkle 23.03.11