Чому більшість веб-сайтів оптимізовані для перегляду в портретному режимі? [зачинено]

Я просто не можу цього зрозуміти. Практично всі монітори мають співвідношення сторін, де ширина набагато більша за висоту, і все ж майже всі веб-сайти розроблені саме навпаки? Я насправді не веб-розробник і зараз просто експериментую з речами, але це безумство мене бентежить !!!

Редагувати: Справа не в тому, що я хотів би обмежити висоту веб-сайту. Справа в тому, що я хотів би, щоб якимось чином заповнив увесь доступний простір, коли я маю 1920x1080 у ландшафтному режимі.

Правка 2: Дивіться це, щоб зрозуміти, про що я говорю

Існує обмеження на те, наскільки далеко може сканувати око, не втрачаючи сліду за наступним рядком, коли ви доберетеся до кінця поточного рядка. Було проведено ряд досліджень ( включаючи це ) щодо оптимальної ширини лінії та читабельності.

Можливо, ви зможете звести його до градусів, але для того, щоб знати, що оптимально в цей момент, потрібно знати, наскільки далеко від користувача від монітора. Ось чому більшість рекомендацій стосується вимірювань у emбуквах, символах чи словах. Розмір у пікселях залежить від розміру шрифту, але загальний консенсус все ще працює.

Мені особисто було б дуже важко читати статтю, якби вона була відформатована для використання на повну ширину екрана 1080p. Я впевнений, що і ви. Наші нинішні конвенції випливають із керівних принципів дизайну друку, і вказівки щодо макета істотно не змінюються Єдина відмінність полягає в тому, що ми можемо взаємодіяти зі сторінкою у браузері.

Додатковий коментар : (з питання, поставленого в коментарях)

Існують обмеження того, що HTML може зробити для вас на екрані. З одного боку, сторінок немає. Тільки смуги прокрутки. Розробка розумної поведінки щодо того, як браузер повинен відображати розмітку, є дуже складним пропозицією. У властивості CSS3 для декількох стовпців макета не зробили його з кандидатів стадії рекомендації ще. З нею можна пограти, як описано в цій статті , хаки . Однак на більшості сайтів він поки що не зовсім готовий до прайм-тайму.

Поки ваш вміст не потребує прокрутки, ви повинні бути в порядку. Як тільки це зробить, підхід у кілька стовпців може поставити певні проблеми щодо взаємодії користувача з сайтом.

Коментар до поточного стандарту De Facto :

Щоб вирішити те, як ви переформулювали своє запитання, і наведений вами приклад, зрозумійте, що веб-дизайн повинен співвідносити ряд потенційно суперечливих вимог - і все ж залишати веб-сайт професійним виглядом. Для того, щоб збалансувати потреби дизайнерів та клієнтів, більшість будинків розвитку проектують за однією роздільною здатністю. Ця резолюція заснована на даних, які можуть бути легко доступними . Вони також можуть базуватися на історичних записах веб-трафіку або знання цільового середовища.

Найбільш поширені ширини екрана (1024, 1280, 1366) досить близькі, так що якщо ви спроектуєте найменший (1024p) і сконцентруєте дизайн на сторінці, він все одно буде добре виглядати на інших трохи більших горизонтальних розмірах. Це дуже важко отримати всі вирівняне право в будь-якому форматі, набагато менше доводиться підтримувати кілька форматів в залежності від ширини екрану. Кількість користувачів 1080p зростає, але все ще складає дуже малий відсоток усіх, кого вони мають підтримувати.

Якщо ви зацікавлені, я настійно рекомендую ознайомитись із деякими статтями з дизайну в "A List Apart" . Ви почнете розуміти, що робити те, що ви хочете, складніше, ніж це виглядає. Коли я розмістив запитання про розробку для 1080p , перші початкові відповіді склали "Зробити все більшим". Це щось, що просто ще не було на радарі для більшості веб-дизайнерів.

Більшість веб-сайтів є більш високими, тому вони широкі, тому що ви можете прокручувати вниз, щоб прочитати більше вмісту. Я особисто ненавиджу горизонтальні смуги прокрутки. Їх слід скасувати!

Веб-сайт все ще є портретним, а сайт виходить за нижню частину екрана. Не існує обмеження на висоту сайту.

