Лучшие статьи категории «Разное»

Подписка

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

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

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

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

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

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

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

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

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

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

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

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

Категория: Разное Рубрики: , Автор: Илья Федотов (G+)


Комментарии (10)

Blkd / 2 Апрель 2009 в 23:37

Не совсем верные данные, вот более точная статистика по данным Liveinternet за март: 1024×768 — 31.8%; 1280×1024 — 26.2%; 1280×800 — 15.2%; 240×320 — 6.5%; 1440×900 — 5.6%; 1680×1050 — 4.6%; 1152×864 — 3.8%; 800×600 — 2.0%;

Илья Федотов / 3 Апрель 2009 в 09:07

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

Webb / 12 Октябрь 2009 в 19:51

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

Dashketenya / 6 Февраль 2010 в 02:55

Подскажите, пожалуйста, как оптимизировать сайт до разрешения 1024х768 (:

Илья Федотов / 6 Февраль 2010 в 10:36

Dashketenya, предположу, что надо нарисовать подходящий дизайн и затем грамотно сверстать.

P.S. Рекомендую «погуглить».

Sofcase / 21 Август 2010 в 13:53

Используйте 960 grid, подойдет под все разрешения выше 1024х768 (:

Mari84 / 26 Март 2011 в 11:23

Используйте 960 grid, подойдет под все разрешения выше 1024х768 (:

А, я вот сомневаюсь. Сегодня статистика разрешений экрана: 1280×1024+ — 48%; 1024×768+ — 23%; 800×600 — 1,5%; 1440×900+ — 19%; 2560×1440 — 0,3%

Что будет в 2012-2013? Ясно, что 960 маловато!

Катерина / 2 Декабрь 2011 в 23:40

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

Илья Федотов / 3 Декабрь 2011 в 16:51

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

P.S. На нашем сайте, в статье «Адаптивный дизайн» мы как раз обсуждали такой подход с примерами.

Ant / 6 Декабрь 2011 в 11:37

Так же сейчас не так много ниш, где действительно необходимо применять такой подход.

В не совсем правы, на дворе мобильная революция (: Люди все больше сидят на сайтах любой тематики с планшетов/смартфонов.

В Японии посетителей с телефонов/планшетов больше, чем с компьютера. То есть нет каких-то определенных ниш, просто до нас это еще докатилось не в полном объеме.

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

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.
  • V.V: В копилку еще один типограф Дениса Селезнёва на JavaScript.
  • Сергей: Спасибо за примеры инфографики. Для тех, кому нужны еще...
  • Андрей Зенков: Спасибо автору. Хорошая подборка. Аж стыдно за то,...
  • Адениум: Наука даром не дается — наука трудом берется....

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus