Сайт

Ширина сайта 2018: Какую ширину выбрать для сайта?

06.09.2023

Какую ширину выбрать для сайта?

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

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

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

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

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

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

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

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

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

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

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

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

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

http://sitepolice.ru/e-store/audit-saita/

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

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

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

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 пикселей. И даже если в будущем мои сайты станут чуточку шире, то только за счет сайдбаров и отступов.

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

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

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

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

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

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

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

html — Как задать минимальную ширину сайта?

Вопрос задан

Изменён 5 лет 3 месяца назад

Просмотрен 4k раз

Создал страницу для тестирования отображения этой страницы на мобильных устройствах. Указал в head name width=800, а wrapper min-width: 800px; и width: 100%;.

Проверяю на android chrome — браузер не чувствует минимальной ширины wrapper и по умолчанию часть страницы за пределами видимости (пример 1), когда требуется, чтобы браузер понимал, какой минимальной ширины страницу ему нужно показать (пример 2).

Как правильно задать минимальную ширину страницы так, чтобы мобильный браузер изначально ее показал, как на примере 2?

Пример 1:

Пример 2:

html,
body
{
    padding: 0;
    margin: 0;
    width: 100%;
}

.wrapper
{
    box-sizing: border-box;
    min-width: 800px;
    width: 100%;
    padding: 20px;
    background: antiquewhite;
}
<!DOCTYPE html>
<html lang="ru">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=800, initial-scale=1">
        <title>Title</title>
        <link href="/css/common.css" rel="stylesheet">
</head>
<body>

<div>
        Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
        Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
 
 
</div>

</body>
</html>
  • html
  • css
12

Убрал ширину у body; заменил content="width=800px" на content="width=device-width, initial-scale=1, shrink-to-fit=no"

.

width=device-width

нужен для того, чтобы «ширина была равна ширине устройства»

shrink-to-fit=no

нужен для запрета масштабирования в соответствии с окном просмотра

Добавил @media-запросы. Проверьте.

 
@media (min-width: 800px) {
html,
body
{
    padding: 0;
    margin: 0;
}

.wrapper
{
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background: antiquewhite;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Title</title>
        <link href="/css/common.
 
 css" rel="stylesheet">
</head>
<body>

<div>
        Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
        Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
</div>

</body>
</html>
6

Укажите в хедере

 <meta name="viewport" content="width=800px, initial-scale=1">

Wrapperу не ничего не указывать(он и так по умолчанию растянется на всю ширину)

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Размер и макет веб-страницы (старое сообщение)

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *