Проект, который не давал мне покоя
Есть проекты, к которым хочется вернуться. Они работают, заказчик ими пользуется, но ты сама понимаешь: результат мог быть гораздо лучше. Для меня таким проектом долгое время оставался ProCoffee — сайт аренды профессиональных кофемашин. Через три года после первой разработки я наконец получила возможность переделать его на Tilda. И теперь результат меня действительно устраивает.
Мое знакомство с ProCoffee началось несколько лет назад. Тогда я разрабатывала для клиента сразу два проекта на 1С-Битрикс: сайт аренды профессиональных кофемашин и большой интернет-магазин кофейного оборудования. Работа была масштабной и продолжалась около полугода.
Я отвечала за ведение проектов, дизайн, верстку, визуальные материалы и координацию разработки. Программную часть выполнял привлеченный специалист по Битрикс. Параллельно шло продвижение сайтов, поэтому приходилось учитывать SEO, настраивать соответствующие модули и согласовывать технические доработки.
Опыт получился непростым. Удаленная работа с несколькими участниками требовала постоянной координации. Некоторые вопросы невозможно было решить без подключения программиста, а сроки реакции не всегда совпадали с темпом, в котором хотелось двигаться.
Но причина моего недовольства результатом заключалась далеко не только в организационных сложностях.
Как я кастомизировала шаблон с ThemeForest под Битрикс
В тот момент у проекта были ограничения по бюджету и срокам. Поэтому вместо индивидуального дизайна и отдельной разработки верстки мы с клиентом решили использовать готовый шаблон.
Купили его на ThemeForest. Причем шаблон был из категории WordPress, а сам сайт разрабатывался на 1С-Битрикс.
У меня большой опыт HTML-верстки, поэтому адаптацией я занималась самостоятельно. Меняла оформление, перерабатывала блоки, подгоняла элементы под структуру проекта, корректировала стили и расположение отдельных компонентов. Такая работа называется кастомизацией шаблона.
И именно на этом проекте я особенно хорошо почувствовала, насколько спорным может оказаться такой подход.
Готовый шаблон часто выглядит вполне гармонично в своем первоначальном виде. Он создавался как единая система, где авторы заранее продумали взаимосвязь элементов, отступы, оформление и поведение интерфейса. Но когда начинаешь менять значительную часть этой системы, первоначальная логика постепенно нарушается.
Одно изменение требует другого. Появляются дополнительные стили, обходные решения, необходимость постоянно учитывать уже существующий код.
В какой-то момент возникает вопрос: а не проще ли было с самого начала заказать индивидуальный дизайн и разработать верстку именно для этого проекта? Сейчас я думаю, что в нашем случае такой вариант мог быть удачнее.
Повлияла ли адаптация шаблона на скорость сайта? Не исключаю. Поскольку шаблон изначально предназначался для другой платформы и подвергся довольно серьезной переработке, в проекте могли остаться лишние стили, скрипты или другие избыточные элементы.
Но это только предположение. Я не проводила отдельного технического аудита старой версии, который позволил бы точно определить причины низкой производительности. Поэтому утверждать, что дело было именно в шаблоне или способе его адаптации, не стану. Возможно, причины были связаны с несколькими факторами одновременно.
В тех условиях я сделала максимум возможного. Сайт был запущен, клиент им пользовался, продвижение продолжалось. Но лично у меня оставалось ощущение незавершенности.
Почему после десяти с лишним проектов на Битрикс я начала искать другую платформу
Много лет я разрабатывала сайты преимущественно на 1С-Битрикс. За это время было реализовано больше десятка проектов, и я хорошо познакомилась как с возможностями платформы, так и с особенностями организации разработки.
Сам Битрикс я считаю серьезной системой, у которой есть своя область применения. Но постепенно меня все больше беспокоила зависимость от других специалистов.
Причем проблема была не в том, что программисты плохо работают. Среди них много отличных профессионалов. Сложность заключалась в самой организации процесса.
Наверное, многие, кто занимается разработкой сайтов, сталкивались с похожей ситуацией. На старте проекта собирается команда. У всех есть время, интерес и общий план работы. Но ближе к завершению ситуация начинает меняться.
У привлеченных специалистов появляются новые проекты, меняются приоритеты и загрузка. Вносить небольшие правки становится сложнее, сроки согласований увеличиваются. А после сдачи сайта первоначальный исполнитель может вообще перестать участвовать в его сопровождении. Это вполне объяснимо: у человека появляются другие обязательства, и он не может бесконечно оставаться доступным для каждого завершенного проекта.
Но для того, кто отвечает перед клиентом за результат, ситуация становится серьезной проблемой. Нужно срочно внести изменение, поправить функционал или устранить ошибку, а специалист, который писал соответствующую часть кода, недоступен.
Тогда приходится искать другого разработчика. Новый человек впервые видит проект. Ему нужно разобраться в архитектуре, изучить существующий код, понять, какие решения и почему принимались раньше. На это уходит время. Иногда значительное. Возникают дополнительные расходы, сдвигаются сроки, а заказчик вполне справедливо ожидает, что сайт будет работать и развиваться.
Я неоднократно сталкивалась с такими ситуациями и постепенно поняла, что хочу изменить сам подход к работе. Мне нужна была большая самостоятельность: возможность самой реализовывать большинство функций, вносить изменения и сопровождать сайт, не выстраивая каждый раз новую цепочку согласований.
Почему именно Tilda
Постепенно я стала все больше работать с Tilda. Сначала привлекала простота разработки и удобство визуального редактора. Но со временем открылись гораздо более интересные возможности.
Стандартные блоки можно модифицировать. С помощью CSS и JavaScript — менять внешний вид и поведение элементов, реализовывать нестандартные интерфейсы и дополнять функциональность. При этом большая часть сайта остается доступной для управления через привычную административную панель.
Мой опыт верстки оказался здесь очень полезным. Я могла самостоятельно проектировать страницы, писать стили и скрипты, адаптировать стандартные блоки и решать технические вопросы. Постепенно Tilda стала для меня основной платформой разработки.
Это не означает, что на ней можно или нужно реализовывать абсолютно любой проект. Но для того класса коммерческих сайтов, с которыми я чаще всего работаю, она дала именно ту самостоятельность, которой мне раньше не хватало. И ProCoffee стал одним из проектов, на которых преимущества этого подхода проявились особенно хорошо.
Через три года я предложила все переделать
К тому моменту возможности Tilda уже позволяли реализовать каталог профессионального оборудования с фильтрацией, отдельными страницами моделей и необходимыми коммерческими функциями. У меня также накопился опыт разработки многостраничных сайтов и интернет-магазинов с собственными модификациями.
Поэтому я предложила клиенту перенести ProCoffee с Битрикс на Tilda. Мне хотелось решить сразу несколько вопросов. Во-первых, улучшить скорость работы сайта. Во-вторых, упростить дальнейшее сопровождение. В-третьих, наконец привести дизайн и техническую реализацию к тому уровню, который меня устраивает.
Клиент согласился, и мы приступили к разработке новой версии.
Бережный редизайн: когда клиенту нравится старый сайт
Здесь возник интересный момент. Несмотря на мое критическое отношение к предыдущей версии, клиенту нравился ее дизайн. За несколько лет сайт стал привычным. Цветовая гамма, иконки и отдельные элементы оформления воспринимались как часть фирменного стиля.
Поэтому полностью менять визуальную концепцию я не стала. Сохранила основную палитру и некоторые характерные элементы, но сделала оформление спокойнее. Старый сайт, на мой взгляд, был немного слишком ярким. Хотелось уменьшить визуальную перегруженность, привести блоки к более единой системе и аккуратнее расставить акценты.
В результате получился бережный редизайн. Внешний вид изменился, но ProCoffee остался узнаваемым. Мне нравится такой подход: уважать предпочтения клиента и историю уже работающего проекта, одновременно улучшая его оформление.
Полтора месяца вместо полугода
Первоначальная разработка двух сайтов на Битрикс заняла около шести месяцев. Новую версию ProCoffee на Tilda мы собрали, наполнили и запустили примерно за полтора месяца.
Конечно, напрямую сравнивать эти сроки было бы нечестно. При повторной разработке у нас уже были структура, готовый контент и понимание особенностей бизнеса. Но разница в самом процессе работы оказалась огромной.
Большинство вопросов я могла решить самостоятельно. Не требовалось согласовывать каждую доработку с отдельным программистом, ждать возможности внести небольшое изменение или дополнительно объяснять особенности проекта. Именно этого я и добивалась, когда начала искать альтернативу прежнему подходу к разработке.
Как я переносила сайт и что произошло с SEO
При переносе мне было важно максимально сохранить существующую структуру. ProCoffee уже несколько лет продвигался в поисковых системах. На сайте были проиндексированные разделы, карточки оборудования и информационные страницы.
Поэтому я старалась сохранить прежние URL везде, где это было возможно. Если адрес страницы менялся, мы сразу настраивали 301-редирект. Сам переход прошел быстро, без продолжительного перерыва в работе сайта.
Но с поисковыми позициями все оказалось сложнее. После переноса ProCoffee потерял часть позиций в поисковой выдаче, несмотря на сохранение структуры и настройку редиректов. Я не хочу делать вид, что этого не произошло.
Смена платформы всегда затрагивает техническую сторону сайта. Меняется HTML-разметка, способ формирования страниц, отдельные элементы внутренней структуры и другие параметры. Все это может влиять на поисковые системы. Какой именно фактор оказался решающим в нашем случае, без дополнительного анализа сказать нельзя.
Сейчас мы продолжаем заниматься SEO-продвижением ProCoffee, и восстановление прежних позиций остается одной из основных задач. Для меня это часть дальнейшей работы над проектом.
Каталог кофемашин: здесь Tilda меня приятно удивила
Каталог — одна из самых важных частей ProCoffee. На сайте представлены профессиональные автоматические, суперавтоматические и рожковые кофемашины, а также кофемолки. Оборудование дорогостоящее, с большим количеством характеристик, поэтому важно, чтобы посетитель мог быстро найти подходящую модель.
Для организации каталога я использовала встроенный модуль «Каталог товаров» Tilda. Он позволил реализовать вывод карточек, превью оборудования и фильтрацию на страницах разделов.
Для каждой категории предусмотрела собственный набор фильтров. Например, характеристики, важные при выборе рожковой кофемашины, могут существенно отличаться от параметров суперавтоматического оборудования. Фильтры расположены в левой колонке и позволяют выбирать модели по нужным критериям.
Большую часть функциональности удалось реализовать стандартными инструментами Tilda. А там, где возможностей платформы не хватало, я использовала собственные модификации.
SEO-посадочные страницы — то, что наконец удалось сделать как хотелось
На предыдущем сайте мы пытались организовать систему тематических SEO-посадочных страниц с использованием модуля Битрикс. Но реализовать ее в том виде, который мне был нужен, тогда не получилось. На Tilda эта задача оказалась гораздо проще.
Принцип следующий. Берем определенную категорию оборудования, формируем подборку по необходимым критериям, создаем отдельную страницу с человекопонятным URL и дополняем SEO-оптимизированным текстом.
Например, на ProCoffee есть страница автоматических кофемашин для салонов красоты: procoffee.pro/catalog/avtomaticheskie/dlya-salona-krasoty. На ней представлено оборудование для соответствующего сценария использования.
Ссылки на подобные страницы я вывела в виде облака на страницах основных разделов каталога. У каждой категории собственная группа тематических посадочных страниц. Для нужного способа вывода ссылок пришлось модифицировать стандартные блоки Tilda. Но в результате я получила именно ту структуру, которую хотела.
По похожему принципу организован раздел производителей. Каждая брендовая страница содержит оборудование конкретной марки, позволяет дополнительно фильтровать модели по характеристикам и включает SEO-оптимизированный текст.
Таким образом, каталог можно развивать по категориям, брендам и различным сценариям использования оборудования. Мне нравится, что такая архитектура позволяет постепенно расширять сайт без необходимости постоянно менять его основу.
Карточки оборудования и две программы аренды
За годы разработки каталогов и интернет-магазинов на Tilda у меня сформировался собственный подход к товарным карточкам. Я стараюсь делать их максимально информативными и удобными для потенциального клиента. Особенно это важно для дорогого профессионального оборудования.
Человек должен понимать, что представляет собой конкретная кофемашина, какие у нее характеристики, для какого использования она подходит и на каких условиях ее можно получить. Поэтому при разработке карточек я уделила внимание структуре информации, описаниям, характеристикам и коммерческим элементам.
При этом у проекта есть своя особенность — две программы аренды. Посетитель может выбрать коммерческую аренду с фиксированной платой или аренду при условии приобретения определенного количества кофе. Я решила показать оба варианта непосредственно в карточке оборудования.
На одной кнопке указана стоимость коммерческой аренды. На другой — количество кофе, которое необходимо купить по соответствующей программе. Каждая кнопка открывает собственную форму заявки. Получается удобный сценарий: человек изучает кофемашину, видит условия и сразу может отправить обращение по выбранному варианту.
Для подробного сравнения программ аренды предусмотрен отдельный раздел сайта.
В будущем я хочу дополнить карточки возможностью автоматического формирования коммерческого предложения. Посетитель сможет скачать документ с информацией о конкретной модели на свой компьютер. Пока эта функция находится в планах.
ProCoffee — гораздо больше, чем каталог аренды
На сайте есть несколько дополнительных разделов. Один посвящен сервисному обслуживанию и ремонту профессионального кофейного оборудования. Другой — кофе собственной обжарки из Бразилии, который компания предлагает клиентам. Отдельно представлены подробные условия программ аренды.
Все эти направления нужно было объединить в понятную структуру, чтобы посетитель мог легко перейти от выбора кофемашины к изучению условий сотрудничества и дополнительных услуг. Мне важно, чтобы многостраничный сайт воспринимался как единая система, даже если в нем представлены разные направления бизнеса.
Блог, который мы продолжаем развивать
Еще одна важная часть ProCoffee — блог. Мы регулярно работаем над его содержанием: готовим большие статьи, аналитические материалы и обзоры профессиональных кофемашин. Мне нравятся развернутые публикации с иллюстрациями, подробным раскрытием темы и понятной структурой.
В статьях используем внутренние ссылки на конкретные модели оборудования. Это позволяет читателю перейти от изучения материала к соответствующей карточке в каталоге. Кроме того, блог помогает расширять информационную часть сайта и работать с поисковыми запросами, связанными с выбором и использованием профессионального оборудования.
Главное впечатление после запуска — сайт наконец стал быстрым
Когда я впервые открыла новую версию ProCoffee, это было отдельное удовольствие. После предыдущего сайта, где иногда приходилось долго смотреть на анимированную иконку загрузки, разница ощущалась сразу. Новая версия на Tilda работает заметно быстрее.
Я не проводила отдельного сравнительного тестирования с фиксацией показателей до и после, поэтому не буду приводить выдуманные проценты улучшения. Но в повседневной работе разница действительно существенная.
И что особенно приятно — клиент тоже доволен результатом. Сейчас я могу самостоятельно вносить изменения, работать с каталогом, развивать посадочные страницы и заниматься оформлением без необходимости постоянно привлекать отдельного специалиста для каждой доработки. Именно такой самостоятельности мне долгое время не хватало.
Редизайн, за который клиенту не пришлось платить отдельно
Есть еще одна деталь, которую мне особенно хочется отметить. Переделку ProCoffee мы выполнили в рамках действующей абонентской платы за информационное сопровождение и продвижение. То есть клиенту не потребовалось дополнительно оплачивать разработку новой версии.
С моей стороны это было осознанное решение. Я давно хотела вернуться к проекту и исправить то, что меня не устраивало в предыдущей реализации. Наконец появилась техническая возможность сделать все иначе, а заодно существенно упростить дальнейшее сопровождение. В каком-то смысле это действительно было закрытие гештальта. Теперь, открывая ProCoffee, я вижу сайт, результатом которого довольна.
Что хочу реализовать дальше
Сейчас мы продолжаем информационное сопровождение и SEO-продвижение ProCoffee. Одна из приоритетных задач — восстановление поисковых позиций после смены платформы.
Параллельно планируем дополнять карточки оборудования видеообзорами. Материалы для них ожидаем от отдела маркетинга клиента. Также хочу реализовать автоматическую генерацию коммерческих предложений по конкретным кофемашинам.
Но есть и более масштабная идея. Мы обсуждаем создание приложения, которое расширит возможности существующего сайта. Клиентам нужны личные кабинеты с разными пользовательскими ролями и соответствующими правами доступа.
Пока мы на этапе сбора требований и проработки сценариев использования. Рассматриваем Telegram Mini App и PWA. Окончательно выбирать технологию будем после того, как определим необходимый функционал и способы интеграции с сайтом.
Мне интересна именно такая постановка вопроса: сначала разобраться, какие возможности действительно нужны пользователям, а уже потом выбирать технологическую реализацию. Это будет достаточно сложный проект, поэтому торопиться с архитектурными решениями не хочется.
Что я вынесла из этой истории
ProCoffee стал для меня проектом, к которому удалось вернуться с новым опытом и другими техническими возможностями.
Первая разработка на Битрикс была непростой. Мы работали в условиях ограниченного бюджета, использовали шаблон с ThemeForest, предназначенный для WordPress, адаптировали его под другую платформу и много дорабатывали. Тогда я сделала все, что могла в предложенных обстоятельствах, но результат оставался далеким от того, который мне хотелось получить.
Спустя три года я смогла пересмотреть подход. За полтора месяца мы перенесли сайт на Tilda, аккуратно обновили дизайн, сохранили основную структуру, реализовали удобный каталог, фильтрацию и SEO-посадочные страницы. Сайт стал заметно быстрее, а работать с ним теперь значительно удобнее.
Конечно, остаются задачи. Восстановление поисковых позиций, развитие контента, новые функции и будущее приложение — все это еще впереди. Но теперь у проекта есть техническая основа, с которой мне комфортно работать и которую интересно развивать. А главное, я наконец довольна результатом.
Посмотреть ProCoffee: procoffee.pro.
Перенос сайта на Tilda без потери структуры
Если ваш сайт стал медленным и неудобным в сопровождении, я могу перенести его на Tilda с сохранением адресов и редиректов, аккуратно обновить дизайн и настроить каталог и SEO-страницы.