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

Краткое описание

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

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

• Оптимизируйте вёрстку под разрешение 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, пользователи редко разворачивают окно браузера на весь экран, поскольку очень немногими сайтами удобно пользоваться при их растяжении на такую ширину. Большие экраны чудесно подходят для работы с таблицами, графического дизайна и многих других задач, но не для веб-страниц при текущей парадигме их создания и использования. Сегодня пользователи больших экранов обычно используют имеющееся дополни­тельное пространство для одно­временного отображения нескольких окон и параллельного просмотра разных сайтов.

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

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