При проведении аудита я всегда обращаю внимание клиентов на внешний вид сайта при различных разрешениях. Это одна из “всем известных” банальностей, о которых часто забывают многие веб-разработчики и владельцы сайтов. Почему это важно?

Вот несколько примеров из моей практики. Так выглядит страница сайта медицинской компании при самом распространенном пока разрешении 1024×768 px. Сразу прошу прощения за низкое качество картинок: в силу ряда причин я не могу выложить лучший вариант.

Какие выводы можно сделать из данного скриншота?

Даже при таком качестве скриншота заметно, что контактные данные, включая выделенный розовым цветом телефон, расположены не в самом выгодном месте: в левом нижнем углу.

По данным статистики, разрешение 1024×768 является наиболее популярным среди посетителей этого сайта – 32% трафика. Однако со временем популярность разрешения 1024х768 падает, одновременно растет % пока еще экзотического широкоэкранного разрешения 1280х800. Как показала статистика сайта, летом 2009 года число посетителей с таким разрешением составило 20,38%, в то время как осенью прошлого года только 15,5 %. Это говорит о том, что пользователи стали чаще покупать мониторы с широким экраном и ноутбуки, в то время как раньше были распространены мониторы 17” с идеальным для них разрешением 1024х768.

При разрешении 1280х800 этот же сайт выглядит следующим образом.

Контактные данные ушли еще глубже за границы, оставив в поле видимости только номер телефона. По бокам образовались малосимпатичные поля.

Впрочем, это не самый яркий пример игнорирования важности экранного разрешения. На сайте строительной фирмы при разрешении 1024х768 образовалась горизонтальная верстка, которую многие специалисты по юзабилити считают грехом №1 веб-дизайна. Для данного сайта горизонтальная верстка оказалась плохим подарком еще и потому, что практически все контактные данные оказались спрятаны за пределами правой границы.

Google подскажет
С помощью нового сервиса Google под названием Browser Size можно оценить, какие области сайта являются наиболее заметными, а какие реже бросаются в глаза. При разрешении 1366х768 (ноутбук) мой сайт Btsmarketing.com демонстрирует следующие параметры:

Отрадно, что заголовок сайта, название статьи и верхний рубрикатор виден 99% посетителей. 98% сразу видят первый абзац последней статьи. RSS-кнопка и число подписчиков “лезут” в поле зрения 90-95% посетителей. В общем, я доволен, т.к. основные детали блога на виду. Но я могу покритиковать себя за то, что “Основные темы сайта” и “Самые популярные статьи” оказались этажом ниже. Также заметно, что верстка моего сайта не “резиновая”, из-за чего по бокам образуются пустые поля.

Что бы я посоветовал сам себе? К сожалению, я пока не могу избавиться от фиксированной верстки: пробовал разные варианты – кое-какие моменты меня не устраивают, а навыков веб-дизайна не хватает. Однако, я не считаю фиксированную верстку серьезной проблемой для сайта, ей пользуются многие известные и популярные проекты.

Хуже ситуация с нижними рубриками и списком популярных статей. Сейчас в 3-й колонке висит статичный баннер и “карусель” интернет-магазина книг. От последнего думаю вскоре избавиться: денег он не приносит, а полезное место занимает. Я не думаю, что в ближайший год-два мой сайт будет приносить доход от рекламы. Сейчас я вполне успешно зарабатываю на другом. Статичный баннер тоже в скором времени пойдет на пенсию.

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