2 апреля 2009

Какое разрешение лучше использовать на вашем сайте?

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

Вот несколько подходов к решению этой задачи при проектировании веб-сайта:

• Фиксированный макет — традиционный подход, при котором ширина остаётся постоянной при любом разрешении экрана пользователя.
• Резиновый макет — более гибкий вариант, чем фиксированная вёрстка, при котором сайт растягивается по горизонтали для поддержки мониторов с большим разрешением.
• Адаптивный макет — более сложная версия резинового макета, когда код позволяет отображать различное число колонок в зависимости от разрешения экрана, избегая проблем, связанных с текучими макетами.
• Макет, выбираемый пользователем — при этом варианте пользователь сможет выбрать то, что захочет, возможно вместе с адаптивным макетом.

Какой тип макета лучший?

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

Так, например, Amazon использует резиновую вёрстку, которая выглядит достаточно хорошо при различных разрешениях экрана, но это потому, что на сайте много текста. Такая вёрстка ограничивает возможности Amazon’а в использовании большого количества графики и изображений.

Если же вы решили использовать резиновую вёрстку, не забудьте выставить параметры для минимальной и максимальной ширины, чтобы сайт не выглядел слишком слишком сплющенным на маленьких экранах, или наоборот слишком растянутым в ширь. Так же можно воспользоваться сервисами для тестирования юзабилити сайта, они могут определить как пользователи ведут себя на сайте и какие элементы им больше всего интересны.

Для какого разрешения оптимизировать сайт?

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

Согласно статистике, только 5% пользователей используют разрешение 800х600. Большинство людей используют 1024х768 или выше. В любом случае вы должны проверять свой сайт, как он будет выглядеть на самом распространенном разрешении ваших посетителей. Оно может меняться в зависимости от типа сайта и аудитории. Не стоит забывать, что не все пользователи разворачивают окно браузера на весь экран, поэтому, возможно, нет необходимости разрабатывать сайт шириной более 1024 пикселя.

Подводя итоги, лучше всего оптимизировать сайт под разрешение 1024х768 или выше. Таким образом 95% пользователей интернета увидят ваш сайт в лучшем виде. Если же вы собираетесь оптимизировать сайт под более низкое разрешение, постарайтесь как-нибудь заполнить пустые пространства, чтобы добавить сайту больше эстетики.