Ширина контента на сайте

Ширина контента на сайте

При создании сайта одним из первых возникает вопрос: какой делать ширину сайта? Ответ на этот вопрос неоднозначен и будет зависеть от ряда факторов. Сайты бывают двух видов: 100% по ширине экрана и фиксированной ширины. Ниже приведен пример сайта с фиксированной шириной.

Факторы, влияющие на ширину сайта

1. Количество колонок сайта.

  • Одноколоночный вариант: оптимальная ширина 1000 px
  • Двухколоночный вариант: оптимальная ширина 1000 px — 1256 px
  • Трехколоночный вариант: оптимальная ширина 1256 px — 1576 px

2. Разрешение монитора пользователя.

Для получения такой статистики лучше всего использовать открытый счетчик посещений популярного ресурса. Мы ореинтируемся на свой ресурс www.podolsk.ru. Статистика сайта открыта, Вы можете посмотреть наиболее частые разрешения мониторов у пользователей, и в зависимости от этого подобрать оптимальную ширину для своего сайта. Посмотреть популярные разрешения мониторов на сайте mail.ru.

3. Почему 1280х1024 = 1256px? Страницы сайта могут помещатся по вертикали экрана полностью или не полностью. Запас в 24 px берется на полосу прокрутки сайта.

Разрешение экрана Ширина, px
640х480 616
800х600 776
1024х768 1000
1152х864 1128
1280х1024 1256
1400х1050 1376
1440х900 1416
1600х1200 1576
1680х1050 1656
1920х1200 1896
2048х1536 2024

Теперь о самом важном!

Можно сделать автоматическую ширину сайта (100% по ширине экрана), которая будет автоматически подстраиваться под размеры монитора пользователя, но такой сайт ведет себя неконтролируемо. Мы рекомендуем своим клиентам делать фиксированные значения ширины сайта. Но решение всегда зависит от Вас. Примеры сайтов: 100%-ной ширины, фиксированный.

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

Разрешение экрана (монитора) – это размеры получаемого на экране изображения в пикселях. Например, разрешение экрана 1920 x 1080 означает, что ширина изображения на мониторе равна 1920, а высота 1080 пикселей.
Популярные разрешения мониторов (стационарные компьютеры и ноутбуки):
1920 х 1080 (full HD)
1600 х 900
1440 х 900
1366 х 768
1280 х 1024
1280 х 960
1024 х 600
Когда мы разрабатываем прототип для десктопа, то нам важно понимать, что мы не должны рисовать варианты для всех существующих компьютеров, нам нужно выбрать оптимальный размер макета сайта, который позволит отображать будущий сайт корректно на всех десктопах.
Универсальной шириной для прототипа на компьютер и ноутбук является 1920 пкс, также может использоваться ширина 1440 или 1280 пкс. Универсальной высоты нет, т.к. у каждого проекта она своя и зависит от количества разделов.

Когда мы создаем макет сайта шириной 1440 пкс, но открываем его на мониторе 1920 пкс, то по бокам появляются белые или серые полосы, которые заполняют пустое пространство. Если же мы создаем прототип шириной 1920 пкс, а открываем его на мониторе шириной 1440 пкс, то прототип (или макет) “обрезается” по бокам, и мы видим содержимое сайта только в пределах 1440 пкс. В таком случае дизайнеру нужно учесть следующий момент — важный контент (тексты, кнопки и небольшие фотографии) не должны выходить за пределы контейнера определенной ширины. За такую ширину чаще всего принимается значение 1170 или 940. Таким образом, дизайнер создает прототип (или макет) шириной 1920 пкс, но весь важный контент умещает на ширине 1170 или 960 пкс.

Читайте также:  Как выбрать часовой пояс на телефоне

Сегодня мы подробно рассмотрели размер макета сайта только для десктопов (компьютеров и ноутбуков), а разрешения портативных устройств (планшетов и смартфонов) мы рассмотрим в другой раз. Подписывайся на блог по веб-дизайну.

Привет друзья! Сегодня мы затронем очень важные темы при верстке сайта:

1. Какую ширину использовать для создания сайта?

2. Как "резина" может испоганить вам жизнь?

3. Какая ширина будет самой лучшей для контента?

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

Почему так важно выбрать оптимальный размер страницы?

Юзабилити сайта влияет на много полезных факторов!

В первую очередь это твои посетители, если им на сайте будет не удобно – фиг ты кого заставишь зайти туда еще раз. Собственно, смысл тогда вообще надрываться? Если люди будут заходить, посидят пару секунд на сайте, пошлют все к "чертям подальше" и пойдут искать другой аналогичный ресурс.

Например, я делаю ИМЕННО так! Если мне что-то сильно мешает – я на таком сайте долго не засиживаюсь. И лучше найду другой ресурс с похожей информацией, но на котором мне будет удобно работать!

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

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

Сейчас даже есть специальные люди — аудиторы. Которые проверяют твой сайт на предмет юзабилити.

Пофессионалы своего дела, например как здесь:

Могут спокойно брать деньги за свои услуги и зарабатывать на этом.

При том, что результат, который вы получите — намного привысит оплату за услугу 😉

