Расскажем о том, как мы отказались от Тильды и ускорили процесс верстки нового сайта с помощью плагина Anima для Sketch.
Тильда.
Тильда — это конструктор сайтов с готовыми красивыми блоками. При необходимости, блоки можно изменять или создавать полностью с нуля.
Мы работаем с Тильдой и многие заказчики просят сделать сайт именно на этой платформе.
Когда пришло время обновлять свой сайт furnas.ru, мы решили использовать Тильду в пользу сокращения времени на вёрстку (до этого он был вручную сверстан и сделан на React js).
Мы создали аккаунт, создали сайт и погнали. Всё шло хорошо, пока дело не дошло до формы обратной связи.
В Тильде нет возможности изменять шаблон формы, а мы отрисовали свой дизайн формы. Сначала это показалась странным, но мы не нашли, как это можно исправить внутри платформы. Также мы обнаружили еще один минус - максимальный размер картинок, которые можно загружать на сайт 1680px. Это означает, что большие картинки на ретина дисплеях, например, макбуков будут выглядеть немного размытыми.
Эти минусы нам показались существенными и мы задумались о том, как можно быстро исправить эту проблему. В Тильде на бизнес-плане есть возможность выгрузить код и разместить его на собственном сервере. Мы задумались над этой опцией: можно было бы выгрузить код, подменить картинки на свои и кое-где поправить верстку. Эти манипуляции не сильно бы увеличили сроки разработки сайта. Мы уже оплатили бизнес-план на месяц, выгрузили сайт и тут решили почитать их пользовательское соглашение по выгрузке кода и вот, что мы там нашли.
Тут мы поняли, что нам не столько нужен конструктор сайта, сколько мы просто хотим ускорить процесс верстки. Мы задумались: «Не одна же Тильда умеет трансформироватьдизайн сразу в верстку?» и пошли искать какую-нибудь альтернативу.
Sketch + плагин Anima.
Нам попался плагин Anima для Sketch. Данный плагин преобразует артборды сразу в html-код.
Всё было бы хорошо, но всё так просто не происходит :)
С самого начала плагин Anima отказывался работать. Мы быстро его установили, но он не создавал нужные файлы. Только после обновления MacOS до системы Mojave и обновления Sketch минимум до версии 51.3 Anima заработал.
На удивление всё заработало прям хорошо. Нужно было только отрисовать все варианты экранов (десктопы, планшеты, мобилки) и настроить переходы между данными экранами. Anima позволяет создавать ссылки, кнопки, поля ввода и можно настроить куда всё будет отправляться.
Для примера наш сайт furnas.ru весь сделан с помощью Anima.
Выводы.
Плюсы Тильды:
- Самый большой и жирный плюс, что если ты вообще не умеешь дизайнить или верстать,но у тебя есть вкус — реально сделать хороший сайт на Тильде. Если нет вкуса — сорян.
Минусы Тильды:
- Форма ввода — это блок с полями ввода и кнопкой. Блок статичный, либо горизонтальный, либо вертикальный. Я не могу разобрать его по частям и расположить как мне вздумается.
- Любые изображения не больше 1680 px. Это очень большой минус, потому что на экране Retina картинки будут в плохом качестве.
- Тильда не отображает расстояние между объектами. Я перевожу блок в ручную настройку (Zero Block) и не могу каждый экран выровнять в точных пропорциях. Всё делается на глазок.
Плюсы плагина Anima:
- Адаптивная вёрстка под все размеры экранов. Просто рисуешь все экраны (десктоп, планшет, мобилка) и связываешь между собой с помощью плагина.
- Размер экранов указываешь сам. Просматриваешь html-код в браузере и находишь на какой ширине ломается верстка. Открываешь sketch, создаешь новый артборд нужного размера и отрисовываешь экран. Или настраиваешь ширину элементов, которые ломаются.
- Настройка объектов. С элементами дизайна можно сделать всё что угодно. Растягиваться по всей ширине, или сохранять размер, не смотря на ширину экрана. Выравнивание блока по правому краю, или по левому. Всё это можно указать с помощью плагина.
- Скорость работы. Плагин позволяет делать превью в браузере в процессе работы, что удобно для поиска ошибок.
Минусы плагина Anima:
- Обучение. Много времени потратили, чтобы понять что и где настраивается. Но когда понимаешь, настраиваешь быстро.
- Редактирование. Если вёрстку уже загрузили на сайт, редактировать текст/объект тяжело.