Длинные названия ломают вёрстку

Сайт сдали, всё выглядело аккуратно. Потом загрузили настоящий каталог — и карточки товаров поехали. Где-то название вылезло за границы плитки, где-то обрезалось на середине слова, где-то разорвало сетку так, что один товар занял два места. Меню при добавлении пункта «Проектирование и монтаж систем вентиляции» перескочило на вторую строку и закрыло логотип. Кнопка «Рассчитать стоимость обслуживания» на телефоне превратилась в три строки, вылезающие за экран. Всё это — одна и та же проблема: вёрстку делали на коротких примерах, а жизнь подсунула длинные. Разберём, почему так происходит, где это ломается чаще всего, как это влияет на заявки и что с этим делать — и в дизайне, и в текстах.

Откуда берутся длинные названия

Причины прозаические.

Технические товары называются длинно. «Насос циркуляционный с мокрым ротором для систем отопления, 25/60, 180 мм» — нормальное название в каталоге оборудования. Короче его сделать нельзя, не потеряв смысл.

Артикулы и модели дописывают в название. Чтобы товар находился поиском по номеру.

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

Названия поставщика. В них часто дублируется бренд, серия, характеристики и единицы измерения.

Услуги описываются подробно. «Техническое обслуживание систем кондиционирования в торговых помещениях» — точная формулировка, но длинная.

Составные слова в русском языке. «Электроводонагреватель», «металлоконструкции», «влагостойкость» — их нельзя перенести, и они не влезают в узкие колонки.

Длинные адреса и почтовые ящики. В подвале и на странице контактов.

Имена и должности. «Заместитель руководителя отдела технического сопровождения».

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

Где ломается чаще всего

Перечислим места по частоте.

Плитки каталога. Самое частое. Карточки выровнены по сетке, у каждой фиксированная высота. Товар с названием в две строки и товар с названием в пять строк ломают выравнивание: кнопки оказываются на разной высоте, сетка рассыпается.

Меню. Длинный пункт либо переносится на вторую строку и рушит шапку, либо уезжает за край и становится недоступным. На планшетах и узких экранах — особенно.

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

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

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

Фильтры в каталоге. Длинное название значения фильтра не влезает в узкую колонку сбоку и налезает на галочку.

Карточки в списках. Новости, статьи, объекты портфолио.

Формы. Подписи к полям и текст в выпадающих списках.

Подвал сайта. Колонки со ссылками, длинные адреса почты.

Заголовки страниц. Особенно на телефоне: длинный заголовок занимает половину первого экрана.

Слайдеры и баннеры. Текст поверх картинки, который на узком экране накрывает лицо человека на фото или уезжает за край.

Почему это стоит заявок

Связь не всегда очевидна, поэтому назовём прямо.

Обрезанное название не даёт понять, что за товар. Человек видит обрывок строки и не может отличить одну позицию от другой. Он не будет открывать все карточки подряд — он уйдёт.

Кнопка, уехавшая за экран, недоступна физически. Заявку невозможно оставить.

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

Таблица с горизонтальной прокруткой на телефоне не читается. Характеристики и цены остаются невидимыми.

Меню, закрывающее логотип, мешает навигации. Человек не находит нужный раздел.

Налезающий текст мешает нажать нужное. Палец попадает не туда, куда целился.

Всё это не абстрактное «некрасиво», а конкретные точки, где посетитель прекращает путь к заявке.

Как чинить: приёмы вёрстки

Набор решений, которые закрывают большинство случаев.

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

Задавать выравнивание по сетке правильно. Карточки в каталоге должны растягиваться по высоте самой высокой в ряду, а кнопки — прижиматься к низу карточки. Тогда разная длина названий не ломает ряд.

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

Делать таблицы адаптивными. На узких экранах таблица превращается в набор блоков «параметр — значение» вместо строк и колонок. Это универсальное решение для характеристик.

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

Задавать кнопкам гибкий размер. Чтобы они растягивались под текст, а не ломали соседей. И проверять, как это выглядит при самой длинной подписи.

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

Проверять на реальных данных. Не на условных примерах, а на настоящем каталоге.

Как чинить: приёмы текста

Половина проблемы решается не вёрсткой, а редактурой.

Отделить название от характеристик. В названии — суть, характеристики — в отдельных полях. «Насос циркуляционный 25/60» в названии, «мокрый ротор», «180 мм», «для систем отопления» — в свойствах. Это и короче, и лучше для фильтров, и лучше для поиска.

Завести короткое название для списков. Многие системы управления сайтом это поддерживают: длинное название для карточки и для поиска, короткое — для плиток и меню. В ХостСМС для информационных элементов и товаров есть отдельные поля, и разделить отображение в списке и в карточке — штатная задача, не требующая доработок.

Сократить пункты меню. «Услуги» вместо «Наши услуги и сервисы», «Обслуживание» вместо «Техническое обслуживание и сопровождение». Подробное название останется заголовком самой страницы.

Сократить текст кнопок. «Рассчитать» вместо «Рассчитать стоимость обслуживания». Кнопка не обязана объяснять всё — рядом есть текст.

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

