Dlaczego większość stron internetowych jest zoptymalizowana do wyświetlania w trybie portretowym? [Zamknięte]

Po prostu nie mogę tego rozgryźć. Prawie wszystkie monitory mają współczynnik kształtu, w którym szerokość jest znacznie większa niż wysokość, a jednak prawie wszystkie strony internetowe są zaprojektowane dokładnie na odwrót? Tak naprawdę nie jestem programistą i eksperymentuję w tej chwili, ale to szaleństwo mnie zaskakuje !!!

Edycja: Nie chodzi o to, że chciałbym ograniczyć wysokość strony internetowej. Chodzi o to, że chciałbym, aby wypełnił jakąś dostępną przestrzeń, gdy mam 1920x1080 w trybie poziomym.

Edycja 2: Zobacz to, aby zrozumieć, co mówię

Istnieje ograniczenie, jak daleko oko może skanować bez utraty śladu, która linia jest następna, gdy dojdziesz do końca bieżącej linii. Przeprowadzono wiele badań ( tym ten ) na temat optymalnej szerokości linii i czytelności.

Możesz być w stanie sprowadzić go do stopni, ale aby wiedzieć, co jest optymalne w tym momencie, musisz wiedzieć, jak daleko użytkownik znajduje się od monitora. Dlatego większość zaleceń dotyczy pomiarów w emliterach, znakach lub słowach. Rozmiar w pikselach jest wówczas zależny od rozmiaru czcionki, ale ogólny konsensus nadal działa.

Osobiście miałbym bardzo trudności z przeczytaniem artykułu, który został sformatowany tak, aby wykorzystywał całą szerokość ekranu 1080p. Jestem pewien, że ty też. Nasze obecne konwencje wywodzą się z wytycznych dotyczących projektowania układu wydruku, a wytyczne dotyczące układu nie uległy istotnej zmianie. Jedyną różnicą jest to, że możemy wchodzić w interakcje ze stroną w przeglądarce.

Dodatkowy komentarz : (z pytania postawionego w komentarzach)

Istnieją ograniczenia co HTML może zrobić dla Ciebie na ekranie. Po pierwsze, nie ma stron. Tylko paski przewijania. Zaprojektowanie rozsądnego sposobu wyświetlania znaczników przez przeglądarkę jest bardzo trudną propozycją. Właściwości CSS3 dla układu wielokolumnowego nie wyszły jeszcze z etapu rekomendacji kandydatów. Istnieją hacki do zabawy z nim opisane w tym artykule na osobnej liście . Jednak w większości witryn nie jest jeszcze gotowy na prime time.

Dopóki twoja treść nie wymaga przewijania, powinieneś być OK. Jak tylko to się stanie, podejście wielokolumnowe może stanowić pewne wyzwanie dotyczące sposobu interakcji użytkownika z witryną.

Komentarz do aktualnego standardu De Facto :

Aby odpowiedzieć na sposób, w jaki przeredagowałeś swoje pytanie i na podany przez Ciebie przykład, zrozum, że projektowanie stron internetowych musi równoważyć wiele potencjalnie sprzecznych wymagań - i nadal utrzymywać profesjonalny wygląd witryny. Aby zrównoważyć potrzeby projektantów i klientów, większość domów deweloperskich projektuje jedną rozdzielczość. Ta rozdzielczość opiera się na danych, które mogą być łatwo dostępne . Mogą być również oparte na historycznych zapisach ruchu sieciowego lub znajomości środowiska docelowego.

Najpopularniejsze szerokości ekranu (1024, 1280, 1366) są wystarczająco blisko, więc jeśli projektujesz dla najmniejszych (1024p) i wyśrodkowujesz projekt na stronie, nadal będzie wyglądał ładnie na innych nieco większych wymiarach poziomych. To bardzo trudne , aby wszystko wyrównane prawo w dowolnym formacie, znacznie mniej mają obsługiwać wiele formatów, w zależności od szerokości ekranu. Liczba użytkowników 1080p rośnie, ale wciąż stanowi bardzo niewielki procent wszystkich osób, które muszą wspierać.

