Ваши мысли о веб-дизайне для экранов 16: 9

Ответ 1

В большинстве случаев разрешение только что увеличилось на горизонте над доской, когда мы смотрим на широкоэкранное принятие. 1024x768 ноутбуков идут 1280x800, 1600x1200 отображает 1920x1200 и так далее. Вертикальный размер по-прежнему доступен, как обычно.

На этот раз я обновляю этот ответ, чтобы адаптироваться к изменениям о том, как, где и с кем люди путешествуют по сети. Я стремлюсь к гибким проектам, которые в какой-то степени текут, но благодаря медиа-запросам и другим полезным методам дает дизайнеру гораздо больший контроль над репрезентацией представления, хотя у него есть возможность адаптироваться к любому виду/размеру экрана.

Адаптация и сворачивание содержимого, когда доступный вид меньше определенного предела, и сохранение текста с максимальной шириной строки, но расширение и повторное расположение других элементов - это то, что я начал делать.

Это ограничивается не только сокращением сайта на мобильном устройстве, но и адаптацией элементов в полноэкранном браузере на телевизоре высокой четкости, а также просто заполнением и хорошим просмотром на меньшем планшете с неживой к нетбуку.

Я до сих пор лично не понимаю использование традиционных "флюидных" макетов, где колонка центрального текста может без ограничений расширять до 2000 пикселей, за исключением веб-приложений , где у вас есть превосходные матрицы данных для отображения или большого изображения, а не фактического текстового содержимого. Лично я наткнулся на слишком много таких сайтов, где маржа тоже слишком мала, и если я расширяю браузер, маржа не увеличивается даже при полной ширине 1920 и все еще слишком мала - дизайнер наложил на меня неудобный запас и я не могу исправить это, не изменив CSS сайта с помощью инструментов браузера dev ^^

Первые шаги в отзывчивом дизайне для меня заключались в том, чтобы принять печально известную фиксированную ширину 960 пикселей, которую я так люблю, и адаптировать ее в три этапа, когда представление было меньше. Это сделало его приятным на небольших устройствах вплоть до экрана телефона. Тем не менее, моя текущая задача заключается в расширении дизайна вокруг отметки 1200 пикселей, когда материал становится слишком широким для моего вкуса, и нужно выполнить повторный поток другого элемента, но многие сайты не имеют никакого контента, чтобы даже использовать для этого...

Ответ 2

Как пользователь и разработчик, я ненавижу сайты с фиксированной шириной. Многие сайты могут быть сделаны текучими, но не потому, что это "легкий выход". Затем следует всевозможные рационализации, которые установлены (предназначены для каламбура), чтобы поддержать эту точку зрения.

Newsflash: короткие длины строк - это миф, который относится к ранним исследованиям в газетах. Подробнее см. это резюме и сделайте свое собственное мнение.

Очень широкие строки могут быть нечитабельны для некоторых (я не нахожу, что столько же проблем, лично), но и фиксированные макеты ~ 900px с тремя столбцами, так что каждая строка составляет от восьми до десяти слов.

Я всегда старался разработать для разумного изменения размера, глядя на демографию сайта (например, через Google Analytics) и видя, кто, как правило, посещает...

Ответ 3

16: 9 экраны на самом деле не ограничены вертикально, если вы думаете об этом. По моему опыту с этими мониторами их родные разрешения, как правило, 1920x1080. Вертикальное пространство по-прежнему больше, чем большинство разрешений (1024x768, 1280x1024 и т.д.).

Однако я начал писать жидкие макеты для обработки горизонтального пространства. Некоторые веб-дизайнеры любят придерживаться фиксированной ширины 960 пикселей. Все зависит от того, что вы пытаетесь представить пользователю.

Ответ 4

Вот некоторые принципы, которые я бы рекомендовал в качестве пользователя, но также как веб-дизайнер и разработчик:

