Цифровизация Германии. Часть 1. Сайт

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

В предыдущих статьях:

Цифровизация Германии. Часть 0. План модернизации

Как было раньше?

Всего год назад у компании было очень символическое присутствие в онлайн-пространстве. Имелись заброшенные ещё в 2019 году аккаунты в Instagram, Facebook и YouTube. Не знаю, насколько насыщенными они были в момент своего расцвета, но до нас дошло лишь по несколько публикаций в каждом из них. Основным окном в мир был официальный сайт компании. На фоне социальных сетей он был более информативен и даже поддерживал английский язык в дополнение к немецкому. Созданный в 2011-м, он полностью соответствовал своему времени. Полноценный сайт-визитка с информацией о школе, курсах и сотрудниках.

Зачем же его менять?

1.Внешний вид

За более чем десятилетний срок дизайн сайта безнадёжно устарел. То, что воспринималось абсолютно нормальным при его запуске, сегодня вызывает боль в глазах. Любой платформе, с которой взаимодействует пользователь, необходимо регулярное обновление и подгон под современные стандарты UX/UI.

2.Функционал

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

3.Контент

Несмотря на то что единственной целью странички было информирование студентов, даже с этой задачей она не справлялась. Актуальность данных датировалась началом пандемии. Некоторых курсов уже не существовало, кто-то из преподавателей больше не работал, а целые филиалы были закрыты или переехали в другой город. Сюда же можно отнести различие в данных на немецкой и английской версиях сайта. В английской версии пропадали целые страницы. Регулярность обновления контента и простота этого процесса были очень важны при выборе новой платформы.

На чём делать новый сайт?

Выбор был очень простым и быстрым — Tilda. И вот почему:

1.Быстрый старт

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

2.Низкий порог входа

Очень важным моментом в создании сайта для меня была простота его дальнейшей поддержки человеком со стороны. Даже не разработчиком, который придёт мне на смену, а простым маркетологом, SMM-менеджером или, в крайнем случае, кем-то из секретарей. Поскольку объём работы увеличивается, а задачи усложняются, возможность делегировать обновление сайта от разработчика кому угодно была суперважна. И речь идёт не только о редактировании текста и замене картинок. Даже если у будущего контентмейкера будет потребность создать что-то новое, не имея при этом навыков разработки, он легко сделает это, добавив понравившиеся блоки.

3.Дизайн

Прелесть Tilda в красивых готовых блоках. Современный и стильный внешний вид вам практически гарантирован. Я часто повторял своим студентам на курсах мобильной разработки, что Glide отнимает у вас вариативность настроек внешнего вида, но даёт вам хороший дизайн, который невозможно испортить. В Tilda, конечно, больше свободы в плане настроек фронтенда, но и тут надо постараться, чтоб получилось плохо. Не обязательно быть дизайнером, чтобы уже завтра опубликовать красивый сайт, отвечающий современным требованиям.

4.Интеграции

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

5.Вёрстка

Tilda сама адаптирует каждый блок под большие и маленькие экраны, а также под мобильные телефоны. Конечно, всегда можно что-то упустить из виду, но в основном дизайн выглядит хорошо везде и требует очень редких и незначительных корректировок. На других платформах без адаптивной вёрстки это всегда боль.

Почему не другие платформы?

Конечно, рассматривались разные варианты (WebFlow, Bubble, FlutterFlow и WordPress). Каждый из них выигрывает по возможности сделать кастомный дизайн и сложный функционал. Мой любимый FlutterFlow вообще позволяет сделать всё что угодно, и если бы не Canvas-особенность фреймворка Flutter, то я бы крепко задумался сделать сайт именно на нём. Тем более что мобильное приложение было сделано именно там. Но невозможность индексировать страницы, сделанные на FlutterFlow, ставит крест на любом сайте, который должен гуглиться, а не быть платформой для внутреннего пользования. Ещё одна причина — сложность поддержки. Она же ставит крест и на всех остальных платформах. Вот так с нуля в них не нырнёшь. За неделю и даже две преемника не обучишь. Либо искать человека со знанием конкретного стека, либо начинать всё заново с уходом текущего разработчика.

А какие минусы у Tilda?

1.Многостраничность

Думаю, никто не ожидал, что это будет первым пунктом, но это моя главная боль последнего года. Расскажу подробнее. Каждая страница имеет свою немецкую, английскую, русскую, испанскую и арабскую версии. Таким образом, обновляя страничку одного из языковых курсов на немецком, неизбежно приходится повторять этот процесс ещё четыре раза. А потом ещё и в мобильном приложении (но там всё гораздо проще в этом плане). За год сайт разросся суммарно до 400 страниц, и его частое редактирование стало моим главным тайм-киллером. А редактировать приходится много и часто. Особенно мучительными бывают моменты изменения блоков, присутствующих на всех или почти всех страницах. Например, header и footer. Конечно, в Tilda есть возможность установить дефолтные шапку и подвал для сайта, но это применимо только если поддерживается один язык. В случае работы сайта сразу на пяти языках выбор одного хедера по умолчанию не подойдёт. Если в мобильном приложении, собранном на FlutterFlow, достаточно сделать только один экран и просто прописать в нём переменные для разных языков, то в Tilda один язык = один экран.

2.Отсутствие тематических блоков/виджетов

Ещё одна проблема, вытекающая из предыдущей. При большом количестве экранов/страниц мы получаем частое повторение одних и тех же блоков, например, списка преподавателей. Меняя любую мелочь в одном списке, неминуемо приходится прокликивать все страницы с таким же списком и повторять эти изменения. В том же FlutterFlow всё решается с помощью тематических виджетов. Создал один раз, добавил на десяток экранов, затем просто редактируй оригинал, а копии подстроятся. Великолепный ускоритель работы. Но за ним не к Tilda.

3.Ограниченный выбор блоков

Доступный набор можно назвать достаточным для большинства задач, но вариативность блоков в каждой категории небольшая. Список иногда пополняется, но всё же очень редко и очень малыми порциями. Tilda идёт по пути небольшой кастомизации блоков самим пользователем, поэтому список разных настроек и «крутилок» сильно ограничен и варьируется от блока к блоку. Тут точно встаёт выбор: либо дать юзерам возможность настраивать всё что можно, либо закидать их готовыми блоками с малой вариативностью, но большим количеством альтернатив. Это, конечно, самый слабый стейк, ибо в большинстве сценариев удаётся обойтись имеющимися средствами. А там, где не удаётся, помогают сторонние виджеты.

Что в итоге получилось?

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

Все эти функции реализованы на Tilda с добавлением нескольких сторонних виджетов через HTML и с помощью платформ по автоматизации, о которых мы тоже поговорим в будущем.

Что дальше?

Сейчас сайт продолжает меняться и расширяться. В будущих версиях он получит автоматическую рассылку новостей, акций и промокодов. Для этого всё уже готово, не хватает только времени. Также планируется автоматизировать обработку любых заявок, передав их полностью с секретарей на ИИ-ассистента. Он тоже уже готов и работает над частью задач. Кроме того, инфа на сайте легла в основу векторной базы данных для него. Многое пришлось переписать и реструктурировать, но теперь всё по полочкам. Есть идея переводить онлайн-студентов на собственную учебную платформу, которая могла бы быть интегрирована в сайт. Но это уже будет FlutterFlow под личиной Tilda. В общем, мелкие изменения прилетают каждый день, а поскольку сайт — это лицо компании с самой исчерпывающей и актуальной информацией, то откладывать их в долгий ящик нельзя. Да, иногда это тормозит разработку в других направлениях, но что поделать.

Вроде ничего не забыл. В следующей статье я расскажу про разработку мобильного приложения и о его неожиданном успехе в Индии.

Продолжение через неделю.