Нюансы адаптации сайта на Тильде под мобильные устройства

«Сайты на Тильде долго загружаются с телефона», «Сложно вносить изменения, потому что всё съезжает, как текст из-за картинки в ворде», «На десктопе всё круто, а в мобильной версии анимации не будет» — вокруг Тильды ходит много мифов, и некоторые из них касаются адаптирования сайтов. Разбираемся с ними в статье.

Привет, на связи Молния. Мы разрабатываем сайты на Тильде более 5 лет, и за это время чётко убедились, что чем удобнее и понятнее сайт, тем больший результат он приносит. И один из важных параметров, который влияет на комфорт пользователей — это адаптирование сайта под мобильные устройства.

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

Чем понятнее и удобнее пользователю на сайте, тем больше времени он на нём проводит. Это напрямую влияет на конверсию, ведь если он доходит до целевого действия без помех и отвлекающих моментов, тем больше вероятность, что он оставит заявку или купит продукт.

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

Также адаптив помогает продвижению сайта в поисковых системах. Они учитывают оптимизацию сайта под мобильные устройства и дают более высокое место в поисковой выдаче.

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

Так как Тильда — это конструктор, в ней удобно настроено адаптирование как для стандартных, так и для Zero-блоков.

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

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

Каждый блок страницы и, соответственно, каждый элемент в нём подгоняется под: горизонтальный/вертикальный планшет и горизонтальную/вертикальную мобильную версию. А также с недавнего времени появилась возможность удалять какой-либо из форматов. Для чего это нужно? Если горизонтально взять телефон с большим экраном, то может подтянуться не горизонтальная мобильная версия, а вертикальная планшетная. Сейчас же можно одну из этих версий удалить, например, горизонтальную мобильную версию, если с неё не будут смотреть. Также можно добавлять брейкпоинты — точки, проходя которые, дизайн адаптируется под разные экраны. Так можно сделать формат отображения сайта больше без потери качества и появления широких отступов по краям экрана.

Также важно перед началом разработки сайта понять, откуда будет идти на него основной трафик. Это поможет определиться, какой формат разработки выбрать: стандартный или Mobile First.

В любом случае при разработке сайта дизайн прорабатывается и для десктопной версии, и для мобильной. Разница лишь в последовательности этапов.

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

В дизайне Mobile First разрабатывается дизайн сразу и для мобильной версии, и для ПК. Если ваша ЦА чаще всего заходит на сайт с телефона, то вся основная информация должна быть размещена на экранов телефонов и планшетов в полном формате, без упрощений. И дизайн будет практически идентичен с десктопной о версией.

Об этом формате стоит задуматься, если вы занимаетесь:

Например, один из наших Mobile First-проектов — Canada Dream. Это сервис, который помогает людям осуществить мечту о работе или учёбе в другой стране. И когда пользователи гуглят информацию о том, что нужно для переезда и какие есть варианты, им важно быстро получить понятные ответы на свои вопросы. Поэтому для Canada Dream мы продумали минималистичную дизайн-концепцию мобильной версии, благодаря чему сайт загружается быстро и концентрирует внимание пользователя на информации. А на десктопной версии сайта добавили лёгкую анимацию по скроллу, которая вовлекает человека листать сайт и дойти до целевого действия — заполнение анкеты.

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

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

Для блока с формой захвата на десктопной версии мы добавили крупную типографику и горизонтальный скролл. Это хорошо цепляет внимание пользователя, так как он не может пролистать дальше, пока не просмотрит всю анимацию.

Но в мобильной версии оставлять горизонтальный скролл было нельзя, так как это непривычное для пользователя действие: обычное движение при просмотре сайта с телефона — это листание вверх-вниз. Нашей задачей было сделать так, чтобы навигация была простая и интуитивно понятная. Поэтому в мобильной версии мы убрали горизонтальный скролл и оставили крупный статичный заголовок. Но при этом оставили часть анимации по скроллу: движущиеся плашки, ДНК breaking trends и всплывающие заголовки, чтобы сохранить креативную концепцию дизайна.

На скорость загрузки сайта не всегда влияет сама анимация. На простом примере: есть пасьянс, который открывается на любом компьютере и на любой операционке, а есть Хогвартс — для него нужен компьютер минимум последних нескольких лет выпуска. Чем навороченнее сайт, тем сложнее он будет открываться на старых гаджетах. Поэтому мы зачастую отказываемся от анимации в пользу удобства пользователя. Она может забрать скорость / повлиять на загрузку страницы или отдельных элементов. Это будет раздражать, и у клиентов сложится негативное восприятие от пользования сайтом.

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

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

Самостоятельно вносить изменения в сайт с адаптивной версией несложно. Главное — не забывать, что если вносишь изменения в ПК, их нужно добавлять и в адаптивной версии.

Чтобы клиентам было проще самим вносить небольшие изменения на сайте, мы просим перед началом разработки дизайна прописать список блоков, в которых будет редактироваться контент, и делаем их стандартными. А также рассказываем, как в дальнейшем проверять, корректно ли всё подгрузилось.

Но если мы делаем блок, в который нужно вносить изменения, уникальным, то для него записываем видео-инструкцию со всеми просчётами о том, как вносить правки и проверять их. Она остаётся в чате, и к ней можно обратиться в любой момент.

Также для тех, у кого может быть большой объём изменений или кому страшно нажать куда-то не туда и всё сломать, мы продумали вариант техподдержки, в формате которой всё вносит дизайнер. После разработки у вас остаётся чат с командой: менеджерами по продажам и проекту, куда вы можете в любой момент прислать список того, что нужно поправить на сайте. Мы обсудим эту задачу, рассчитаем, сколько времени на это потребуется, и всё внесём.

Тильда — интуитивно понятный конструктор. И чтобы, например, скорректировать на лендинге цену на тарифы или услуги, не нужно тратить время на то, чтобы обращаться к кому-то на аутсорсе и ждать результат. Заказчик может либо сам, либо по готовой инструкции, вносить изменения, которые ему нужны.

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

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

Как вы считаете, что самое важное при адаптировании сайтов под разные устройства? Делитесь своим мнением в комментариях к статье.

Внутренними процессами и полезными лайфхаками для бизнеса мы делимся в нашем телеграм-канале. Подписывайтесь, чтобы оставаться с нами на связи!