Зараз є нескінченно довгі веб-сторінки (Дякую, AJAX). Що б ви зробили, якби побачили нескінченно широку сторінку? (Я хотів би вгамувати і вбити дизайнера, відхилившись від сторінки недостатньо добре, дизайнер повинен померти.)

Прокручування та повернення назад по кожному рядку призведе до самогубства. Ось чому люди роблять модні книги, такі як програми для перегортання сторінок, тому вам не доведеться прокручувати поперек.

Прочитавши попередні відповіді, я помічаю, що кілька пунктів відсутні, тому спробую описати їх.

Складне впровадження стовпців

Коли ви говорите про сторінки великої ширини, я уявляю, що ви говорите про текстові колонки, як те, що ви бачите у "фізичній" газеті. З цим є дві проблеми.

По-перше, фактичні HTML 4 та XHTML 1.0 / 1.1 не призначені для відображення тексту у стовпцях. Існують хаки для Firefox (а може й інших звичайних браузерів), але він не працюватиме в Internet Explhorror.

По-друге, в реальній реалізації Firefox або в майбутньому HTML 5, якщо текст повинен бути відображений у стовпцях, потрібно вказати ширину стовпця та кількість стовпців. Неможливо вказати висоту (наприклад, висоту сторінки, мінус висоту заголовка та висоту нижнього колонтитула), і дозволити браузеру регулювати кількість стовпців.

Це практично неможливо мати зручне розташування в стовпцях із лише горизонтальною смугою прокрутки, без вертикальної.

Ні 100% висоти

Фактичний HTML / XHTML призначений для регулювання розміру елементів відповідно до ширини сторінки. Використовувати висоту сторінки для показників дуже важко.

Це означає, що для коректного відображення вмісту вам доведеться використовувати хакі JavaScript. Іншими словами, для людей, які не мають JavaScript, ваш веб-сайт буде абсолютно непридатним.

Перегляд на половині екрана сторінки

З великими екранами 16: 9/16: 10 не незвично працювати з двома вікнами поруч ( Win+ ←/ Win+ →у Windows Seven). Це означає, що вікно браузера матиме невелику ширину та велику висоту.

Фіксовано проти динамічної ширини

Ваше припущення, що більшість веб-сайтів оптимізовано для перегляду в портретному режимі, може бути помилковим.

По-перше, більшість веб-сайтів взагалі не оптимізовані і написані людьми, які взагалі нічого не знають про розробку веб-сторінок.

По-друге, існує різниця між веб-сайтами з фіксованою шириною та веб-сайтами з шириною, яка дорівнює відсотку від ширини вікна браузера.

У першому випадку ви можете помітити, що більшість веб-сайтів не оптимізовані ні для портретного, ні для альбомного режиму. Зазвичай ширина фіксується до 1024, 800 або менше, що не має сенсу при перегляді їх на 24-дюймовому екрані з роздільною здатністю 1920 × 1080.

У другому випадку, якщо ви переглядаєте сторінку в повноекранному режимі на 24-дюймовому екрані, є ймовірність, що цей веб-сайт буде відображатися правильно як в портретному, так і в ландшафтному режимі.

Приклад: уявіть веб-сайт із галереєю фотографій. На сторінці є мініатюри, і коли ви клацаєте на ескіз, ви бачите повномасштабну фотографію. Якщо ескізи плаваючою, з динамічною шириною сторінки, вона буде добре відображатися в альбомному режимі. Особливо приємно буде побачити повномасштабні фотографії.

Чому сучасні монітори орієнтовані в ландшафтному режимі?

1. Формат відео Відео високої чіткості буде краще масштабуватися для орієнтованих на пейзаж дисплеїв.
2. Читання. Ліворуч праворуч або праворуч ліворуч, простіше читати великі блоки повних ліній без будь-якої прокрутки, якщо орієнтуватися в ландшафтному режимі.

EDIT: Переглянувши ваш коментар та уточнивши наміри свого початкового запитання, вам здається, ви націлені на якусь причину для двох та трьох макетів стовпців, які є найбільш поширеними сьогодні. Для цього короткий короткий підсумок історії веб-сайту:

Чому веб-сайти оптимізовані для перегляду в портретному режимі?

