Каждый уважающий себя веб-мастер должен знать сколько у него пикселей лендинг. Зачем это нужно? Об этом и поговорим в этой статье.
Немного мифов
Четко, без воды
Так какой размер лендинга?
- Телефоны до 767px
- Планшеты 768px — 1199px
- ПК 1200px +
- Широкоформатные 1860px + (по желанию).
Объясним свое видение:
- Прежде всего это наблюдение на практике.
- Раньше было куда больше ноутбуков с разрешением около 1024px, сейчас эта тенденция заметно снизилась. Заметьте, мы не делаем брейкпоинт прямо на уровне 1280px, понижаем его до 1200 +-20, чтобы в случае, если человек заходит со своего калькулятора — контейнер сайта ужался не так сильно и ничего не уехало.
- Почему не сделать 1024px? — очень узко для современного размера сайта. Разница в 200px очень сильно задает вид.
Почему нам сделали макет 1920х1080?
Это хороший вопрос про размер лендинга, который стоит задать вашему дизайнеру. Ну а если по существу, то это самое популярное разрешение, которое почему то все берут за истину при любом дизайне.
Когда дизайнер прав?
Он прав в случае, когда по этому макету вы будете делать резиновую верстку. То есть, размер объектов у вас будет не в абсолютной величине — px, а в относительной, зависящей от ширины экрана. Тогда выбор размера лендинга 1920х1080 — оправдан, так как это действительно самое популярное соотношение ширины к высоте у современных экранов.
Когда дизайнер не прав?
Не прав он в случае, когда вы все верстаете на пикселях и он не предоставил вам дополнительных брейкпоинтов для младших адаптивов, например, он вас скинул:
- Адаптивы на телефон от 390px;
- Адаптивы на планшет от 768px;
- Адаптивы на ПК 1920px.
В таком размере лендинга у вас слишком огромный зазор в планшетной версии, то есть все от 768px до 1919px будет показываться в планшетной ориентации. Понимаете абсурд всей ситуации.
При таком раскладе он должен вам давать промежуточный адаптив для ПК с меньшим разрешением (которых, кстати, большинство). Очень мало людей сидят на ноутбуках до 16 дюймов с разрешением 1920px — все очень мелкое.
А по высоте?
Размер лендинга по высоте не так чувствителен к правильному выбору и прощает любые варианты, которые обычно предпринимают дизайнеры или разработчики.
Высоту самого блока можно адаптировать как по высоте экрана устройства, так и задать пикселями под размер контента в блоке. Единственная рекомендация — не лепите все слишком близко к верхним и нижним границам блока — дайте воздуха от 60 до 120 пикселей, по вашему вкусу. У каждого блока должна быть визуальная отбивка, чтобы разные блоки сразу интуитивно считывались и легко воспринимались пользователями.
Сколько блоков нужно?
Очень актуальный вопрос, который так или иначе также относится к размеру лендинга. На что стоит обратить внимание при раздумьях о структуре и количестве блоков:
- Отсмотрите ваших конкурентов. Ребята скорее всего уже изобрели велосипед и даже не один раз. Выделите 10-15 конкурентов, посмотрите посадочную страницу каждого, выделите среднее количество блоков.
- Руководствуйтесь здравым смыслом. Старайтесь придерживаться адекватного количества блоков, например, 6 блоков +-1. Людям становится плохо, когда они видят неструктурированные лендинг на 15 блоков, где в каждом блоке 75% не нужной информации. 5-7 блоков это не мало и достаточно для того, чтобы раскрыть всю необходимую информацию.
- А что 2-3 блока это плохо? Нет, это не плохо, это отдельный тип лендингов — квиз лендинг. Он нацелен на быструю лидогенерацию, но может быть менее конверсионный если ниша конкурентная и у ваших коллеги сайты объемнее. Но протестировать можно, с заложенным потенциалом на дальнейшую доработку.
Вывод
Обычный, адекватный вариант
Если вы хотите просто спокойно жить и выбрать самые подходящие размеры лениднга, то рекомендуем вот такой набор:
- Телефоны до 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 — все будет выглядеть одинаково и симметрично! Но как правило такая верстка дороже, потому что она требует компетенций и опыта.
Поэтому, если вы подбираете размер фрейма для лендинга — определитесь сначала с его концепцией, а после уже по нашей статье сможете выбрать нужный размер.
Частые вопросы
Какой оптимальный размер лендинга по ширине?
Телефоны — до 767px, планшеты — 768–1199px, ПК — от 1200px, широкоформатные — 1860px+ (по желанию). Это основано на реальной статистике и том, как пользователи открывают сайты на разных устройствах.
Почему ширина 1920px — не всегда правильный выбор?
Потому что большинство ноутбуков с дисплеем FullHD используют масштабирование 125–150%, из-за чего реальная ширина браузера часто становится около 1280px. Поэтому макет в 1920px может отображаться слишком узко или не так, как задумывалось.
В чем разница между адаптивной и респонсивной версткой?
Адаптивная — элементы меняют размер лендинга по пикселям под конкретные брейкпоинты.
Респонсивная — элементы масштабируются относительно ширины/высоты экрана, а брейкпоинты нужны только для изменения структуры. Такая верстка гибче, но дороже и сложнее.
Можете ли вы помочь с версткой и дизайном?
Да, подберем оптимальный размер лендинга и концепцию верстки. Сделаем маркетинг + дизайн + верстку под ключ.
Почему важно изначально определять брейкпоинты перед дизайном лендинга?
Потому что размер лендинга, структуру блоков, расположение элементов и их размер нужно планировать заранее. Если брейкпоинты не согласованы, дизайнер может сделать макет, который потом невозможно корректно сверстать, а разработчик будет вынужден выдумывать адаптив сам, что приводит к ошибкам и доп. работам.
Нужно ли делать отдельный дизайн под 4K-мониторы?
Нет. Это почти всегда лишнее. Пользователи 4K-дисплеев используют масштабирование 150–200%, и реальная ширина браузера у них редко превышает 1600–1800px. Обычно достаточно адаптива для широкоформатных от 1860px — и то по желанию.
