Как адаптировать таблицу в Tobiz для мобильных устройств если она сделана на Flex-блоке. Кейс Техмаш Холдинга

Адаптивная верстка таблиц — одна из самых частых головных болей при создании сайтов. Особенно когда на ПК стоит красивая сравнительная таблица на 3–5 колонок, а на телефоне она превращается в мешанину из текста и горизонтального скролла.

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

Проблема: таблица, которая не влезает в телефон

На ПК-версии сайта abn-tehma.ru мы сделали подробную сравнительную таблицу «Почему выбирают нас».

Три колонки:

• ✅ Техмашхолдинг (зелёная, с галочками)

• ⚠️ Типичный дилер (серая)

• ❌ Серый импорт (красная, с предупреждениями)

Восемь строк критериев: производитель, комплектация, гарантия, сервис, сроки поставки, ответственность, риски.

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

Решение: разбить на три цветных блока

Мы отказались от идеи «впихнуть таблицу в мобилку любой ценой».

Вместо этого сделали три отдельных блока:

Почему цвета? При скролле пользователь не видит все три блока одновременно. Цвет подсказывает: зелёный — выгодно, красный — опасно. Даже если человек пролистал мимо, он по цвету поймёт, где плюсы, а где минусы.

Как это выглядит в работе

На ПК — таблица, где выделен один столбец.

На мобилке — три самостоятельных блока, каждый со своим цветом и ключевыми тезисами.

Пример из реального проекта:

В зелёном блоке: «Официальный производитель. Ответственность закреплена в договоре. Популярные модели в наличии».
В красном блоке: «Перекуп. Производитель неизвестен. Комплектация непредсказуемая. Высокие риски».

Пользователь на телефоне за 5 секунд видит главное: у кого покупать выгодно, а у кого — рискованно.

Почему это работает для мобильного трафика

Сейчас на многих проектах доля мобильного трафика превышает 60%. Если ваш сайт неудобно смотреть с телефона — вы теряете больше половины потенциальных клиентов.

Цветные блоки вместо таблицы решают три задачи:

1. Читаемость — текст нормального размера, не надо зумить

2. Скорость восприятия — цвет сразу даёт сигнал: хорошо / плохо / нейтрально

3. Удержание внимания — нет раздражающего горизонтального скролла

Технические детали (для тех, кто в теме)

Работаем на платформе Tobiz. В ней — 5 основных разрешений экранов:

• ПК (базовый)

• Планшет горизонтально

• Планшет вертикально

• Мобильный горизонтально

• Мобильный вертикально

Каждый блок таблицы на ПК (а их было 17 в этом лендинге) нужно вручную адаптировать под 4 дополнительных формата. Поэтому мы и пошли на нестандартное решение: вместо адаптации таблицы — пересобрали её в блоки.

Это быстрее, понятнее для пользователя и надёжнее с точки зрения вёрстки.

Результат

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

• Сайт принимает заявки как с ПК, так и с телефонов

• Адаптация заняла предсказуемое время, без «сюрпризов» на мелких экранах

Когда стоит применять такой подход

Разбивать таблицу на цветные блоки стоит, если:

• В таблице 3–4 колонки и больше 5 строк

• Сравнение идёт по принципу «наш продукт — конкуренты — риски»

• Мобильный трафик составляет от 40% (а сейчас это почти всегда так)

Если же таблица небольшая (2–3 столбца, 3–4 строки) — можно оставить и на мобилке, просто уменьшив шрифт. Но крупные таблицы лучше перерабатывать в блоки.

Посмотреть, как получилось

Скриншот ПК-версии таблицы — выше по тексту.
Адаптированный вариант можно увидеть на самом сайте: abn-tehma.ru (откройте с телефона и прокрутите до блока «Почему выбирают нас»).

Другие наши проекты с адаптивной вёрсткой — в портфолио:
beloussov.ru/moi-raboty/

Заказать адаптивный сайт

Если вам нужен сайт, который одинаково хорошо работает на ПК, планшете и телефоне — пишите.

Для клиентов из Астрахани — отдельные условия: выезд на объект, фото, видео, встреча в офисе или в JOY.
beloussov.ru/astrahan/