Я не думаю, що вони взагалі оптимізовані для цього. Це часто компроміс між тим, що певні аспекти завжди доступні, певні аспекти часто доступні і певні аспекти доступні лише в певному контексті. У кращому випадку, це можна назвати оптимальним компромісом.

Можливість розміщення основної, очікуваної навігації та вторинного контенту на кожній сторінці поряд із конкретним контекстом є причиною того, що два та три макети стовпців настільки ж поширені, як і вони. У попередні дні Інтернету багато сайтів експериментували з макетами, які пропонували те, що намагалися відображатись як макети одного стовпця, використовуючи динамічні навігаційні списки (або меню, проте ви хочете їх побачити), які приховували б себе та розширювали область читання для основний зміст. Але це було складною частиною: а) технічні виклики через відсутність сумісності браузера; b) юзабіліті: користувачі часто його розглядали, навіть якщо технічне завдання було подолано (велике, якщо) технічне завдання, як неінтуїтивне або нецільове полювання (для навігації) та знищення (досвід задоволення, оскільки деякі рішення змінили поведінку за умовчанням у контексті поведінки клацання мишкою).

Щоб подолати це, більшість сайтів прийняли стандарт дефакто і прийняли наслідки. Або два стовпці, що відображають навігацію в одному, і вміст в іншому, або третій стовпець додані, тому вторинний, неосновний навігаційний контент завжди може бути відображений (будь-яка його контекстна допомога, нотатки чи реклама, або нещодавні потоки зв'язку, що показують живу людину діяльність, пов’язана з сайтом або контекстом). Фактичний зміст контексту застряг посередині.

Це називається компонуванням з фіксованою шириною. Існують макети повної ширини або їх також називають рідиною. Є причина, чому використовується фіксована ширина. Одне полягає в тому, що роздільна здатність монітора впливає на зручність використання. Якщо у вас є величезний монітор, як у мене в 27 ", сайт виглядав би жахливим. Весь текст, фотографії та все було б настільки розповсюджено, мені буде важко зрозуміти макет чи сайт. Фіксований макет дозволяє мати гарний дизайн. Макет з рідиною використовується в основному в лістингу або типі даних. Наприклад, eBay використовує розкладку рідини у своїх списках, оскільки вона забезпечує кращий досвід. Форуми також можуть скористатися розкладкою рідини. Але блоги, творчі фотографії, або бізнес-сайти значно виграють від сайтів із фіксованою шириною.

Я точно не знаю, але я гадаю, що більшість "документів", які друкуються, розроблені для друку в портретному орієнтації, і багато людей все ще позначають веб-сайти як "документи" - це може бути культурною справою? Ще одне можливе пояснення: ширина монітора змінюється більше, ніж висота монітора ...

Я гадаю, що взагалі не рекомендується розміщувати відповідь у потоці, яка вже давно не бачила активності. Однак я відчуваю, що є деякі відповідні речі, про які ще не було сказано.

По-перше, дозвольте мені зазначити таке розширення Firefox, яке я виявив кілька місяців тому: Колонка Reader

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

Чому ми прокручуємо вертикально?

Для порівняння: розглянемо мову, написану у вертикальних колонках. Для такої мови, як поточні широкоекранні монітори, ідеально підходить. Так це і виходить: ви прокручуєте перпендикулярно напрямку ваших ліній. Сторінки книг у портретному форматі, оскільки наші лінії горизонтальні.

Як було зазначено в попередніх відповідях: можливості поповнення двигунів верстки нашого браузера налаштовані на поповнення вертикально.

можливість функціонування багато стовпців

Команда розробників веб-переглядача може вирішити, щоб додати можливості для багатьох стовпців наступним чином: спочатку візуалізуйте всю сторінку як єдиний стовпець, потім виріжте її на смужки з висотою пікселя наявного віконного простору та виведіть ці смужки збоку- побічний. Але наскільки широко ви робите стовпчики? Навіть коли для фактичного тексту використовується дуже мала ширина, часто сторінка кодує певний колір тла на всю ширину вільного простору вікна.
Тоді двигун візуалізації повинен захищатись і виділяти весь горизонтальний простір в одну колонку.

Чи можливо веб-дизайнерам реалізувати поновлюваний макет у багатьох стовпцях?
Це спричинило б серйозні труднощі. Ви повинні отримати висоту та ширину наявного віконного простору, а також вирізати та розташовувати смуги в стовпці в Javascript. Тоді ви повинні вирішити, що робити з зображеннями, розрізаними на дві частини.

Що стосується подібних речей - це те, що робить двигун компонування. Спробувати створити бібліотеку Javascript, яка полегшує поповнення макетів у декількох стовпцях - це створити двигун візуалізації в Javascript. Це створення платформи в платформі.

Розмір монітора

Мені здається неприємним, що фактично монітори комп’ютерів скоротилися за останні пару років. Великі монітори мали висоту 1200 пікселів, нині лише 1050. Так, вони ширші, але для тексту цей простір неможливо використовувати.

Крім того, у портретній орієнтації ці монітори занадто вузькі.
У мене подвійне налаштування монітора, обидва монітори в портретному орієнтації, обидва монітора - 1200x1600px. Для мене ці 1200 пікселів - мінімум.

Умовне твердження в CSS

Зауваження про макети фіксованої ширини.

Мені подобається команда CSS, яка дозволяє веб-дизайнеру вмістити широкий діапазон ширини, уникаючи смуг прокрутки та зберігаючи читабельність: "max-width". (Є чотири такі команди: min-width, max-width, min-height, max-height). Для тексту, що містить текст, вкажіть максимальну ширину, скажімо, 65ем.

Ви отримуєте if / else.
Якщо вільний простір менше 65ем, то текст поновлюється відповідним чином: немає горизонтальної смуги прокрутки Якщо вільний простір більше 65ем, то розділочний вміст, який міститься, встановлено на 65ем.

Широкоекранні монітори дійсно зняли лише за останні 2 роки - раніше вони були більш дорогими варіантами.

З точки зору дизайну, завжди вважалося, що наявність веб-сторінки (документа) триває так довго, що користувачеві довелося прокручувати вниз, набагато перевершує те, що хтось прокручує вгору з кількох причин. По-перше, це так, як правило, працює більшість комп'ютерних документів, тому це "нормальніший" зразок; у вас є сторінка вниз, але не сторінка через ключ. По-друге, у нас сьогодні є майже всюдисущі колеса миші, тому прокручування вгору / вниз - дуже легке заняття, набагато простіше, ніж прокручування поперек.

Нарешті, як ви виберете, яка широкоекранна роздільна здатність ви хотіли б отримати - мій робочий стіл 1920x1080; мій ноутбук - 1440x900. Для кого ви проектуєте?

Незважаючи на те, що більшість моніторів орієнтовані на пейзаж, які продаються сьогодні, ви також повинні врахувати, що, розробляючи веб-сайт, ви не можете точно знати, якою роздільною здатністю екрана користується глядач. Ще 15% користувачів Інтернету працюють з роздільною здатністю екрана 1024 ширини або менше. Це не залишає багато місця для горизонтального розширення, перш ніж вам доведеться прокручувати інформацію, щоб побачити інформацію. Крім того, деякі користувачі не користуються Інтернетом у повному обсязі. Єдине рішення цієї проблеми - розробити динамічний дизайн, що базується на розмірі вікна браузера. Якщо ви коли-небудь намагалися зробити це, ви б дуже вагалися спробувати його ще раз, якщо це абсолютно не знадобиться як королівський біль. Існує багато інших причин мати меншу ширину, про що вже згадувалося.

Є кілька причин:

• Документи здебільшого тексту мають традиційне портретне співвідношення, тому Інтернет зберігає це.

• Простіше читати короткі рядки тексту. У мене немає цитати, але це дуже поширена порада з дизайну, до тієї міри, що є стандартом більше, ніж настанова.

• Конструкція, яка надає перевагу вузьким, більш гнучка. Мені подобається відкривати браузер лише на половину повного екрана монітора, а поруч розміщувати щось інше (як правило, текстовий редактор чи інше вікно браузера). Тільки тому, що я можу мати веб-сторінку на 1920 пікселів, це не означає, що я завжди хочу, щоб це було. Це насправді трохи нахабно веб-дизайнеру робити будь-які припущення щодо того, як я буду (або повинен) переглядати їх сторінку. Дає мені погані відгуки до "Ця сторінка найкраще переглядається у форматі 800x600 на IE6."

• Кращим вибором буде рідкий дизайн, який масштабується до будь-якої ширини, і CSS робить це добре для тексту (можливо, більшість часу, у більшості сучасних браузерів). Але зображення, вбудовані відео, спалах та інші сучасні вбудовані об'єкти завжди викручують такий дизайн без великої праці. Зважаючи на вибір між гнучким дизайном масштабування, який потребує тривалого часу, щоб отримати правильний результат проти випробуваної та справжньої вузької конструкції з фіксованою шириною, досить багато людей обрали б простіший (дешевший) шлях.

• Найбільш гнучким вибором є щось на зразок iGoogle - полотно веб-частини, що регулюється користувачем. Тоді ваш текст може бути настільки широким або вузьким, наскільки ви хочете, з блоками тексту та зображеннями розміщеними, як вам захочеться. Тепер я хотів би, щоб ви уявили кошмар кожного веб-сайту, який ви відвідуєте, потребували налаштування, перш ніж його читати.

Наразі стандарт веб-дизайну для сайтів розроблений в ширину 960 пікселів для розміщення екрана 1024 пікселів і вище (без горизонтальної смуги прокрутки). Це мінімальна вимога, оскільки далеко не всі використовують шикарний новий 24-дюймовий монітор. (подумайте про планшети та нетбуки, які є новим обладнанням з невеликою роздільною здатністю)

Ви повинні пам’ятати, що на дозвіл розробки веб-сайтів впливає цільова аудиторія і її слід адаптувати відповідно.

Крім того, в термінах користування рядки тексту повинні бути шириною від 11 до 14 слів (може бути більше, якщо ви адаптуєте висоту рядка), щоб не всі веб-сайти могли впоратися з дизайном рідини.

У кращому випадку, якщо ви не хочете створювати відвідувачам відчуття, що сторінка поза зоною вмісту не порожня, ви можете додати текстури / кольорові смужки, які виходять за межі і адаптуються до розміру екрану користувача. (наприклад, на http://www.cnn.com/, що стосується лише заголовка, але ви можете це зробити для всієї сторінки)

Чому більшість веб-сайтів оптимізовані для перегляду в портретному режимі?

Чому ми друкуємо папір у портретному режимі, коли пейзаж є цілком життєздатним варіантом?

Як багато хто казав, легше читати більшу кількість коротких рядків, ніж читати два-три довгі рядки.

Крім того, якби ви наповнювали вміст 1280 * x пікселів, веб-сторінка була б захаращеною і ніхто не знав би, на що потрібно звернути увагу. Веб-сторінка повинна виконувати конкретне завдання, а не КОЖНЕ завдання.

Тенденції Web 2.0 вчать нас розміщувати менше інформації на сторінці та робити чіткий та стислий заклик до дії. Ця загальноприйнята філософія дизайну є абсолютно протилежною тому, що ви пропонуєте.

Є МНОГО причин для розробки резолюції 1024, але я думаю, що фактор безладу є одним з найбільш важливих.

Я помітив, що ви використовуєте те, що схоже на Windows 7, тому відповідь: Win+←

Але серйозна примітка: Основна причина, по якій веб-сайти оптимізовані вертикально, полягає в тому, що простіше кодувати макет статичної ширини в CSS і правильно виглядати крос-браузером на кількох платформах. Ширина рідини використовується зрідка, але вони не піддаються читабельності.

Переглядаючи фільм або граючи в гру, чудово використовувати весь горизонтальний простір за допомогою речей, але для читання вам дуже потрібен лише невеликий стовпець тексту, щоб очі могли сканувати природним шляхом, не потрібно повертати голову. Додавання більше лайна зліва та справа веб-сторінки, як правило, відволікатиметься від основного вмісту сторінки, тому багато дизайнерів просто залишають це порожнім, щоб мати привабливий пробіл.

Крім того, те, що у вас хороший монітор, не означає, що більшість людей мають гарний широкоекранний монітор. Чудовий ресурс для перевірки розмірів макета на - це браузер Google .

Ваш монітор орієнтований неправильно. Монітор програміста повинен бути вищим, ніж широкий, як у портретному, а не в пейзажному режимі.