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

Один из самых задаваемых вопросов на моём курсе по «Вебу» — «Под какое разрешение нам стоит делать свои дизайны?» Полный ответ будет немного мудреным, но основные советы очевидны:


* Оптимизируйте под 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%, вы окупите своё вложение меньше чем за год (типичные корпоративные накладные удваивают издержки компании на сотрудника; всегда помните, что в любом подсчёте производительности необходимо использовать стоимость работ, а не зарплату).

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

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

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

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

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

Статьи по теме

Чат-бот – что это такое

Чат-боты уже давно являются неотъемлемой частью нашей жизни. Они помогают получить ответы на самые часто задаваемые вопросы, решить воз�...

2022-04-25

Основные UX-тренды 2022 года

Традиционно новый год приносит с собой ряд изменений в сфере e-commerce. Чтобы успешно конкурировать на рынке с другими компаниями, представ�...

2022-01-18

Особенности оформления подвала сайта

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

2021-08-02

Обратный звонок: полезный инструмент или раздражитель?

Несмотря на то, что в последние годы переписка между компанией и клиентами является основным методом коммуникации, некоторые люди по-пр�...

2021-03-29

Фирменный стиль: секреты успешной разработки

Число брендов на мировом рынке постоянно увеличивается. Чтобы выделиться среди конкурентов, вам необходимо разработать фирменный стил�...

2021-03-19

ТОП-10 онлайн-консультантов для сайта

Онлайн-консультанты − помощники, которые встречают гостей сайта практически сразу после визита на интернет-площадку. Эти виджеты позво...

2021-02-24

Вопросы юзабилити: на что обратить внимание в 2021 году?

Вопросы юзабилити: на что обратить внимание в 2021 году? Начало года − время для подготовки плана работы над сайтом. В зоне внимания в�...

2021-01-19

Подключение платформы Яндекс.Диалоги на веб-сайт

Два года тому назад компания Яндекс представила новую платформу, которая дала возможность эффективно работать с потенциальными покупа�...

2020-09-15

Текст для карточки товара: как сделать идеальное описание?

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

2020-08-21

Онбординг: получаем признание клиентов за несколько секунд

Понятие «онбординг» используется для обозначения знакомства пользователя с интернет-магазином, информационным порталом, другим сайто�...

2020-07-30

Главная страница: идеальное юзабилити

Главная страница − лицо вашего сайта, а значит, она должна быть выстроена и оформлена идеально. По одёжке встречают − на онлайн-простора...

2019-06-26

Поведенческие факторы: суть и специфика их влияния на продвижение сайта

Поведенческие факторы (ПФ) − это всевозможные действия, которые совершают на интернет-сайте посетители. Их набор меняется с течением вр�...

2019-06-18

Оформление электронной корзины: как не помешать пользователям сделать покупку?

Онлайн-коммерция − высококонкурентная сфера. Чтобы побудить пользователей к приобретению, мало просто добавить активную кнопку «Купит...

2019-05-15

Оформление текстов на сайтах: 10 полезных советов

Важность текстового контента для интернет-ресурсов трудно переоценить. Мы уже неоднократно говорили о том, что материалы должны быть ин...

2019-01-09

3 конкретных шага, чтобы сделать ЛЮБОЙ сайт продающим! Или как минимум улучшить его.

ЗДРАВСТВУЙТЕ! Нам все чаще за последнее время стали поступать заявки с вопросами: как привлечь клиентов, какие рекламные каналы работ...

2017-03-01