Taptop vs Tilda: тестируем платформы для создания сайтов
Привет! Я Игорь Литвинцев, CEO визуального редактора кода Taptop. Недавно мы решили провести настоящее исследование — сравнить верстку сайта на Taptop и на Tilda. Для этого пригласили независимого эксперта — веб-дизайнера Алину Котылевскую. Результат — 15 часов верстки, три сервиса для создания сайтов, один дизайнерский макет и много инсайтов. Сейчас расскажу, что мы выяснили.
Как тестировали платформы
Алина несколько лет верстает сайты на Тильде и год на Таптопе. Часто на Тильде ей приходится подключать платные модификации (моды), так как стандартного функционала не хватает для воплощения всех дизайнерских хотелок. Поэтому решили сделать три варианта верстки:
Чтобы затестить все возможности, Алина выбрала нестандартный дизайнерский макет со сложными блоками — аккордеоном, слайдером, галереей, табами.
Оценивались вот такие параметры:
- Скорость верстки
- Возможность повторить верстку в точности, как в макете
- Скорость и удобство адаптации сайта
- Простоту внесения правок и поддержки сайта
- Скорость загрузки сайта в браузере
- Стоимость для дизайнера и для клиента
Если хотите увидеть детальный разбор верстки, смотрите видео. А здесь расскажу про самые важные моменты и результаты сравнения.
Скорость верстки: каждая минута на счету
За несколько лет работы в веб-дизайне Алина поняла, что время — главный ресурс.
От скорости верстки напрямую зависит доход дизайнера в месяц — чем больше сайтов сделаешь, тем больше заработаешь.
Стандартные блоки vs Кастомный дизайн
В Тильде можно использовать стандартные блоки, и тогда верстка идет быстрее. Но есть нюанс — такие блоки часто не подходят для дизайнерских макетов. Кастомизация жестко ограничена. Приходится использовать модификации, а они сильно увеличивают время верстки.
Вот пример верстки меню из нашего теста:
- Обычная Тильда: 18 минут работы, но не удалось настроить размер кнопки как в макете
- Тильда с модами: 40 минут, зато кнопка получилась как надо
- Таптоп: 28 минут, и меню точно соответствует макету
Получается, что Таптоп позволяет сделать всё по макету и при этом потратить меньше времени, чем при использовании модификаций Тильды.
Сложные блоки: где теряется время
Особенно ярко разница во времени проявилась при работе со сложными блоками. Возьмем блок с табами:
- Обычная Тильда: 55 минут (при этом нужный дизайн сделать не удалось, получился упрощенный стандартный блок)
- Тильда с модами: 2 часа 18 минут
- Таптоп: 48 минут
Почему такая разница? В Таптопе можно настроить классы один раз, и они работают для всего сайта. А в Тильде приходится возиться с каждым элементом отдельно.
Свойства классов пригодятся, когда будет много страниц с похожей структурой. Я не буду создавать каждую карточку с нуля, настраивать шрифты и стили. Просто применю класс — и все мои настройки применятся разом.
Время верстки каждого блока Алина собрала в таблицу.
На первый взгляд разница в цифрах небольшая. Но это результаты верстки всего одной страницы. А если у нас будет сайт на 40 страниц, что тогда?
- Тильда: Время верстки будет практически умножаться на количество страниц. Каждую страницу и каждый блок придется настраивать по отдельности.
- Таптоп: Никаких бесполезных повторений — вы настроите стили один раз, и будете быстро и легко стилизовать блоки на всех новых страницах сразу.
В итоге вы потратите на верстку многостраничника на Тильде месяц, а на Таптопе уложитесь в пару недель.
Удобство верстки: когда работа приносит радость
Алина оценивала не только скорость, но и комфорт работы. Лишние действия и однообразные задачи быстро утомляют дизайнера.
Разница между платформами была ощутимая. В Тильде многие базовые задачи превращались в настоящее испытание. Три ключевых момента:
1. Загрузка шрифтов
- Тильда: Пришлось использовать костыльный способ для загрузки трех и более шрифтов — два шрифта добавлять через Google Fonts и один через свой файл.
- Таптоп: Просто выбираешь шрифт из списка и применяешь к элементу. Никаких проблем!
2. Настройка одинаковых элементов
- Тильда: Рутинное повторение действий.
- Таптоп: Стилизуешь один элемент — применяешь класс ко всем, и готово.
3. Сложные блоки
- Тильда: Постоянный поиск обходных путей.
- Таптоп: Все элементы настраиваются штатными средствами. Был один небольшой баг с аккордеоном — и то быстро решился.
Соответствие макету: битва за pixel perfect
Дизайнеры часто боятся, что красивый макет невозможно воплотить на конструкторах. И не зря. Посмотрим, насколько платформы справились с версткой pixel perfect.
Обычная Тильда: много ограничений
- Меню — нельзя настроить размер кнопки
- Аккордеон — только базовые настройки, не получилось повторить макет
- Галерея — нельзя сделать разную высоту фотографий и нестандартное количество картинок на экране
- Табы — только горизонтальное расположение, пришлось изменить дизайн
Соответствие макету: примерно 50%.
Тильда с модами: полумеры
- Галерея точно по макету, но ее будет сложно редактировать клиенту
- Табы соответствуют дизайну, но процесс занял море времени
- Проблемы с аккордеоном остались
Соответствие макету: 60-70%.
Таптоп: дизайн pixel perfect
- Меню в точности как в макете
- Аккордеон настроен полностью по дизайну
- Галерею удалось сделать в точности, хотя и не сразу
- Табы можно быстро настроить и расположить как угодно
Соответствие макету: 100%.
Адаптация сайта: как спастись от рутины
Больная тема для каждого веб-дизайнера. Адаптация кастомных блоков часто превращается в часы рутинной работы. Но оказывается, есть возможность этого избежать. Посмотрим, как получилось настроить адаптацию на разных платформах.
Тильда: ручная настройка каждого пикселя
- Каждый блок адаптируется отдельно
- Нестандартные элементы — головная боль
На обычной Tильде зеро-блоки — это отдельный вид ада. Я могу несколько часов тратить просто на то, чтобы двигать пиксели на всех разрешениях. И все равно получится криво.
- Стандартные блоки адаптируются автоматически, но не дают нужный дизайн
Стандартные блоки Тильды — это сделка с дьяволом. С одной стороны, ты не тратишь на адаптивы больше 5 минут. С другой стороны, ты ничего не адаптируешь. Наверно, для новичка это плюс, т.к. Тильда всё подстраивает сама. Но когда у тебя есть макет с заданным дизайном — это огромный минус, потому что ты не можешь его повторить в точности.
Таптоп: автоматическая магия
- Работают автолейауты, как в Figma
- Один раз настроил, и готово
- Блоки самостоятельно подстраиваются под разные экраны
- Карточки автоматически выстраиваются в столбец на мобильных устройствах
В результате скорость работы отличается в разы. Например, адаптация блока с табами заняла:
- На Тильде: 2 часа
- На Таптопе: 16 минут
Общее время, потраченное на адаптивы, для всех трех вариантов:
Поддержка сайта и правки: реальный сценарий
Этот фактор особенно важен для больших проектов. Никто не хочет тратить время на повторную правку всех страниц и блоков — это отнимает кучу сил и времени.
Правки по дизайну
Алина протестировала самый обычный кейс: клиент просит изменить дизайн всех заголовков сайта.
Время, которое потребовалось на правки:
- Обычная Тильда: 11.5 минут
- Тильда с модами: 15.5 минут
- Таптоп: 3.5 минуты
Во что это выльется на большом сайте (например, на 40 страниц):
- На Тильде такие правки потребуют 8 часов рутинной работы — на каждом разрешении придется всё выравнивать вручную.
- На Таптопе для многостраничного сайта правки займут не намного больше, чем для лендинга — примерно 7-10 минут. Потому что не нужно будет редактировать каждый блок отдельно, а можно сделать всё через классы и применить стили сразу ко всем блокам.
Умножим эти цифры на количество правок, которые обычно просит клиент — и сразу поймем, почему дизайнеры тратят столько времени на поддержку сайтов.
Изменение контента
«А давайте еще вот здесь блок добавим, а тут текста будет в два раза больше» — обычная история от клиента. На таких задачах вы очень хорошо почувствуете разницу в скорости внесения правок.
Допустим, что клиент просит добавить блок текста:
- На Тильде: добавление контента — квест, при котором «едет» вся адаптация, нужно ресайзить и двигать все блоки вручную.
- На Таптопе: новый блок автоматически встраивается и адаптируется на всех разрешениях.
Скорость загрузки сайта: тест Google PageSpeed
Скорость загрузки напрямую влияет на конверсию сайта — посетители не будут долго ждать и уйдут к конкурентам.
Вот какие результаты выдал тест производительности на мобильных устройствах:
- Обычная Тильда: 78%
- Тильда с модами: 63%
- Таптоп: 91%
Почему такая разница? Дело в чистоте кода:
- Тильда: Создает много лишних элементов, а модификации еще больше перегружают код. Браузеру приходится обрабатывать кучу лишних данных.
- Таптоп: Генерирует чистый код, который загружается быстрее.
А ведь быстрый сайт — это не только удобство пользователей, но и лучшие позиции в поиске.
Стоимость: для дизайнера и для клиента
Сравним затраты на создание сайта:
- На обычной Тильде: 750 рублей в месяц
- На Тильде с модификациями: 1800 рублей в месяц (750 руб. Тильда + стоимость модов)
- На Таптопе: от 0 до 750 рублей в месяц (на бесплатном тарифе доступен основной функционал)
А что по стоимости поддержки сайта?
Тильда: Здесь важно учитывать, что на Тильде с модами вы можете редактировать блоки только при активной подписке. Так что расходы на внесение правок возрастут. Можно отказаться от использования модов, но тогда вероятность сделать нужный дизайн резко уменьшается.
Таптоп: Дает экономию в долгосрочной перспективе — и для дизайнера, и для его клиентов.
Итоги: кому что подойдет
Обычная Тильда: Хороша для простых сайтов со стандартными блоками, не подходит для сложных кейсов.
Выбирайте, если вы:
- Только начинаете работать с сайтами
- Делаете простые лендинги
- Работаете в основном со стандартными блоками
- Не хотите изучать новые инструменты
Тильда с модификациями: Больше возможностей для дизайна, но также больше проблем.
Хороший выбор, если вы:
- Уже хорошо знаете Тильду и ее ограничения
- Готовы платить больше за дополнительные возможности
- Не боитесь сложностей с поддержкой
- Согласны тратить больше времени на адаптацию
Таптоп: Неограниченные возможности дизайна и и максимально удобные инструменты для быстрой работы.
Стоит выбрать, если вы:
- Работаете со сложными проектами
- Цените свое время и хотите работать быстрее
- Делаете уникальные дизайнерские сайты
- Заботитесь о скорости загрузки и SEO
- Готовы потратить немного времени на изучение более профессионального инструмента
Тест показал — Таптоп реально помогает дизайнерам работать эффективнее, давая больше возможностей и экономя время и деньги. Да, нужно потратить некоторое время на освоение платформы, но зато потом работа пойдет быстрее, легче и приятнее — меньше рутины, больше творчества и свободы.
На самом деле, освоить платформу Taptop несложно. Приходите на бесплатный Crash курс — и всего за 10 коротких видео-уроков вы научитесь создавать сайты, используя современные no-code технологии. Каждый урок подкреплен практическими заданиями, а персональная обратная связь от преподавателя поможет быстро освоить новые навыки.
А если вы настроены на серьезный рывок в веб-дизайне, приглашаю в нашу школу no-code верстки — совместный проект Taptop и UPROCK. Ближайший курс стартует в марте, но лучше поторопиться — мест осталось мало. За 10 недель вы максимально погрузитесь в no-code разработку и научитесь создавать сложные сайты с крутыми анимациями и работать с динамическими данными. Вы откроете для себя новый уровень веб-дизайна — и сможете верстать в два раза быстрее и зарабатывать больше.
За 18 лет работы с сайтами я понял одну вещь: большинство предпринимателей не хотят разбираться в технологиях. Они хотят волшебную таблетку, которая решит все их проблемы. Спойлер: это Тильда. Но готовы ли вы признать это? :)
Интерьеры в фильмах — не просто фон. Они задают атмосферу, передают характер героев и иногда становятся важнейшими персонажами сюжета. Декорации могут вдохновить на создание уникальных пространств в реальной жизни.
Существует куча способов создать свой сайт, самый простой и доступный каждому Tilda. Но стоимость подписки кратно увеличилась, показываю, как создать свой сайт с нуля за гораздо меньшие деньги.
Вы часто задаётесь вопросами: почему клиенты не возвращаются, а реклама не даёт ожидаемого результата? Возможно, ваша аудитория просто не может найти вас в интернете. Или сайт, который есть, не вызывает доверия и не работает на ваш бизнес. Эти проблемы знакомы многим владельцам малого бизнеса. Но решение гораздо ближе, чем кажется. Tilda — это ваш…
Стоит ли дизайнеру участвовать в баттлах? Я считаю, однозначно да. И дело не только в призах — это скорее история про развитие профессиональных навыков. Мы все думаем о том, как быстрее расти в профессии и зарабатывать больше. А дизайн-баттлы — это супер возможность для прокачки своих скиллов. И сейчас расскажу, почему они реально работают.
О клиенте: известный в Уфе психолог и бизнес-тренер с хорошим сарафанным радио. При этом Instagram не развит и продаж с него нет.
Привет! С вами основатель веб-агентства Yegor.agency — Егор Захаров. Решил разложить все по полочкам — рассказать, сколько стоит сделать сайт в 2024 году и какие платформы для этого используются. А какой конструктор давно пора отправить на мусорку.