Проверить названия категорий. Они попадают и в меню, и в крошки, и в фильтры — то есть в самые узкие места.

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

Как проверять

Быстрый набор проверок, который стоит делать после любого наполнения каталога.

Найти самые длинные значения. Отсортировать каталог по длине названия и открыть первые двадцать позиций — в списке и в карточке.

Посмотреть на узком экране. Не уменьшая окно браузера, а на реальном телефоне. Ширина 360 точек — самая проблемная.

Проверить на планшете в вертикальном положении. Это ширина, на которой чаще всего ломается меню.

Проверить при увеличенном шрифте. Часть посетителей использует увеличение текста в настройках. Вёрстка, рассчитанная строго под размер, при этом рассыпается.

Проверить самые длинные пункты меню и крошек.

Проверить таблицы характеристик. У товара с максимальным числом параметров.

Проверить формы. Длинные подписи полей, длинные значения в списках выбора.

Проверить подвал. Длинные почтовые адреса и названия разделов.

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

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

Как это связано с продвижением 3 в 1

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

Поиск. Здесь есть тонкий, но важный момент. Название товара — один из главных сигналов, по которым страницу находят. Если ради красоты названия обрезают не визуально, а физически — то есть в самой разметке страницы остаётся укороченный вариант, — теряется часть информации, по которой людям вас находить. Правильно: полное название в разметке, визуальное ограничение — стилями. Отдельно про генеративные ответы нейропоиска: такие ответы собираются из конкретных характеристик и названий. Если характеристики свалены в название одной строкой, а не разложены по полям, извлечь из них факты сложнее. Аккуратная структура «название плюс отдельные характеристики» работает лучше и для фильтров, и для поиска, и для цитирования.

Яндекс.Справочник. В карточке компании в Яндекс Картах и Яндекс Бизнесе есть список услуг, и там тоже действует ограничение по длине. Услуга с названием в восемь слов будет обрезана. Поэтому короткие названия услуг нужны и там — а значит, есть смысл продумать их один раз для всех площадок сразу.

2ГИС. То же самое: рубрики и услуги в карточке, ограниченные по длине, и мобильный экран, на котором всё ещё уже. Плюс отдельный момент: человек, перешедший из 2ГИС на ваш сайт, точно смотрит его с телефона. Если каталог на телефоне разъезжается, вы теряете именно эту аудиторию.

Практический вывод: список коротких названий услуг стоит составить один раз и использовать везде — в меню сайта, в карточке Яндекс Карт, в карточке 2ГИС. Это и экономит время, и делает компанию узнаваемой в разных местах.

И как всегда: обращения с карт считать наравне с заявками с сайта — отдельными номерами телефонов на карточках и просмотром их статистики. Тогда будет видно, что происходит с мобильной аудиторией, которая страдает от проблем с вёрсткой больше всех.

Что измерять

Эффект исправлений виден в конкретных цифрах.

• Доля отказов на страницах каталога, отдельно на мобильных устройствах.
• Глубина просмотра каталога: сколько карточек открывают.
• Доля посетителей, дошедших до формы, на телефоне и на компьютере отдельно. Если разница велика — почти наверняка проблема в мобильной вёрстке.
• Количество обращений с мобильных устройств.
• Карта кликов в Яндекс.Метрике: видно, куда люди нажимают, и заметны промахи мимо элементов.
• Записи визитов в Вебвизоре: самый наглядный способ увидеть, как человек не может попасть в кнопку.

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

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

Частые ошибки

Проверять вёрстку на коротких примерах. Условные «Товар 1» и «Услуга 2» — и всё выглядит отлично.

Обрезать название физически, а не визуально. Теряется информация, по которой вас находят.

Не разделять название и характеристики. Длинная строка вместо структурированных данных.

Уменьшать окно браузера вместо проверки на телефоне. Это разные вещи: на реальном устройстве другой шрифт, другая плотность, другое поведение.

Не проверять после массовой выгрузки каталога. Новые позиции приходят с названиями поставщика.

Забывать про планшет в вертикальном положении. Самая проблемная ширина для меню.

Не учитывать увеличенный шрифт. Часть аудитории им пользуется.

Делать длинные подписи кнопок. Они ломаются первыми.

Коротко

Длинные названия — не исключение, а норма для реального каталога и реального списка услуг. Вёрстка должна быть к этому готова: разрешённый перенос длинных слов, карточки, выравнивающиеся по сетке независимо от высоты текста, визуальное ограничение строк без потери полного названия в разметке, адаптивные таблицы, продуманное поведение меню на узких экранах. Половина проблемы при этом решается редактурой: короткие названия для списков и меню, характеристики отдельными полями, лаконичные подписи кнопок. И проверять всё это нужно на реальных данных и на реальном телефоне, а не на тестовых примерах.

Если вы подозреваете, что ваш каталог на телефоне выглядит не так, как задумывалось, — специалисты компании «Сайты Профессионально» проведут бесплатную проверку. Посмотрим сайт на разных устройствах и ширинах, найдём места, где вёрстка разъезжается или элементы становятся недоступны, оценим структуру названий и характеристик и подготовим список конкретных исправлений с приоритетами — без обязательств с вашей стороны.