W razie zainteresowania gorąco polecam zapoznanie się z niektórymi artykułami projektowymi w „A List Apart” . Zaczniesz myśleć, że robienie tego, co chcesz, jest trudniejsze niż się wydaje. Kiedy opublikowałem pytanie dotyczące projektowania dla 1080p , pierwsze wstępne odpowiedzi brzmiały: „Zrób wszystko większe”. Dla większości projektantów jest to coś, czego po prostu nie było w radarach.

Większość witryn jest wyższa niż szeroka, ponieważ można naturalnie przewinąć w dół, aby przeczytać więcej treści. Ja osobiście Nienawidzę poziomych pasków przewijania. Powinny zostać zniesione!

Witryna nadal jest portretowa, witryna rozciąga się poza dolną część ekranu. Nie ma ograniczeń co do wysokości witryny.

Istnieją teraz nieskończenie długie strony internetowe (Dziękujemy, AJAX). Co byś zrobił, gdybyś zobaczył nieskończenie szeroką stronę? (Chciałbym wytropić i zabić projektanta, kliknięcie poza stronę nie jest wystarczająco dobre, projektant musi umrzeć.)

Przewijanie, a następnie powrót do każdej linii, doprowadzi jedną do samobójstwa. Właśnie dlatego ludzie tworzą fantazyjne książki, aplikacje do przewracania stron, więc nie trzeba przewijać.

Po przeczytaniu poprzednich odpowiedzi zauważam, że brakuje kilku punktów, więc spróbuję je opisać.

Trudne wdrożenie kolumn

Kiedy mówisz o stronach o dużej szerokości, wyobrażam sobie, że mówisz o kolumnach tekstowych, takich jak to, co widzisz w „fizycznej” gazecie. Są z tym dwa problemy.

Po pierwsze, rzeczywiste HTML 4 i XHTML 1.0 / 1.1 nie są przeznaczone do wyświetlania tekstu w kolumnach. Są hacki dla Firefoksa (i być może innych normalnych przeglądarek), ale nie będzie działać w Internet Explorerze.

Po drugie, w rzeczywistej implementacji Firefoksa lub w przyszłym HTML 5, jeśli tekst musi być wyświetlany w kolumnach, musisz określić szerokość kolumny i liczbę kolumn. Nie można określić wysokości (na przykład wysokości strony, minus wysokość nagłówka i wysokości stopki), a przeglądarka może dostosować liczbę kolumn.

Uniemożliwia praktycznie zastosowanie układu w kolumnach z tylko poziomym paskiem przewijania, bez pionowego.

Brak 100% wysokości

Rzeczywisty HTML / XHTML ma na celu dostosowanie rozmiaru elementów zgodnie z szerokością strony. Bardzo trudno jest używać wysokości strony do pomiaru.

Oznacza to, że będziesz musiał użyć hacków JavaScript, aby poprawnie wyświetlić zawartość. Innymi słowy, dla osób, które nie mają włączonej obsługi JavaScript, Twoja witryna będzie całkowicie bezużyteczna.

Przeglądanie ze stroną na połowie ekranu

Przy dużych ekranach 16: 9/16: 10 nie jest niczym niezwykłym praca z dwoma oknami obok siebie ( Win+ ←/ Win+ →w Windows Seven). Oznacza to, że okno przeglądarki będzie miało małą szerokość i dużą wysokość.

Naprawiono a szerokość dynamiczna

Twoje założenie, że większość stron internetowych jest zoptymalizowanych do wyświetlania w trybie portretowym, może być błędne.

Po pierwsze, większość stron internetowych nie jest w ogóle zoptymalizowana i są napisane przez ludzi, którzy nie wiedzą nic lub niewiele na temat tworzenia stron internetowych w ogóle.

Po drugie, istnieje różnica między stronami o stałej szerokości i stronami o szerokości, która jest równa procentowi szerokości okna przeglądarki.

W pierwszym przypadku możesz zauważyć, że większość stron internetowych nie jest zoptymalizowana ani do portretu, ani do trybu poziomego. Zwykle szerokość jest ustalona na 1024, 800 lub mniej, co nie ma sensu, gdy oglądasz je na 24-calowym ekranie o rozdzielczości 1920 × 1080.

