Font Size

Profile

Layout

Direction

Menu Style

Cpanel

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

Одно из популярных вопросов, который задают на моем курсе по "Веб эргономике" - "Под расширении нам стоит делать свои дизайны?"

Полный ответ будет несколько замудрою, но основные рекомендации очевидны:

* Оптимизация под 1024х768 - это самый распространенный размер экрана. Несомненно, ориентироваться нужно на разрешение экранов Вашей целевой аудитории, и в будущем размер будет меняться. Размер уже может быть другим, если, скажем, вы создаете интранет для компании, которая выдает своим сотрудникам большие мониторы.
* Не нужно создавать сайты только под определенный размер экрана, так как размеры экранов пользователей различаются. Самих различий очень много, потому что пользователи не всегда "максимизируют" свои браузеры (особенно если у них большие экраны).
* Используйте "плавающие" дизайны, которые растягиваются под конкретный размер окна пользователя (избегайте статичных дизайнов, которые всегда одного размера).
На сегодняшний день около 60% всех мониторов настроены под расширение в 1024х768 пикселей (подробная статистика приведена в моей книге на 226 странице). Для сравнения - около 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 и более.

You are here