Размер лендинга — идеальные параметры

Каждый уважающий себя веб-мастер должен знать сколько у него пикселей лендинг. Зачем это нужно? Об этом и поговорим в этой статье.

Немного мифов

Почему то, у многих есть устойчивое ощущение, что размер лендинга должен быть 1920px по ширине, ну а высота там уже как пойдет - экранов то много.
И вот если с высотой мы готовы согласиться, то с шириной - не можем. Существует аргументация ширины 1920px - ну ведь у всех мониторы FullHD, то есть разрешения 1920х1080. Да, но, если это ноутбук, есть примерно 50% шанс, что на нем стоит 150% масштабирование и при таком масштабировании.
В таком случае, разрешение вашего экрана будет уже 1280px.
И что же ставить 1280px? Не совсем :). Это чистое разрешение вашего монитора, но браузер не растягивается идеально во всю ширину вашего экрана, всегда есть системные поля, у каждого браузера они свои.
Какого размера должен быть лендинг? Запутались? Сложно? Понимаем!

Четко, без воды

Так какой размер лендинга?

Устройство	Ширина
Телефоны	до 767px
Планшеты	768px ‑ 1199px
ПК	1200px +
Широкоформатные	1860px + (по желанию)

Объясним свое видение:

1. Прежде всего это наблюдение на практике.
2. Раньше было куда больше ноутбуков с разрешением около 1024px, сейчас эта тенденция заметно снизилась. Заметьте, мы не делаем брейкпоинт прямо на уровне 1280px, понижаем его до 1200 +-20, чтобы в случае, если человек заходит со своего калькулятора - контейнер сайта ужался не так сильно и ничего не уехало.
3. Почему не сделать 1024px? - очень узко для современного размера сайта. Разница в 200px очень сильно задает вид.

Почему нам сделали макет 1920х1080?

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

Когда дизайнер прав?

Он прав в случае, когда по этому макету вы будете делать резиновую верстку. То есть, размер объектов у вас будет не в абсолютной величине - px, а в относительной, зависящей от ширины экрана. Тогда выбор размера лендинга 1920х1080 - оправдан, так как это действительно самое популярное соотношение ширины к высоте у современных экранов.

Когда дизайнер не прав?

Не прав он в случае, когда вы все верстаете на пикселях и он не предоставил вам дополнительных брейкпоинтов для младших адаптивов, например, он вас скинул:

1. Адаптивы на телефон от 390px;
2. Адаптивы на планшет от 768px;
3. Адаптивы на ПК 1920px.

В таком размере лендинга у вас слишком огромный зазор в планшетной версии, то есть все от 768px до 1919px будет показываться в планшетной ориентации. Понимаете абсурд всей ситуации.

При таком раскладе он должен вам давать промежуточный адаптив для ПК с меньшим разрешением (которых, кстати, большинство). Очень мало людей сидят на ноутбуках до 16 дюймов с разрешением 1920px - все очень мелкое.

А по высоте?

Размер лендинга по высоте не так чувствителен к правильному выбору и прощает любые варианты, которые обычно предпринимают дизайнеры или разработчики.

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

Сколько блоков нужно?

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

1. Отсмотрите ваших конкурентов. Ребята скорее всего уже изобрели велосипед и даже не один раз. Выделите 10-15 конкурентов, посмотрите посадочную страницу каждого, выделите среднее количество блоков.
2. Руководствуйтесь здравым смыслом. Старайтесь придерживаться адекватного количества блоков, например, 6 блоков +-1. Людям становится плохо, когда они видят неструктурированные лендинг на 15 блоков, где в каждом блоке 75% не нужной информации. 5-7 блоков это не мало и достаточно для того, чтобы раскрыть всю необходимую информацию.
3. А что 2-3 блока это плохо? Нет, это не плохо, это отдельный тип лендингов - квиз лендинг. Он нацелен на быструю лидогенерацию, но может быть менее конверсионный если ниша конкурентная и у ваших коллеги сайты объемнее. Но протестировать можно, с заложенным потенциалом на дальнейшую доработку.

Вывод

Вариант	Телефоны	Планшеты	ПК	Широкоформатный ПК	Блоков
Обычный, адекватный	до 767px	768px ‑ 1199px	1200px +	—	6 +‑1
Необычный, но тоже адекватный	до 767px	768px ‑ 1199px	1200px ‑ 1859px	1860px +	6 +‑1
Идеальный	до 767px	768px ‑ 1199px	1200px +	—	6 +‑1

Обычный, адекватный вариант

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

• Телефоны до 767px;
• Планшеты 768px - 1199px;
• ПК 1200px +;
• 6 блоков +-1.

Необычный, но тоже адекватный вариант

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

• Телефоны до 767px;
• Планшеты 768px - 1199px;
• ПК 1200px - 1859px;
• Широкоформатный ПК 1860px +;
• 6 блоков +-1.

Идеальный вариант

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

• Телефоны до 767px;
• Планшеты 768px - 1199px;
• ПК 1200px +;
• 6 блоков +-1.

У вас точно также остаются брейкпоинты, но здесь они больше не для размера элементов, а для их структуры и расположения, то есть в телефоне карточки услуг вы расположите друг под другом, на планшете уже по 2 вряд, а на ПК - по 3-4 вряд.

Через брейкпоинты вы зададите структурные изменения вашей верстке, а за размер элементов уже будут отвечать не пиксели, а относительные величины, например VW (величина, зависящая от ширины экрана), или VH (величина, зависящая от высоты экрана, с ней нужно быть аккуратнее).

При таком раскладе у вас всего 3 брейкпоинта (вам не нужно верстать все 4-5-6 раз). Каждый брейкпоинт максимально четко масштабируется до момента следующего. Хоть у вас экран 1300px, хоть 4000px - все будет выглядеть одинаково и симметрично! Но как правило такая верстка дороже, потому что она требует компетенций и опыта.

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