W drugim przypadku, jeśli przeglądasz stronę w trybie pełnoekranowym na 24-calowym ekranie, istnieje szansa, że ​​ta strona będzie poprawnie wyświetlana zarówno w trybie pionowym, jak i poziomym.

Przykład: wyobraź sobie stronę internetową z galerią zdjęć. Na stronie znajdują się miniatury, a kiedy klikniesz miniaturę, zobaczysz zdjęcie w pełnej skali. Jeśli miniatury są lewostronne, z dynamiczną szerokością strony, będą ładnie wyświetlane w trybie poziomym. Szczególnie miło będzie oglądać zdjęcia w pełnej skali.

Dlaczego nowoczesne monitory są zorientowane w trybie poziomym?

1. Format wideo. Wideo HD skaluje się lepiej w przypadku wyświetlaczy zorientowanych poziomo.
2. Czytanie. Czy to od lewej do prawej, czy od prawej do lewej, łatwiej jest czytać duże bloki pełnych linii bez przewijania w orientacji poziomej.

EDYCJA: Po przejrzeniu twojego komentarza i ponownym sformułowaniu intencji twojego pierwotnego pytania, wydaje się, że celujesz z jakiegoś powodu dla dwu i trzykolumnowego układu, który jest obecnie najbardziej powszechny. W tym celu krótkie, krótkie podsumowanie historii strony:

Dlaczego strony są zoptymalizowane do wyświetlania w trybie portretowym?

Nie sądzę, że są w ogóle zoptymalizowane. Często jest to kompromis między tym, że pewne aspekty są zawsze dostępne, niektóre aspekty są często dostępne, a niektóre aspekty są dostępne tylko w określonym kontekście. W najlepszym razie możesz to nazwać optymalnym kompromisem.

Umieszczenie rdzenia, oczekiwanej nawigacji i dodatkowej zawartości na każdej stronie obok treści specyficznych dla kontekstu sprawia, że ​​układy dwu- i trzykolumnowe są tak wszechobecne. We wczesnych dniach Internetu wiele witryn eksperymentowało z układami, które oferowały to, co próbowało wyglądać jak układy jednokolumnowe, przy użyciu dynamicznych list nawigacyjnych (lub menu, jakkolwiek chcesz je zobaczyć), które ukrywałyby się i rozszerzały obszar czytania dla główna zawartość. Było to jednak wyzwanie dwuczęściowe: a) wyzwania techniczne związane z brakiem zgodności między przeglądarkami; b) użyteczność: użytkownicy często postrzegali ją, nawet jeśli (duże, jeśli) wyzwanie techniczne zostało przezwyciężone, jako nieintuicyjna lub niepotrzebna gra polegająca na polowaniu (do nawigacji) i niszczeniu (satysfakcja z doświadczenia, ponieważ niektóre rozwiązania modyfikowały domyślne zachowanie kontekstowe kliknięcia myszą).

Aby temu zaradzić, większość stron przyjęła standard defacto i zaakceptowała konsekwencje. Albo dwie kolumny przedstawiające nawigację w jednej, a treść w drugiej, lub trzecia kolumna jest dodawana, aby zawsze można było wyświetlać pomocniczą, inną niż podstawowa treść nawigacji (niezależnie od tego, czy jest to pomoc kontekstowa, notatki lub reklama, czy też ostatnio strumienie komunikacji przedstawiające osobę na żywo aktywność związana z witryną lub kontekstem). Rzeczywista treść kontekstu utknęła w środku.

