Если мы вам нравимся, подпишитесь на нашу телегу, там мы делимся полезными штуками
и говорим о работе

SVOEMEDIA.SPACE

Шаблоны для Тильды

Если мы вам нравимся, подпишитесь на нашу телегу, там мы делимся полезными штуками
и говорим о работе

⚡️⚡️⚡️ EARLY BIRDS КУРС ⚡️⚡️⚡️ «КАК СОСТАВИТЬ РАБОТАЮЩИЙ КОНТЕНТ-ПЛАН»

Подробнее

ИП КОЛТАШОВА АЛЕКСАНДРА ВАДИМОВНА

Свидетельство о гос. регистрации: 54 № 5 150 134
ИНН: 540 618 483 335
ОГРНИП: 316 547 600 156 201
Дата постановки на учет: 25 августа 2016
Р/с: 4080 2810 5045 0000 0701
БИК: 44 525 999
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
К/с: 3010 1810 8452 5000 0999

ООО СВОЕМЕДИА

ИНН: 5405047736
КПП: 540501001
ОГРН: 1195476069887
Р/с: №40702810004500006839
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
БИК: 044525999
К/с: 30101810845250000999

Этот сайт использует куки. Без них никак. Подробнее…

ок

Как проверить верстку и адаптив на Тильде в Zero-блоках?

Нас спрашивают: Как проверить верстку и адаптив на странице, на которой в основном Zero, а не стандартные блоки?

Александра Колташова, стратег SVOEMEDIA
@alexandra_molodec

Ответ получен 4 ноября 2019

Кажется, вы все сделали правильно, но смотрите на сайт — и что-то в нем не то. Забивать на это ощущение не стоит: скорее всего, ваши потенциальные клиенты тоже с ним столкнутся, а зачем их нервировать лишний раз? Часто неряшливый дизайн можно запросто «вылечить», поправив отступы и соблюдая принципы придуманной для проекта дизайн-системы иерархии заголовков и текста. Рассказываем, как это сделать.

Мы будем очень рады, если вы процитируете наш материал, но обязательно укажите активную ссылку на него. Спасибо!

Шаг 1: Придумать систему и поправить все текстовые объекты на странице

Шаг 2: Проверить зону видимости в адаптиве и привязку к окну

Шаг 3: Поправить отступы

Шаг 4: Проверить глазами

Шаг 1: Придумать систему и поправить все текстовые объекты на странице

Вообще-то, с этого нужно было начинать разработку. Но часто бывает, что в творческом порыве этот момент забывается. Самое время поправить, пока страница не выпущена.

Каждый текстовый элемент на странице должен «работать» в одной системе. На примере в стиле указаны: название шрифта, начертание, кегль, цвет.

Составьте таблицу (любым удобным вам способом), чтобы зафиксировать стили заголовков. Это может выглядеть вот так страшно:

↑ В таблице указаны только кегль, начертание и цвет. В вашей системе это описание может быть расширено при необходимости, а также может не быть некоторых стилей (например, у нас только Заголовок, Раздел и основной текст), в этом случае — пропустите ненужные стили.

Самому себе удобно составить вот такую памятку: вы видите как меняются заголовки и текст в зависимости от разрешения (48-42-42-26-26 — H1, 36-30-30-22-22 — H2 и так далее). Быстро переключаясь между экранами, меняем кегль.

Шаг 2: Проверить зону видимости в адаптиве и привязку к окну

На десктопном разрешении объекты с привязкой к Grid должны находиться в зоне видимости для маленьких маков (красная линия)

На смартфонах не стоит объекты двигать за выделенную красную линию (это зона видимости Айфона SE)

На смартфонах также хорошо бы привязать все объекты по левому краю к Окну (Window) с отступом в 20px. В этом случае не будет виден стык между стандартными блоками и зеро

Шаг 3: Поправить отступы

Отступы между равнозначными по смыслу блоками должны быть одинаковыми. Разные интервалы выглядят неаккуратно, может сложиться впечатление, что информация относится к предыдущему блоку. Блоки не должны «прилипать» друг к другу.

Необходимо соблюдать иерархию интервалов так же, как вы соблюдали иерархию стилей текста.

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

Когда вы настраиваете интервалы таким образом (либо увеличивая отступы внутри самого зеро, либо задавая отступы в Настройках блока) — ничего хорошего не выйдет.

Необходимо унифицировать отступы между смысловыми блоками на всех устройствах.

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

Добавьте Дополнительный отступ между блоками и от Заголовка до кнопки (блок DV05): в нашем случае это 2 line между кнопкой и заголовком и 1 line между заголовком и описанием

Посмотрите, как распределены отступы на примере

Отступ для мобильных устройств

Отступ для десктопа и планшета

Отступ от заголовка до изображения — одинаковый для всех разрешений

Настройки диапазона видимости блока можно изменить в Настройках блока

↑ Для отступов можно составить такую же таблицу, как для текста.

Итак, что делать. Если вы не предусмотрели это на этапе верстки, разделите блоки на разные части (отделите заголовок). Уберите отступы внутри зеро и отступы, заданные в Настройках блока. Добавьте Дополнительные отступы, проверяя их на разных разрешениях. Если это необходимо, введите разные типы отступов для разных разрешений.

Соблюдайте иерархию отступов точно так же, как и иерархию стилей текста.

«Частные ошибки дизайна веб-страницы» в блоге Тильды

Шаг 4: Проверить глазами

После того как вся математика соблюдена, проверьте, как выглядит сайт на устройстве. Пройдитесь по каждому элементу и спросите себя: гармонично ли все выглядит? Ничего не упустили?

Для просмотра мобильной версии рекомендуем пользоваться функцией «просмотр кода» в браузере Google Chrome (клик правой кнопкой мыши → Посмотреть код → выберите нужное разрешение).