• Старайтесь избегать горизонтальной прокрутки. У большинства людей есть колесо прокрутки мыши, которое работает только в одном направлении. Горизонтальная прокрутка часто считается очень раздражающей. Вертикальная прокрутка обычно приемлема сейчас.
• Размер столбца имеет значение в длинных абзацах. Обычно я рекомендую ширину около 15-20 слов, но не стесняйтесь экспериментировать. Ссылка из alphadogg интересна для чтения, но мне пришлось бы сказать, что трудно использовать термин "дюймы" в веб-разработке. Слова или персонажи, возможно, являются лучшим измерением, что приводит меня к следующему пункту:
• Используйте относительные единицы для ширины. Это позволяет в большинстве случаев сохранить ширину на определенное количество слов.
• Полезный совет: проблема с относительной единицей заключается в том, что страница может быть расширена за ширину страницы. Вы можете управлять этим в большинстве браузеров, указав свойство max-width в css 90% или около того. Поэтому, когда текст большой для кого-то отображается, им по-прежнему не нужно прокручивать по горизонтали.

Снова не рекомендуется просто переводить контент на 100% ширины браузера большую часть времени. И я думаю, что по мере того, как дисплеи становятся больше, вы увидите, что в любом случае все больше пользователей будет максимально увеличивать окна браузера.

Ответ 5

В дополнение к другим комментариям...

Большинство пользователей пока не используют широкоформатные мониторы. Что еще более важно, многие пользователи, которые используют широкоэкранные мониторы, не имеют своих веб-браузеров.

Ответ 6

В наши дни я не очень беспокоюсь о старых экранах, и, когда 800px недостаточно, я легко переключаюсь на 1000px. Однако вы не должны проектировать намеренно для чего-то более широкого, например, разрешения 1920x1080. Количество пользователей с такими экранами не так много. Даже если это не так, слишком широкие конструкции влияют на удобство использования. Чтение текстов, растянутых по горизонтали до ~ 1500 пикселей, не очень приятно.

Ответ 7

Одна вещь, которую следует учитывать, - это ваше приложение. Является ли это суверенным приложением, в котором пользователю следует уделять все свое внимание на какое-то время? Недавно я переработал страницу в нашем веб-приложении, которая позволяет пользователю выполнять переводы на другие языки. В этом случае пользователь некоторое время будет "погружаться" в эту часть приложения, поэтому я удалил обычные навигационные элементы, которые были бы отвлечением, чтобы позволить больше недвижимости для этой задачи.

В этом случае пользовательская база была ограничена людьми внутри моей компании, которые, как я знал, имели широкоэкранные мониторы, поэтому было легко принять решение о расширении. В общем, я бы сказал, что все еще нужно проектировать для не широкоформатных мониторов, но в тех случаях, когда есть значительное преимущество, сделайте проект способным воспользоваться дополнительным пространством. Я видел несколько страниц, которые были выложены для обычных экранов, но использовал JavaScript для определения того, была ли страница более широкой и переупорядочивать некоторые элементы страницы, если это было. Таким образом, конфигурация по умолчанию всегда использовалась, но пользователи с широкими экранами и JavaScript лучше использовали бы свое пространство.

Ответ 8

Я делаю все свое развитие на 30-дюймовом мониторе и просматриваю его на 20-дюймовом мониторе в качестве быстрой проверки работоспособности. В недавнем выпуске приложения я сделал JS, чтобы отправить статистику того, что использовала моя целевая аудитория, и я возвращаюсь с большим количеством случайных чисел меньше 1024x768. Из ста статистик, которые я собрал, только 5 или 6 пользователей работали полный экран на чем-то большем, чем экран 1440x900.

Ответ 9

Создайте свой сайт таким образом, чтобы это был контент, а не как он выглядит. Затем вы можете предоставить альтернативные таблицы стилей CSS для выбора пользователем.

Это может быть сложнее для дизайнера. Например, использование таблиц для компоновки не работает.

Ответ 10

Пожалуйста, не делайте этого.

Дизайн для макс. 4: 3, возможно, от 800 до 900 пикселей.

Многие компьютеры, которые я использую (например, почти каждый в моей работе), 4: 3. Только мой ноутбук - 16: 9 (на самом деле 16:10 я думаю, но достаточно близко).

Мне не нравится, когда мой браузер настолько широк, как мой монитор, это пустая трата пространства. Вы не можете прочитать текст, который широко. На моем рабочем столе 4: 3 ЖК-дисплей (который я использую сейчас) ширина составляет 14 дюймов. Вы не можете читать текст шириной 14 дюймов, глаз теряет трек, на котором он находится. Это ужасная боль. Большинство сайтов ограничивают ширину реального контента. Столбец основного содержимого StackOverflow для меня составляет около 8 дюймов, отличный размер для чтения.

