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

123

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?

Aximili
źródło
32
Dlaczego zamknięto to jako „nie konstruktywne”? Wydaje się, że to ważne pytanie, a zwłaszcza najwyżej oceniona i zaakceptowana odpowiedź dostarcza cennych informacji.
Damon
20
Zgadzam się z Damonem. To było ważne pytanie i wiele osób chciałoby usłyszeć odpowiedź. Myślę, że SO stał się nadgorliwy w pytaniach końcowych.
robak internetowy
Przepełnienie stosu lepiej nadaje się do absolutnych pytań i odpowiedzi, to znaczy do spraw technicznych, które mają konkretną odpowiedź, a nie do pytań, w przypadku których różne opinie mogą być uzasadnione lub gdzie prawidłowa odpowiedź zależy ściśle od przypadku użycia / projektu.
Juan
Szerokość witryny stackoverflow wynosi około 1090px.odd!
Necktwi

Odpowiedzi:

221

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:

Więcej o projektowaniu responsywnym:

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

Karl Fast
źródło
8
Możesz sprawdzić: 960.gs kompletną witrynę dotyczącą projektów wykorzystujących 960 pikseli w siatce. Technika ta nosi nazwę „960 projektów siatki”.
BerggreenDK
3
Wygląda na to, że SO używa 960 i nic nie jest płynne. Do Twojej wiadomości
colithium
Twoja witryna nie powinna też mieć przewijania w poziomie przy 800 pikselach. Może nie będzie wyglądać najlepiej, ale wszystko powinno nadal pasować.
palswim
Czy to ma jakieś aktualizacje? Ta odpowiedź ma już kilka lat.
Crashalot
29

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.

paxdiablo
źródło
14
Czekaj, 1024x768 może odpowiadać całemu rozmiarowi ekranu, ale często jest to zmniejszane przez paski systemowe, dekorację okien, paski menu, paski narzędzi, paski kart i potencjalnie paski przewijania oraz kartę nawigacji.
Svante
7
Zła rada. Kto powiedział, że HTML nie jest przeznaczony do układu? Płynne układy są tak lat 90., w których różnica w rozdzielczości była stosunkowo niewielka. Spróbuj przeczytać kilka tekstów przy czcionce 10 pkt na ekranie 2560x1600 bez narzuconego ograniczenia szerokości. Wkrótce zaczniesz nienawidzić tych płynnych układów.
Wouter van Nifterick,
1
@Pax: Chodziło mi o to, że bardzo trudno jest wymyślić płynny układ, który działa dobrze zarówno w bardzo niskich, jak i bardzo wysokich rozdzielczościach. Nigdy nie trafiłem na stronę, która ładnie działa na moim PDA i na monitorze o wysokiej rozdzielczości, z tym samym html. Najlepsze z nich są specjalnie ukierunkowane.
Wouter van Nifterick,
1
uzgodniono, układy płynne działają lepiej dla każdego. Zbyt duże ekrany nie stanowią problemu, ponieważ użytkownicy ci mogą dopasować rozmiar przeglądarki do dowolnych rozmiarów.
nailitdown
9
W przypadku układów płynnych zawsze możesz ustawić maksymalną szerokość, aby ustawić górny limit dla tych, którzy używają zmaksymalizowanej przeglądarki na dużym wyświetlaczu.
Richard
8

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 ...

