Самая оптимальная ширина для сайта

Рубрика: SEO и юзабилити;
Метки:

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

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

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

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

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

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

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

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментариев: 54 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 54
  •  Камил | 14 июня 2012 в 18:33:16

    Серега добрый день.Спасибо за совет,хотя я ими давно пользуюсь. Хотел бы похвастаться.Сайтом начал заниматься 6 месяцев назад,и блогодаря твоим советам и советам твоих колег; Евгения Попова и Александра Слободенюк, мой сайт в Запросе Яндекса на 3 позиции.Основы здорового образа жизни.www.diyarov.ru И по иконки я нашел ошибку.Еще раз большое спасибо.Твои советы всегда кстати.

  •  Наталия | 14 июня 2012 в 18:37:11

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

  •  Timur | 14 июня 2012 в 18:51:55

    Часто приходится приходить к людям на дом и настраивать ADSL-модемы. Так вот сейчас вижу в основном 17-ти и 19-ти дюймовые мониторы. Как раз на них хорошо просматриваются сайты 960-ти пикселей в ширину(о которых пишет Серёга). Очень редко 15-ти дюймовые мониторы. И только ОДИН раз просто ОГРОМАДНЫЙ bear монитор(точно не телевизор).

  •  Сергей | 14 июня 2012 в 19:25:05

    Здравствуй, Серега!

    Полностью с тобой согласен. У меня разрешение 1024х768

    используют 22%.

    Спасибо тебе за помощь. Теории много в голове, а ты ее помогаешь правильно использовать на практике.

    Удачи!

  •  Александр | 14 июня 2012 в 19:48:16

    Вот только вчера читал подобную статью, но всё равно спасибо тебе за статьи!

  •  Vladimir Sorokin | 14 июня 2012 в 20:19:04

    Согласен на все 100+10%! Особенно по ширине контента.

    Когда только-только начинал первые шаги, уж и не вспомню где, прочитал сильнейший мануал по распределению деталей сайта (контент, сайтбары и тд) на каркасе, в процентном соотношении. Т

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

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

  •  Серёга | 14 июня 2012 в 20:25:42

    Про таймс не знал.

    Спасибо, интересный факт smile

    Всем спасибо за комменты, было интересно почитать.

  •  Александр | 14 июня 2012 в 22:10:38

    Полностью согласен. У меня сайт шириной 1100px, для контента 600px. Я считаю, что это действительно оптимальные размеры. Спасибо за статью.

  •  Mikele | 15 июня 2012 в 04:44:17

    Можно было и не поднимать эту тему. Просто берешь линейку, заходишь к Сереге на сайт, снимаешь все размеры и ну верстать! Я лично так и делаю.LOL

  •  Timur | 16 июня 2012 в 15:31:44

    Mikele, жжешь yes ok LOL

  •  Volodiax | 17 июня 2012 в 22:34:38

    Спасибо за простое объяснение и очень важное для меня. (а я собирался делать резиновый сайт)

    Успехов тебе Серега, твои успехи это наши новые знания!

  •  Серёга | 18 июня 2012 в 09:48:11

    Пожалуйста ;)

  •  Людмила | 22 июня 2012 в 09:18:50

    Здравствуй Сергей! У меня к вам вопрос, я оплатила тренинг " Верстаем на 5+" и вы это подтвердили своим письмом от 1июня, затем я выслала вам свой логин чтобы зайти на форум, вы сообщили что тренинг начнется с 7 июня, но до сих пор я ничего от вас больше не получала, проводите вы тренинг или нет мне не известно, Ответьте пожалуйста как обстоят дела с тренингом? И вообще хоть что-нибудь ответьте так как я вам пишу уже третье письмо.

  •  Серёга | 22 июня 2012 в 10:48:31

    Привет Людмила.

    Тренинг уже идет - 10 день на носу.

    Отписал вам на почтовый ящик.

    Пришлите мне свой логин в скайпе пожалуйста.

  •  Людмила | 22 июня 2012 в 10:59:11

    Мой логин в скайпе Lyudmila3591 hands

  •  Паша | 27 июня 2012 в 04:22:47

    Хотел спросить но не знаю где :(

    Серёг а как добавить количество смайлов в коментах как у тебя ?

  •  Серёга | 27 июня 2012 в 12:37:28

    Блин, хотел же видео записать на эту тему...

    В общем все делал через файл

    application\config\smilies.php
  •  Виталий | 29 июня 2012 в 00:34:50

    Да!Вовремя я это прочитал!Спс!

  •  Alexander Snegovoy | 29 июня 2012 в 11:07:29

    Серега, правильно сделал что затронул тему Юзабилитиsmile Как я думаю надо больше постов выкладывать именно не по верстке, а по юзабилити. Тогда будет все тип-топsmile

    Еще раз спасибо за статью!smile

  •  Николай | 30 июня 2012 в 11:06:55

    Серега! Спасибо, нужное дело делаень!!!

  •  Николай | 30 июня 2012 в 11:29:15

    Серега, вопрос а как, конкретно, изменить ширину сайта!

  •  Аноним | 13 июля 2012 в 20:45:41

    Серёга, спасибо за статью! Полезна и интересна!

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

    Мелочи и детали - маркеры любого профессионального дела.

    С уважением, Алексей(Alexiss54)

  •  Алексей | 13 июля 2012 в 20:55:32

    Добрый вечер!

    Серж, пожалуйста подскажи, в каких случаях оправдана и даже желательна и предпочтительна резина?

    Я, конечно об использовании данной опции на сайтах.

    С уважением, Алексей(Alexiss54)/

  •  Серёга | 13 июля 2012 в 22:03:34

    Я ее бы исползовал на форумах и порталах.

    Там графики мало, в основном текст.

    И все в полоску smile

  •  Серёга | 13 июля 2012 в 22:04:00

    Пожалуйста Алексей.

  •  Лита | 8 апреля 2013 в 00:53:53

    Спасибо, очень пригодилась статья! Полезная информация!

  •  Сергей | 25 апреля 2013 в 19:46:39

    Сергей Благодарю от сердца!

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

    Ваш опыт очень мне помог и пересмотреть все мелкие детали конструирования страниц.

    И открыл новые мышление в моделирования страниц.

  •  Саша | 7 мая 2013 в 15:51:54

    А как же адаптивная вёрстка?

  •  Серёга | 7 мая 2013 в 16:03:20

    А при чем здесь адаптивный дизайн?

  •  Ринат | 8 мая 2013 в 17:41:16

    че т я не понял. Автор сам себе противоречит. Говорит ширина контента у него будет варьироваться в РАДИУСЕ 500 – 650 пикселей. Откуда тут радиус взялся не знаю, но подсчитаем полную ширину. Радиус - это пол диаметра. Получается ширина контента должна составлять 1000-1300 пикселей. Ну ладно, даже если я все неправильно понял, и автор имел ввиду под радиусом - ширину контента, то все равно, нет там 500-650 пикселей. файрбаг показывает, что ширик равен 700Px. Ну хоть бы измерили для начала что ли.Спасибо.

  •  Серёга | 8 мая 2013 в 18:50:10

    Ринат - не надо обо мне говорить в третьем лице smile

    автор имел ввиду под радиусом - ширину контента

    именно так, во всем виноват местный сленг smile Сорри.

    файрбаг показывает, что ширик равен 700Px

    Ширик?? Ширина что ли? smile если это так - то ширина текста на данный момент максимум 658 пикселей.

    Не знаю где ты увидел там 700 smile

    Ну хоть бы измерили для начала что ли.Спасибо.

    Измерять мне незачем, это мои принципы, которых я стараюсь придерживаться.

    Спасибо за столь развернутый отзыв!

  •  Ринат | 9 мая 2013 в 09:14:28

    658 не 650)) Условности, но все же.

  •  Серёга | 9 мая 2013 в 10:29:48

    ммм... даже не знаю что сказать smile

  •  Верстальщик На! | 29 июня 2013 в 11:49:20

    А вам никто не говорил, что открытие ссылки в том же окне - это грубое нарушение юзабилити, в данном случае. Вот перешел посмотреть на аудиторов по вашей ссылке и блин понял, что назад нужно нажимать, а это очень бесит. А если инет у человека плужный, или комп? Может все же лучше target="_blank"? =)

  •  Игорь | 28 февраля 2014 в 18:57:14

    я не могу понять.если допустим планшет ipad с разрешением 2048 на 1536 размеры дисплея в 9,7 а мои саит допусти 1024 ширина.он будет корректно отображать все????потому как мне убедительно рекомендуют делать 1000 пикс.и не больше

  •  Дмитрий | 1 мая 2014 в 19:28:55

    Хорошая статья! Написана хорошим языком и с юмором!

    Удачи тебе, автор, пиши исчо! ;)

  •  Аноним | 21 мая 2014 в 12:12:14

    Автору Спасибо за полезную инфу, НО я не нашел там ответа на свой вопрос ;(

    Вот вопрос: "Можно ли мне сделать ширину сайта такой, что она сама подстраивалась под размеры монитора?" К примеру я когда делал сайт на 17-дюймовом мониторе, оно гуд все было. Тут этот же сайт открыл на 22-дюймовом мониторе, оно у меня все растянуто в ширину. А мне б хотелось чтоб ширина оставалась одинаковой.

    •  Елена | 21 мая 2014 в 13:58:17

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

    •  Мигель | 19 июня 2015 в 12:56:54

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

  •  Мигель | 19 июня 2015 в 12:53:34

    Спасибо, было полезно узнать. Я новичок в этом деле и сейчас пытаюсь делать сайт. Единственное что не понимаю, так это то, почему у меня сайт, шириной 1200 пикселей (который пока только в фотошопе) превосходно влазит в окно, хотя у меня ноутбук с диагональю 16.5 дюймов. Неужели у других меньше? Почему спрашиваю, потому что у всех моих знакомых стационары и мониторы там довольно большие. В принципе, даже стандартный монитор у стационара вмещает в себя 1200 пикселей. Очень бы хотелось узнать почему так. Но, конечно, сайт буду делать по вашему совету. У меня ширина шапки будет 1000 пикселей, а контентной части 900 пкс.

  •  Алекс | 14 ноября 2015 в 20:25:48

    + в карму только за немного юмора в статье.

    за саму стать много +

    Спасибо smile

  •  Андрей | 3 марта 2016 в 13:42:36

    Интересно! Как раз меняю ширину сайта http://pozitivu-da.ru

  •  начинающий | 13 апреля 2016 в 23:03:16

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

  •  Артур | 17 мая 2016 в 03:22:05

    Приветствую. статья конечно познавательна, но вот с "Слишком узко"/"Слишком широко" я не согласен. Боишься за юзабельность? Есть же "max-width"/"min-width". С помощью фиксации ты (Ну или Вы) никогда не добьешься адаптации под мобилы, планшеты... (Конечно если не разрабатывать отдельные мобильные версии)

    •  Серёга | 17 мая 2016 в 09:06:32

      Привет Артур. Сейчас так и делаю.

      Например создаю блок-контроллер с шириной max-width: 1200 пикселей.

      И через него контролирую всю ширину контента на сайте.

      Удобно.

      А по статье - ей уже 2 года. Устарела малость.

      •  Прохожий | 20 мая 2016 в 05:05:43

        Я забил, использую Bootstrap.

    •  Серёга | 25 августа 2016 в 06:41:03

      Так а где речь про фиксацию? Я про ширину контента. Ясен пень что на мобильных в 320 или на планшетах в 800 такой подход не юзабелен. Речь идёт только мониторы.

      Да и вообще - на ширину уже можно забить. Отчёт давно писался.

  •  Александр | 16 июня 2016 в 13:57:50

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

  •  Аноним | 26 июля 2016 в 19:21:24

    А попробуйте сжать этот сайт в браузере! ХА-ХА-ХА)))

    •  Имя | 10 сентября 2016 в 19:52:24

      Действительно, этот сайт резиновый )))

    •  Рома | 6 декабря 2016 в 13:01:34

      И что? обычный адаативный дизайн, что тут смешного?

  •  александр | 8 сентября 2016 в 11:06:33

    Сергей подскажи пожалуйста, какой размер фото лучше ставить на сайт,чтобы и текст был и фото на странице?

  •  Валерий | 16 ноября 2016 в 21:11:48

    Почему вы пишите в радиусе 500-650 пикеселей!?

    Вы что, сайты делаете круглыми? )

  •  Ovescor | 13 января 2017 в 21:15:54

    ̶П̶о̶б̶о̶я̶л̶с̶я̶,̶ ̶ч̶т̶о̶ ̶н̶а̶й̶д̶ё̶ш̶ь̶ ̶X̶D̶

    Всё чётко объяснил.