Nazywa się to układem o stałej szerokości. Istnieją układy o pełnej szerokości lub nazywane również płynnymi. Istnieje powód, dla którego zastosowano stałą szerokość. Jednym z nich jest to, że rozdzielczość twojego monitora wpływa na użyteczność. Jeśli masz ogromny monitor, tak jak ja, na 27-calowym ekranie, strona wyglądałaby przerażająco. Cały tekst, zdjęcia i wszystko byłoby tak rozłożone, trudno byłoby mi zrozumieć układ lub witrynę. Ustalony układ pozwala na piękny design. Płynny układ jest używany głównie w witrynach typu danych lub danych. Na przykład eBay używa płynnego układu w swoich ofertach, ponieważ zapewnia lepsze wrażenia. Fora mogą również korzystać z płynnego układu. Ale blogi, kreatywne, zdjęcia, lub witryny firmowe korzystają znacznie lepiej z witryn o stałej szerokości.

Nie wiem na pewno, ale domyślam się, że większość drukowanych „dokumentów” jest zaprojektowana do drukowania w orientacji portretowej, a wiele osób nadal określa strony internetowe jako „dokumenty” - czy to może być kwestia kulturowa? Innym możliwym wyjaśnieniem jest to, że szerokość monitora różni się bardziej niż wysokość monitora ...

Przypuszczam, że generalnie odradza się zamieszczanie odpowiedzi w wątku, który nie widział aktywności od dłuższego czasu. Uważam jednak, że są pewne istotne rzeczy, o których jeszcze nie wspomniano.

Po pierwsze, pozwól mi wspomnieć o następującym rozszerzeniu Firefoksa, które odkryłem kilka miesięcy temu: Column Reader

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Dlaczego przewijamy w pionie?

Dla porównania: rozważ język napisany w pionowych kolumnach. Do takiego języka idealne są obecnie monitory szerokoekranowe. Tak to działa: przewijasz prostopadle do kierunku linii. Strony książek mają format pionowy, ponieważ nasze linie są poziome.

Jak wskazano we wcześniejszych odpowiedziach: możliwości ponownego wlewania silników układu naszej przeglądarki są dostosowane do pionowego przepływu.

obsługa wielu kolumn

Zespół programistów przeglądarki może zdecydować się na dodanie funkcji wielokolumnowej w następujący sposób: Najpierw renderuj całą stronę jako pojedynczą kolumnę, a następnie pociąć ją na paski o wysokości piksela dostępnej przestrzeni okiennej i wyświetlić te paski na boku przy boku. Ale jak szerokie są kolumny? Nawet jeśli rzeczywisty tekst jest używany z bardzo małą szerokością, często strona koduje określony kolor tła dla całej szerokości dostępnego miejsca w oknie.
Następnie silnik renderujący musi grać bezpiecznie i przydzielić całą przestrzeń poziomą do jednej kolumny.

Czy projektanci mogą wdrożyć wielokolumnowy układ przepływu?
To napotkałoby poważne trudności. Musisz uzyskać wysokość i szerokość dostępnej przestrzeni okien oraz wykonać cięcie i układanie pasków w kolumny w JavaScript. Następnie musisz zdecydować, co zrobić z obrazami pociętymi na dwie części.

Radzenie sobie z takimi rzeczami jest tym, co robi silnik układu. Aby spróbować utworzyć bibliotekę JavaScript, która ułatwia ponowne układanie wielu kolumn, należy utworzyć silnik renderujący w Javascript. To tworzy platformę na platformie.

Rozmiar monitora

To frustrujące, że w efekcie monitory komputerowe skurczyły się w ciągu ostatnich kilku lat. Duże monitory miały 1200 pikseli wysokości, obecnie tylko 1050. Tak, są szersze, ale w przypadku tekstu nie można wykorzystać miejsca.

Ponadto w orientacji pionowej monitory te są zbyt wąskie.
Mam konfigurację z dwoma monitorami, z dwoma monitorami w orientacji pionowej, oba monitory mają rozdzielczość 1200 x 1600 pikseli. Dla mnie te 1200 pikseli to minimum.

Instrukcja warunkowa w CSS

Uwaga na temat układów o stałej szerokości.

Uwielbiam polecenie CSS, które umożliwia projektantowi stron internetowych dostosowanie się do szerokiego zakresu szerokości przy jednoczesnym unikaniu pasków przewijania i zachowaniu czytelności: „maksymalna szerokość”. (Istnieją cztery takie polecenia: minimalna szerokość, maksymalna szerokość, minimalna wysokość, maksymalna wysokość). W przypadku div zawierającego tekst podaj maksymalną szerokość, powiedzmy, 65em.

Dostajesz if / else.
Jeśli dostępne miejsce jest mniejsze niż 65em, tekst jest odpowiednio uzupełniany: brak poziomego paska przewijania Jeśli dostępne miejsce jest większe niż 65em, wówczas div zawierający jest ustawiony na 65em.

Monitory szerokoekranowe naprawdę wystartowały dopiero w ciągu ostatnich 2 lat - kiedyś były droższymi opcjami.

Jeśli chodzi o projekt, zawsze było postrzegane, że posiadanie długiej strony internetowej (dokumentu) jest tak długie, że użytkownik musiał przewinąć w dół, jest znacznie lepszy niż zmuszanie kogoś do przewijania z kilku powodów. Po pierwsze, w taki sposób działa większość dokumentów komputerowych, więc jest to bardziej „normalny” wzór; masz klawisz przewijania strony, ale nie ma klawisza przewijania strony. Po drugie, mamy obecnie prawie wszechobecne kółka myszy, więc przewijanie w górę / w dół jest bardzo łatwą czynnością, znacznie łatwiejszą niż przewijanie.

Na koniec, jak wybrać rozdzielczość, którą chcesz uzyskać - mój pulpit to 1920x1080; mój laptop ma wymiary 1440 x 900. Dla którego projektujesz?

Chociaż prawdą jest, że większość monitorów jest sprzedawanych dzisiaj w orientacji poziomej, należy również wziąć pod uwagę, że projektując stronę internetową, nie można dokładnie wiedzieć, z jakiej rozdzielczości ekranu będzie korzystał widz. Nadal 15% użytkowników Internetu działa z rozdzielczością ekranu 1024 lub mniejszą. To nie pozostawia wiele miejsca na ekspansję poziomą, zanim będziesz musiał przewinąć, aby zobaczyć informacje. Ponadto niektórzy użytkownicy nie surfują po Internecie w maksymalnie zmaksymalizowanym oknie. Jedynym rozwiązaniem tego problemu jest opracowanie projektu, który jest dynamiczny w zależności od wielkości okna przeglądarki. Jeśli kiedykolwiek spróbowałbyś to zrobić, bardzo chciałbyś spróbować ponownie, chyba że jest to absolutnie konieczne, ponieważ jest to królewski ból. Istnieje wiele innych powodów, aby mieć mniejszą szerokość, jak już wspomniano.

Istnieje wiele powodów:

• Dokumenty zawierające głównie tekst mają tradycyjnie proporcje portretu, więc sieć to zachowuje.

• Łatwiej jest czytać krótsze wiersze tekstu. Nie mam cytatu, ale jest to bardzo powszechna rada projektowa, do tego stopnia, że ​​jest standardem, a nie wytyczną.

• Projekt, który preferuje wąskie, jest bardziej elastyczny. Lubię przesuwać przeglądarkę do połowy pełnego ekranu monitora szerokiego ekranu i umieszczać obok niej coś innego (zwykle edytor tekstu lub inne okno przeglądarki). Tylko dlatego, że mogę mieć stronę internetową o szerokości 1920 pikseli, nie oznacza, że ​​zawsze chcę, żeby była. To trochę zarozumiałe dla projektanta stron internetowych, aby poczynić jakiekolwiek założenia dotyczące tego, jak będę (lub powinien) przeglądać ich stronę. Źle wspomina „Ta strona najlepiej wyświetla się w rozdzielczości 800x600 na IE6”.

• Lepszym wyborem byłby płynny projekt, który można skalować do dowolnej szerokości, a CSS sprawia, że ​​działa dobrze dla tekstu (przez większość czasu, być może w większości nowoczesnych przeglądarek). Ale obrazy, osadzone wideo, flash i inne nowoczesne osadzone obiekty zawsze psują taki projekt bez większego wysiłku. Biorąc pod uwagę wybór między elastycznym projektem skalowania, którego uzyskanie zajmuje dużo czasu, a wypróbowanym i prawdziwym projektem o wąskiej stałej szerokości, sporo osób wybrałoby łatwiejszą (tańszą) ścieżkę.

