03Лендинги и сайтыиз архива
Адаптив на 360: от первого экрана остаётся один заголовок
Карина 91 показала 8 марта 2026
- Правки
- 6 правок
- Последняя
- 16 марта
- В разборе
кейс
В студии дали лендинг для мастерской по ремонту бытовой техники в Екатеринбурге, клиент пришёл к нам по рекомендации. На 1440 первый экран хороший: заголовок 56 px в две строки, подзаголовок, кнопка «Вызвать мастера», справа фото мастера и три строки «приедем за 2 часа, гарантия год, оплата после ремонта».
На 360 перенесла всё как есть: заголовок 32 px получился в пять строк, фото уехало вниз, и на первом экране видно только заголовок и половину кнопки. Три строки про гарантию вообще на второй прокрутке. Уменьшала кегль до 28, но становится мелко и несолидно. Как ужимают первый экран на телефоне?
На 360 перенесла всё как есть: заголовок 32 px получился в пять строк, фото уехало вниз, и на первом экране видно только заголовок и половину кнопки. Три строки про гарантию вообще на второй прокрутке. Уменьшала кегль до 28, но становится мелко и несолидно. Как ужимают первый экран на телефоне?
правка 1
Заголовок на 360 не обязан быть тем же текстом. Сократи до трёх-четырёх слов, остальное в подзаголовок, 28-32 px нормально.
правка 2
в ответ @elena_kzn
А так можно, разные тексты на разных экранах? Я думала, это какой-то обман.
правка 3
правка принятаавтор кейса взял в работу
Можно и делается постоянно, только нарисуй оба варианта текста явно, иначе я сверстаю один и сокращать будет некому.
Теперь по экрану. На 360 ширина контента 328 при полях 16. Порядок сверху вниз я бы сделал такой: заголовок 28-30 px в две строки, сразу под ним три пункта про 2 часа, гарантию и оплату, но не столбиком, а мелкими чипами в одну-две строки, потом кнопка во всю ширину высотой 48. Фото мастера на первом экране телефона не нужно совсем: отдай его во второй блок или сделай маленький круглый аватар рядом с заголовком.
И кнопку «Вызвать мастера» на телефоне лучше сделать звонком, а не формой, в ремонте техники с мобильного почти все звонят. Это вопрос к клиенту, но вопрос важный.
Теперь по экрану. На 360 ширина контента 328 при полях 16. Порядок сверху вниз я бы сделал такой: заголовок 28-30 px в две строки, сразу под ним три пункта про 2 часа, гарантию и оплату, но не столбиком, а мелкими чипами в одну-две строки, потом кнопка во всю ширину высотой 48. Фото мастера на первом экране телефона не нужно совсем: отдай его во второй блок или сделай маленький круглый аватар рядом с заголовком.
И кнопку «Вызвать мастера» на телефоне лучше сделать звонком, а не формой, в ремонте техники с мобильного почти все звонят. Это вопрос к клиенту, но вопрос важный.
правка 4
Чипы по высоте делай кратно 8, 32 или 40, с промежутком 8. Тогда ряд не будет гулять, когда текст переносится на вторую строку
правка 5
Проверь ещё 320. Такие телефоны встречаются реже, но встречаются, и длинный чип вроде «оплата после ремонта» там иногда не влезает в строку.
правка 6
Сделала. Заголовок для телефона «Ремонт техники на дому за 2 часа», 30 px, две строки. Под ним три чипа высотой 32, кнопка на всю ширину. Фото унесла во второй блок, у заголовка маленький аватар мастера. Клиент согласился, что кнопка на телефоне звонит, сказал, что ему и так все звонят. Теперь на 360 всё главное на первом экране, на 320 один чип переносится, но выглядит нормально. Геннадий, спасибо, оба текста подписала в макете отдельно, чтобы при вёрстке никто не гадал. Сама бы я до разных заголовков ещё долго не додумалась, всё пыталась ужать кегль.