Mark Brittingham
źródło
Rozszerzyłbym stwierdzenie, być może, mówiąc, że wymuszenie przewijania wielokierunkowego jest możliwym wykroczeniem. Hori-scroll może być świetny, jeśli zostanie wykonany poprawnie. deanoakley.com thehorizontalway.com/html/css/urban-outfitters
typeoneerror
2
Potrzebujemy dwóch nowych klawiszy na klawiaturze: „Strona w lewo” i „Strona w prawo”.
paxdiablo
@TypeOneError, jednak przeglądanie nie jest przyjemne, to nie jest naturalne.
UnkwnTech
@TypeOneError, witryna z portfolio wykorzystała to z dobrym skutkiem tylko ze względu na „schludność” i czystość projektu. Zgadzam się jednak z Unkwntech, że nie wydaje się to właściwe. Nie wspominając o tym, że większość użytkowników będzie miała pionowe kółko przewijania, a nie poziome. Już samo to sprawia, że ​​przewijanie w poziomie to zły pomysł.
Eric
@Eric, moje kółko przewijania przewija się poziomo w dwóch połączonych witrynach. Powiedziałbym, że w przypadku takich rzeczy, jak portfolia, w których chcesz zwrócić uwagę i pokazać artystyczny styl, możesz iść inaczej. Ale ogólnie byłoby to mylące dla użytkownika
monkeypushbutton
4

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.

Adam Dziendziel
źródło
Najlepiej pamiętać, że statystyki w3schools są przeznaczone dla osób odwiedzających ich witrynę. W większości byliby to ludzie tworzący strony internetowe, co nie jest odpowiednim przekrojem populacji. Patrząc na statystyki ich przeglądarek, firefox to 44%, podczas gdy IE to 46%. Prawdopodobnie nie jest to dobra próbka do oceny ogólnej sieci.
Kibbee
3

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

Simon_Weaver
źródło
Czy mógłbyś dodać link do wspomnianej rozmowy.
Sri Kadimisetty
3

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

Plynx
źródło
1
Link nie żyje. Jest teraz częścią Google Analytics, dostępną tylko po zalogowaniu, w sekcji Odbiorcy> Technologia> Przeglądarka i system operacyjny> wybierz „Rozdzielczość ekranu”.
Dave Liepmann
2

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.

Kibbee
źródło
2

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ś.


źródło
Brawo, podbijam głos, skoro się ze mną zgadzasz :-), chociaż myślę o tym, bo możesz zdobyć więcej głosów niż ja :-(. No c'est la vie.
paxdiablo
+1 za pozorne wpisanie tej odpowiedzi na klawiaturze iPhone'a. ;) Moja strona wygląda świetnie w 1024 z iPhone's Safari, fwiw.
typoneerror
W przypadku iPhone'a myślę, że będzie to zależeć od tego, jak go trzymasz, w pionie lub w poziomie, ponieważ oczywiście wymiary będą inne
UnkwnTech
1
@TypeOneError nie tylko wpisałem go na iPhonie, ale też wracałem z pubu ;-)
@Pax nie, najwyraźniej nie. ;-)
1

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

Nate879
źródło
1

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).

Greg Beech
źródło
Jeśli głosujesz przeciw, dodaj komentarz wyjaśniający dlaczego.
Greg Beech
1

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.

Czarny kot
źródło
1

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

typoneerror
źródło
1

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

belka
źródło
1

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.

Sneakyness
źródło
Aby dodać do tego, właśnie kupiłem 23-calowy panoramiczny ekran lcd 1080p (1920 x 1080) za 150 USD w ten czarny piątek.
Sneakyness
2
Nie widzę, jak ekran programisty ma jakiekolwiek znaczenie dla pytania? czy odwiedzający witrynę są ważni, jak ja to widzę? Często jest to dobre zalecenie, aby dostać się do lepszego monitora lub więcej niż jednego monitora.
BerggreenDK
1

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.

Jesse
źródło
1

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.

mikrofon
źródło
1

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!

djdaniel150
źródło
0

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ść.

Wouter van Nifterick
źródło
Całkowicie zgadzam się z obydwoma punktami. Wybieram około 960 szerokości (więc dla ekranu 1024x768). Projektanci stron internetowych muszą również upewnić się, że długość linii nie jest zbyt długa, w przeciwnym razie naprawdę trudno ją odczytać.
Philip Morton
0

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.

EJ Brennan
źródło
0

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.

PartialOrder
źródło
0

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.

UnkwnTech
źródło
0

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.

XenF
źródło
0

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?


źródło