• Najbardziej elastyczny wybór to coś w rodzaju iGoogle, płótna części WWW z możliwością dostosowania przez użytkownika. Następnie tekst może być tak szeroki lub wąski, jak chcesz, z blokami tekstu i obrazów ułożonymi tak, jak chcesz. Teraz chciałbym, abyś wyobraził sobie koszmar każdej odwiedzanej witryny wymagającej dostosowania, zanim będzie ona czytelna.

Na razie standard projektowania stron internetowych ma zostać opracowany w rozdzielczości 960px, aby dostosować go do rozdzielczości ekranu 1024px i większej (bez poziomego paska przewijania). Jest to minimalny wymóg, ponieważ nie wszyscy używają nowego, 24-calowego monitora. (pomyśl o tabletach i netbookach, które są nowym sprzętem o małych rozdzielczościach)

Należy pamiętać, że na docelową rozdzielczość strony wpływa docelowa widownia i należy ją odpowiednio dostosować.

Również pod względem użyteczności linie tekstu powinny mieć około 11 do 14 słów szerokości (może być więcej, jeśli dostosujesz wysokość linii), więc nie wszystkie strony internetowe mogą obsługiwać płynne projektowanie.

W najlepszym razie, jeśli nie chcesz, aby odwiedzający mieli wrażenie, że strona poza strefą zawartości nie jest pusta, możesz dodać paski tekstur / kolorów, które rozciągają się poza i dostosowują się do wielkości ekranu użytkownika. (jak na http://www.cnn.com/, który dotyczy tylko nagłówka, ale możesz zrobić to dla całej strony)

Dlaczego większość stron internetowych jest zoptymalizowana do wyświetlania w trybie portretowym?

Dlaczego drukujemy papier w trybie pionowym, gdy krajobraz jest również w pełni wykonalną opcją?

Jak wiele osób powiedziało, łatwiej jest odczytać większą liczbę krótkich linii niż dwie lub trzy długie linie.

Poza tym, gdyby wypełnić zawartość 1280 * x pikseli, strona byłaby zagracona i nikt nie wiedziałby, co należy rozwiązać. Strona internetowa powinna wykonywać określone zadanie, a nie KAŻDE zadanie.

Trendy Web 2.0 uczą nas umieszczać mniej informacji na stronie, a wezwanie do działania jest jasne i zwięzłe. Ta powszechnie akceptowana filozofia projektowania jest dokładnym przeciwieństwem tego, co sugerujesz.

Istnieje wiele powodów, dla których warto opracować rozdzielczość 1024, ale myślę, że czynnik bałaganu jest jednym z ważniejszych.

Zauważyłem, że używasz czegoś, co wygląda na Windows 7, więc odpowiedź brzmi: Win+←

Mówiąc poważnie: głównym powodem, dla którego strony internetowe są optymalizowane w pionie, jest to, że łatwiej jest zakodować układ o statycznej szerokości w CSS i sprawić, by wyglądał poprawnie w różnych przeglądarkach na wielu platformach. Od czasu do czasu używane są szerokości płynów, ale nie nadają się do czytelności.

Podczas oglądania filmu lub grania w gry świetnie jest wykorzystać całą swoją poziomą przestrzeń na rzeczy, ale podczas czytania naprawdę potrzebujesz tylko małej kolumny tekstu, aby oczy mogły skanować naturalnie, bez konieczności obracania głowy. Dodanie większej ilości bzdur po lewej i prawej stronie strony będzie odwracało uwagę od głównej zawartości strony, więc wielu projektantów po prostu pozostawia puste, aby mieć atrakcyjną białą przestrzeń.

Dodatkowo to, że masz ładny monitor, nie oznacza, że ​​większość ludzi ma ładny monitor szerokoekranowy. Świetnym źródłem informacji o rozmiarach układu jest rozmiar przeglądarki Google .

Twój monitor jest źle ustawiony. Monitor programisty powinien być wyższy niż szeroki, w pionie, a nie w poziomie.