Итак, когда вы идете 16: 9, все становится хуже. Теперь вместо 14 "у вас может быть 16". Это огромное. Итак, что вы делаете со всем этим пространством? Вы не можете просто поместить текст, если вы не хотите иметь две статьи бок о бок (например, две газетные колонки), и я сомневаюсь, что вы хотите это сделать. Это означает, что вы просто наполните его несущественной ерундой. Больше боковых панелей, больше столбцов объявлений. В основном вы заставляете контент заполнять пространство.

Не все работают с разрешением 1920x1080. Не все поддерживают свой веб-браузер максимально. Наполнение почти половины моего экрана несущественными колонками не привлекает меня.

Ответ 11

В моем курсе проектирования у нас было правило большого пальца, длина линии не должна превышать 40 строк строки. Причина очевидна: когда ваши глаза вернутся к началу следующей строки, вы хотите быть уверенным, что это следующая строка, а не одна и та же строка, или следующая плюс.

По этой причине я всегда использую дизайн с фиксированной шириной. Мой текущий монитор имеет активную область шириной 43 см. Высота линии на этой странице SO составляет 5 мм. Если SO будет использовать дизайн жидкости, то длина линии линии/высота линии будет неприемлемой. 84.
И еще хуже на 30-дюймовых мониторах.

Ответ 12

Я придерживаюсь разработки для большинства, которая все еще использует мониторы 4: 3. Если бы я хотел создать контент, специфичный для 16: 9, я бы, вероятно, предоставил ссылку на версию Enhanced для широкоэкранных мониторов, похожую на ярлык на обратной стороне DVD-дисков, с тех пор, пока не все из них были анаморфными.

Ответ 13

Подавляющее большинство веб-пользователей по-прежнему находятся на стандартных, не широкоформатных мониторах (см. статистику и мой комментарий ниже), поэтому я бы разработал для них. Я лично оптимизирую для разрешения 1024x768.

http://www.thecounter.com/stats/2009/January/res.php

Ответ 14

Вот ссылка на другой вопрос SO, который может содержать некоторую полезную информацию.

book-recommendation-web-user-interface-design

Ответ 15

Не допускайте, чтобы на широком экране вертикальное разрешение было ОК. 1440x900 кажется популярным разрешением, и хотя он больше 1024x768, он заметно короче 1280x1024.

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

Ответ 16

Не забывайте, что только потому, что у пользователя есть широкоэкранный монитор, это не значит, что у них также увеличены окна.

Ответ 17

Я всегда использую 964px как мою ширину для веб-сайтов. Приблизительный, меняющийся от сайта к сайту, но я держу его под шириной 1024 пикселя, принимая во внимание вертикальные полосы прокрутки. Это позволяет использовать сайт не слишком большой для экрана шириной 800 пикселей, но он достаточно велик, чтобы хорошо выглядеть на экранах с разрешением 1024 и 1280 пикселей.

Я нашел в своем опыте, что даже пользователи, которые используют довольно большие широкоэкранные экраны (я сам с двойными 22 "(1680x1050) экранами, я по-прежнему предпочитаю формат фиксированной ширины, шириной приблизительно 1024 пикселя для удобства чтения.

Мне очень не нравится читать очень большие промежутки текста, и мне нравится держать его в "ширине книги". Большинство сайтов, которые я нахожу привлекательными, имеют большую пользовательскую базу вокруг этих размеров.

Надеюсь, что это поможет.

Ответ 18

Как обычный пользователь широкоформатных мониторов, я не хочу, чтобы дизайнеры делали свои сайты более широкими. Я запускаю 24-дюймовые широкоэкранные экраны (1920x1200), и когда я просматриваю в Интернете, я обычно запускаю два браузера рядом. Если что-нибудь, сделать некоторые сайты немного более узкими, было бы лучше. Большинство сайтов будут работать нормально в 960 пикселей, но это раздражает, когда мне приходится всплывать по сайту более широко или прокручивать, чтобы увидеть все.

Ответ 19

Обратите внимание на быстро растущую аудиторию пользователей нетбуков, которые используют экраны 1024x600. Я думаю, что это должен быть ваш минимальный размер дизайна для текущих проектов.