Интересная статья от известного человека по имени Якоб Нильсен (Jakob Nielsen). Оригинал на английском языке — Screen Resolution and Page Layout.
Резюме: оптимизируйте интернет-страницы под 1024х768, но используйте плавающий дизайн, который правильно растягивается под любое разрешение — от 800х600 до 1280х1024.
Один из самых задаваемых вопросов на моём курсе по «Вебу» — «Под какое разрешение нам стоит делать свои дизайны?» Полный ответ будет немного мудреным, но основные советы очевидны:
Оптимизируйте под 1024х768 — это самый распространённый размер экрана. Несомненно, ориентироваться нужно на разрешение экранов вашей целевой аудитории, и в будущем размер будет меняться. Размер уже может быть другим, если, скажем, вы создаёте интранет для компании, которая выдает своим сотрудникам большие мониторы.
Не надо создавать сайты только под определённый размер экрана, так как размеры экранов пользователей различаются. Самих различий очень много, так как пользователи не всегда «максимизируют» свои браузеры (особенно если у них большие экраны).
Используйте «плавающие» дизайны, которые растягиваются под конкретный размер окна пользователя (избегайте статичных дизайнов, которые всегда одного размера).
На сегодняшний день около 60% всех мониторов настроены под разрешение в 1024х768 пикселей. Для сравнения — около 17% выставляют 800х600, поэтому вполне очевидно, что не так важно нацеливаться именно на пользователей с маленькими дисплеями. Также очевидно, что нельзя игнорировать эти 17% и предоставлять своим пользователям такую разметку страницы, которая требует больше свободного пространства, чем есть у пользователя на самом деле.
Оптимизация под 1024х768
Когда я говорю «оптимизация», я имею в виду то, что ваша страница должна выглядеть и работать оптимально на самом распространенном разрешении. При этом она должна хорошо выглядеть и работать на других размерах, поэтому я и рекомендую «плавающий» дизайн. Но он должен быть лучшим при разрешении 1024х768.
Три самых главных критерия для оптимизации интернет-страниц под определённый размер экрана:
Изначальный обзор: видна ли пользователям вся ключевая информация без прокрутки страницы? Это является компромиссом между количеством показанных предметов и насколько детально показан каждый предмет.
Удобочитаемость: насколько легко прочитать текст в разных колонках с определённой шириной?
Эстетика: насколько хорошо выглядит ваша страница, когда у всех элементов правильный размеры и правильное расположение? Все ли элементы правильно выстраиваются — например, находится ли подпись рядом с фотографией, и т.д.?
Вам необходимо держать в голове эти три критерия при всех возможных разрешениях, постоянно изменяя размер окна браузера от 800х600 до 1280х1204. Всё должно выглядеть на высоком уровне при всех разрешениях.
Также ваш сайт должен работать при более маленьких и при более больших размерах, но такие ситуации менее критичны. Меньше чем полпроцента пользователей работают с разрешением 640х480. При этом для таких пользователей ваш сайт должен отображаться вполне приемлемо с допустимыми отклонениями.
Как говорит первый критерий — нужно всегда брать во внимание прокрутку страницы. Обычно пользователям не нравиться прокрутка (в моей новой книге это детально описано вместе со статистикой, которая показывает, сколько пользователей прокручивают различные типы страниц). Итак, когда вы делаете дизайн, вы должны учитывать сколько информации увидят пользователи если прокрутят один или два полных экрана.
Прокрутка и изначальный обзор зависят от размера экрана: чем больше экран, тем больше информации он показывает и тем меньше нужно делать прокруток. Здесь вы и должны заниматься оптимизацией для 1024х768: показать самый важный материал не прибегая к прокрутке (вместе с этим необходимо убедиться, что критическая информация останется видимой при разрешении 800х600).
Итак, как на счёт крошечных экранов, например мобильные устройства. «Плавающий» дизайн должен изменить свой масштаб под мобильный телефон, но не думайте, что так надо делать сайт вашей компании. Среда мобильных телефонов имеет свою специфику; чтобы оптимизировать сайт под мобильное устройство, необходимо создать отдельный сервис, который будет предоставлять меньше функций, будет написан более сжато, и который будет ориентирован на содержание сайта.
Большие экраны
У многих пользователей большие экраны. В настоящий момент около 18% используют как минимум разрешение равное 1280х1024 пикселям. Процент пользователей с большими экранами растёт, но не так как я бы этого хотел.
Большие мониторы — самый простой способ повысить производительность, и любой, кто зарабатывает минимум $50,000 в год, должен иметь разрешение экрана не менее 1600х1200. Плоский дисплей с таким разрешением стоит меньше $500. Поэтому пока большие дисплеи повышают производительность как минимум на 0.5%, вы окупите своё вложение меньше чем за год (типичные корпоративные накладные удваивают издержки компании на сотрудника; всегда
Читать далее...