Прокрутить к контенту ↓


Разрешение экрана и макет страницы

Краткое описание
Оптимизируйте веб-страницы под разрешение 1024×768, но делайте макеты резиновыми, чтобы они достаточно хорошо выглядели на любом разрешении от 800×600 до 1280×1024.

Один из наиболее часто задаваемых вопросов по web-юзабилити — «Под какое разрешение следует разрабатывать дизайн?». Развёрнутый ответ относительно сложен, однако основная его суть проста.

  • Оптимизируйте макет под разрешение 1024×768, которое в настоящее время используется наиболее широко. Разумеется, следует проводить оптимизацию под разрешение, наиболее распространённое среди целевой аудитории сайта, поэтому упомянутый размер в будущем изменится. Это может иметь место и сейчас, если, скажем, вы разрабатываете дизайн для интранет-сайта компании, которая обеспечивает всех своих сотрудников большими мониторами.
  • Не разрабатывайте сайт в расчёте строго на одно разрешение, поскольку размеры экрана у всех пользователей разные. Это тем более актуально, если учесть, что пользователи не всегда разворачивают окно браузера на весь экран (особенно если у них большие экраны).
  • Используйте резиновые макеты, которые автоматически подстраиваются под текущий размер окна браузера (иначе говоря, избегайте жёстких макетов, имеющих одну и ту же ширину вне зависимости от размера окна).

В настоящее время примерно на 60% всех мониторов используется разрешение 1024×768. Для сравнения, лишь около 17% используют 800×600, откуда очевидно, что наилучшее отображение сайта на таких дисплеях — не самая важная задача. Не менее очевидно, однако, что эти 17% нельзя просто игнорировать, создавая жёсткий макет, для отображения которого в полную ширину не хватит экранного пространства пользователя.

Оптимизация под 1024×768

Когда я говорию «оптимизация», я подразумеваю, что страница должна выглядеть и работать наилучшим образом в окне наиболее распространённого размера. При этом она выглядит хорошо и работает достаточно хорошо при иных размерах окна — именно поэтому я и рекомендую резиновую вёрстку. Однако лучше всего страница должна смотреться и работать на 1024x768.

Три основных критерия при оптимизации макета страницы для определённого разрешения таковы:

Изначальная видимость
Видна ли вся наиболее существенная информация и могут ли пользователи видеть её без прокрутки? В этом заключается компромисс между тем, как много информации показано в целом, и тем, насколько подробной является информация в масштабе каждой информационной единицы.
Читабельность
Насколько легко прочитать текст в различных колонках при их текущей ширине?
Эстетика
Насколько хорошо смотрится ваша страница, когда элементы имеют правильные размеры и расположение для конкретного экранного разрешения? Отображаются ли все элементы правильно — т. е. следуют ли подписи к фотографиям непосредственно за фотографиями и т. д.

Все три критерия следует иметь в виду для каждого из целевых размеров экрана, на которые вы ориентируетесь, постоянно проверяя поведение макета при изменении размеров окна браузера в диапазоне от 800×600 до 1280×1024.

Желательно, чтобы ваша страница работала и на размерах, не принадлежащих к этому диапазону, хотя подобные крайности не столь важны. Менее полупроцента пользователей всё ещё используют разрешение 640×480. Хотя такие пользователи, безусловно, должны иметь доступ к вашему сайту, предоставление им более-менее приемлемого дизайна является допустимым компромиссом.

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

Как прокрутка, так и первоначальная видимость зависят от размера экрана: большие экраны позволяют отобразить больше контента над линией сгиба без прокрутки. Именно в этом разрезе вам следует проводить оптимизацию под 1024×768: представить наиболее интересный материал над линией сгиба при этом разрешении (убедившись при этом, что особенно важная информация видна и на 800×600).

А как насчёт маленьких экранов вроде тех, что встречаются на мобильных устройствах? Следует стараться, чтобы резиновый дизайн отображался на устройствах вплоть до телефона, однако не рассчитывайте на то, что этого достаточно для поддержки «мобильного» пользователя. Мобильная среда специфична; оптимизация под неё требует разработки отдельного сервиса, обеспечивающего меньшее количество возможностей, более лаконичного и более подходящего для мобильного использования в целом.

Большие экраны

Многие пользователи обладают большими дисплеями. В настоящее время порядка 18% пользователей используют как минимум 1280×1024. Количество пользователей с большими экранами растёт, хотя не столь быстро, как мне бы того хотелось.

Большие мониторы являются наиболее простым способом увеличить производительность офисных работников, и каждый, чей доход составляет по меньшей мере 50 тыс. долларов в год, должен иметь разрешение экрана 1600×1200. Плоскопанельные дисплеи с этим разрешением стоят сейчас менее 500 $. Так, если экран большего размера увеличит производительность хотя бы на 0,5%, вы восполните затраты на монитор менее чем за год. (Типичные корпоративные накладные расходы в два раза превышают затраты компании на сотрудников; всегда учитывайте вложенные в сотрудника средства, а не его заработную плату, при любом расчёте производительности).

Как Apple, так и Microsoft опубликовали отчёты, где пытались измерить увеличение производительности от использования мониторов большего размера. К сожалению, из-за различных методологических недостатков не было приведено конкретных цифр. Мой опыт показывает, что предполагаемый прирост производительности составляет 5-10%, когда пользователи выполняют работу, тесно связанную с компьютером, на большом мониторе. Это означает суммарный прирост производительности порядка 0,5-1% на сотрудника, в общем объёме работы которого труд, ориентированный на использование монитора, занимает 10% рабочего дня. Без сомнения, большие экраны оправдывают затраты на них.

Лично я использую дисплей 2048×1536, и я бы даже не сказал, что это действительно большой экран. Я ожидаю, что в течение ближайших 10 лет достаточное распространение получат мониторы с разрешением, скажем, 5000×3000 — по меньшей мере, среди профессионалов высшего уровня.

Начиная с 1600×1200, пользователи редко разворачивают окно браузера на весь экран, поскольку очень немногими сайтами удобно пользоваться при их растяжении на такую ширину. Большие экраны чудесно подходят для работы с таблицами, графического дизайна и многих других задач, но не для веб-страниц в рамках текущей парадигмы их создания и использования. Сегодня пользователи больших экранов обычно используют имеющееся дополнительное пространство для одновременного отображения нескольких окон и параллельного браузинга.

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

В любом случае, потребность в новой парадигме в будущем не изменит текущую рекомендацию: оптизизируйте под 1024×768, но не разрабатывайте дизайн в расчёте исключительно на этот размер. Ваши страницы должны работать на любом разрешении от 800×600 до 1280×1024 и выше.