И так, давай лучше обо всем по порядку.

1. Оптимальная ширина сайта.

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

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

Читайте также:  Что делать если залагала игра

А это любого дико напрягает, я точно знаю.

На момент написания этой статьи, общая статистика показывает, что у 20% пользователей нашего интернета экраны шириной 1152 пикселя и меньше (я в ливинтернете подсмотрел ). Причем основная масса из них приходится на расширение 1024х780 пикселей.

У меня даже в статье – "Как создать второй сайдбар в шаблоне Default?", в комментариях разгорелся спор с одним из моих посетителей. Где я красочно описал статистику своих сайтов и статистику сервиса LiveInternet в целом.

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

Обидно, не правда ли?

Поэтому, на данный момент, оптимальной рабочей шириной для сайта считается 1000 пикселей + 24 уходит на полоску вертикального скролла.

Если брать меня, то я в последнее время стараюсь делать сайты шириной где-то в 960 – 980 пикселей.

Думаю, с этим все понятно, теперь перейдем к еще одному "монстру", которого почему то очень часто любят юзать молодые (неопытные) вебмастеры.

2. Как может твоему проекту подос..ать резина?

Для тех, кто в танке:

Резина – это сайт с резиновой версткой, у которого может меняться ширина, в зависимости от ширины окна браузера.

Почему то многие новички липнут на резину, как мухи, на всем известную субстанцию. И если меня спросить, как я отношусь к сайтам с резиновой вёрсткой, то я отвечу очень кратко – никак.

Почему? Потому что такой сайт очень тяжело контролировать в плане юзабилити. Я выделил пару недостатков ниже, так что ты можешь прямо сейчас ознакомиться с ними и сделать свои выводы:

1. Разные размеры.

Это основной недостаток таких сайтов, из которого вытекают все последующие. Заключается он в том, что на мониторах с разным разрешением – эти сайты будут смотреться по разному. А от этого очень многое зависит.

И если на 17-дюймовом мониторе сайт смотрится на ура, и содержимое его контента тоже. То на мониторе в 22 дюйма, все может преобразиться до дикой неузнаваемости.

И очень часто не в лучшую сторону!

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

2. Слишком узко.

Многие забывают на таких сайтах выставлять минимальную ширину.

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

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

Очень часто в таких случаях сайдбар сползает под контент, или наоборот. Хорошего мало…

Читайте также:  Секретные коды для хуавей

3. Слишком широко.

А вот вам и обратная сторона медали. Когда сайт на всю ширину 22 дюймового монитора, строчки текста растягиваются до неимоверной длинны.

Читать такой текст очень неудобно!

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

Так что заруби себе на носу еще раз:

Читать тексты в длинных строчках– совершенно неудобно.

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

Ну и третий момент правильно-юзабельной (такого выражения нет, но вы меня поняли ) ширины:

3. Оптимальная ширина для контента

Контент, это, собственно говоря, то, ради чего приходят на твой сайт посетители. Ведь в нем содержится вся основная информация сайта.

И его ширина играет тоже очень важную роль!

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

Так какова же оптимальная ширина для контента?

Я тоже когда то задавался этим вопросом, и как-то читая одну замечательную книгу, а я вообще люблю почитать именно книги, понял – вот она – оптимальная ширина для контента!

Ширина обычного листка книги.

Если внимательно присмотреться, то ширина листа в большинстве книг будет соответствовать в среднем ширине в 500 – 650 пикселей. И с тех пор именно такой ширины я и придерживаюсь.

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

Но я точно знаю одно: ширина контента на моих сайтах не изменится! Она всегда будет идти в радиусе 500 – 650 пикселей. И даже если в будущем мои сайты станут чуточку шире, то только за счет сайдбаров и отступов.

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

Ведь от юзабилити зависит ранжирование сайтов в поисковой выдаче. Да и не это главное.

Главное, что бы твоему посетителю было на твоем сайте комфортно и удобно.

И ему снова и снова хотелось приходить к тебе на сайт за порцией свежей и полезной информации!

С респектом, Серёга.

Не забудь оставить свое мнение по этому поводу.

ЗЫ: тех, кто не нажмет на одну из кнопок ниже – найду, и лично дам в глаз! Я вас тоже очень сильно люблю

Ссылка на основную публикацию
Что такое asus vibe
Файл asusvibe2.0.exe из ASUSTeK Computer Inc является частью AsusVibe2 0. asusvibe2.0.exe, расположенный в c:program files (x86)asusasusvibeasusvibe2.0.exe с размером файла 924336...
Что делать если виснет браузер
Автор Юрий Белоусов · 18.03.2019 Пользователи могут столкнуться с неприятной ситуацией, когда браузер Опера зависает, виснет, подвисает, тормозит, лагает, глючит....
Что делать если винда 10 не запускается
В нашей сегодняшней статье будет рассмотрен ряд случаев, связанных с отказом запуска операционной системы Windows 10 на компьютере или ноутбуке....
Что такое elm agent на андроид
Практически каждый пользователь мобильных устройств, рано или поздно, пытается разобраться в настройках, просматривать установленные приложения и сервисы. При просмотре списка...
Adblock detector