Какую ширину сайта делать 1366 или 1349?

Question

[Hary]

Здравствуйте! Возникли трудности в понимании некоторых аспектов работы сайта, а именно:
1) Когда нажимаешь "Показать код" отображается 1349 пикс., но когда делаешь скрин этой страницы, то этот скрин отображается уже как 1366 пикселей. Почему?
2) Когда я делаю макет в PS, какую ширину мне ставить 1349 или 1366 пикселей?
Буду благодарен за помощь!

Answer 1

[Михаил Проскурин]

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

Например, возьмем пример разных мониторов, при условии что контентная область 1170px.
1920px
1366px
1240px

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

Пример:

spoiler

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

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

Comments

[Владислав Лысков]

что это за правило такое?

[Михаил Проскурин]

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

[Rustam Bainazarov]

Михаил Проскурин, не всегда так. Есть другой тип дизайна, — полноэкранный, без ограничения ширины зоны контента. Всё зависит от дизайна. Ну или же, к примеру, есть полноэкранный дизайн, но с ограничением максимальной ширины для сверхшироких экранов:
width: 100;
max-width: 2560px;

Всё зависит от дизайна. Вот возьмите, к примеру, divan.ru. Там местами область контента ограничена по ширине (текстовые блоки), но в целом, область контента занимает всю ширину окна (хоть 2560 пикселей).

[Михаил Проскурин]

SmthTo, поэтому я добавил

(в некоторых исключениях, можно делать адаптацию под большие экраны)

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

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

[Rustam Bainazarov]

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

[EYPPNM]

что в дополнении к вопросу нужно учитывать чтобы не забыть о ретинах?

[Михаил Проскурин]

EYPPNM, ретина имеет такой же масштаб, поэтому сетка с фиксированной контентной области подойдет для любых типов экранов. Учитывать надо только размер масштаба, так например некоторые модели Macbook имеют ширину 1152px, для них уже надо учитывать или адаптацию, или заранее подобранную сетку.

Еще при разработке дизайна под ретину, надо учитывать, что все элементы будут увеличены в 2 или в 3 раза, поэтому все иконки должны быть в формате SVG, все картинки иметь заранее большой размер, и конечно же - минимум растровых элементов.

Answer 2

[Владислав Лысков]

скроллбар учитывается

Answer 3

[Rustam Bainazarov]

Советую брать в основу десктопного макета разрешение типичного ноутбука (1360px) + вычитать полосу прокрутки (16–17px). В любом случае учитывать полосу прокрутки нужно обязательно, чтобы избежать проблем.

А ещё лучше, чтобы ваш макет умещался в рамках ~1320px, потому что некоторые шрифты на разных ОС и в разных браузерах могут иметь различный размер значений межбуквенного расстояния. К примеру, такая шняга есть у шрифта Circe: MacOS рендерит с большим межбуквенным расстоянием, чем Windows (и это в рамках одного браузера — Chrome).

P. S. Почему за основу именно типичный ноутбук? Потому что большинство больших мониторов имеет оное разрешение, в т. ч. куча недорогих мониторов по 22 дюйма и подобные им. Лучше, конечно, продумать макеты и на разрешения выше (к примеру, 1360–1600, 1601–1920, 1921–2560). Ну и так далее. Всё зависит от дизайна.

Comments

[Hary]

Здравствуйте! У меня ширина макета 1349, или все же стоит увеличить её до 1366 пикселей?

[Rustam Bainazarov]

Hary, обязательно учитывайте хотя бы скроллбар, поэтому не надо 1366-ти. Но всё зависит от дизайна. Если у вас контейнер с контентом, к примеру, 1200 пикселей, то это уже не важно, 1349 или 1366.

Кроме того, не согласен со словами первого комментатора. Ширина контейнера с контентом может быть во всю ширину макета. Всё зависит от дизайна.

Вот возьмите, к примеру, divan.ru. Там местами область контента ограничена по ширине (текстовые блоки), но в целом, область контента занимает всю ширину окна (хоть 2560 пикселей).

Answer 4

[maxiljenko]

1) Когда нажимаешь "Показать код" отображается 1349 пикс., но когда делаешь скрин этой страницы, то этот скрин отображается уже как 1366 пикселей. Почему?

Всё очень просто, у вас масштаб в браузере изменён. Поставьте масштаб 100%. Тогда скриншот будет совпадать с размерами в коде.

2) Когда я делаю макет в PS, какую ширину мне ставить 1349 или 1366 пикселей?
Буду благодарен за помощь!

Макеты лучше делать не в PS а в Figma. В общем-то PS никогда не был удобен для вебдизайна. До появления фигмы и подобных ей, был Macromedia FireWorks, например. Никогда не понимал эту любовь к фотошопу у заказчиков, особенно на постсоветском пространстве. Фотошоп это редактор фотографий изначально, удобнее всего в нём заниматься именно фотоманипуляциями.
В фигме, например, уже есть нужные вам размеры макетов для разных устройств.