Тонкости адаптивной верстки на Тильде: мастер-класс

• Приветствие участников и проверка связи.  

• Объявление темы вебинара: адаптивная верстка на Tilda.  

• Обсуждение особенностей верстки в стандартных блоках и мобильных версиях.  

• Вебинар предназначен для тех, кто уже знаком с Tilda.  

• Приглашение на вебинар "Начало работы на Tilda" 10 марта.  

• Возможность пересмотреть текущий вебинар в записи.  

• Призыв к быстрому переходу к контенту.  

• Представление ведущего: Максим Ширко, создатель комьюнити Tilda.  

• Начало обсуждения стандартных блоков и сетки в Tilda.  

• Обсуждение сетки из 12 колонок в Tilda.  

• Важность понимания колонок для аккуратной верстки.  

• Примеры блоков с различными настройками ширины и отступов.  

• Ошибки в выравнивании блоков из-за отсутствия понимания колонок.  

• Примеры сайтов с неровным выравниванием.  

• Важность правильного выравнивания блоков для аккуратного вида сайта.  

• Объяснение, как включить сетку в Tilda.  

• Пример выравнивания блоков по сетке.  

• Важность правильного выравнивания для предотвращения ошибок.  

• Обсуждение высоты блоков в Tilda.  

• Ошибки начинающих в верстке высоты блоков.  

• Пример блока "обложка" и его настройки высоты.  

• Первый экран сайта должен содержать важную информацию, как обложка журнала.  

• Важно, чтобы контент помещался в фиксированный размер, независимо от размера экрана.  

• Обложки и другие блоки могут использоваться для этого, но важно правильно настроить их высоту.  

• Параметр "высота 100vh" позволяет сайту поджиматься под 100% высоты, независимо от размера экрана.  

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

• Настройка высоты блоков должна быть правильной для корректного отображения контента.  

• Не рекомендуется использовать высоту 100% для всех блоков, кроме первого экрана.  

• Это может привести к проблемам с отображением на экранах с разной высотой.  

• Для всех блоков, кроме первого, лучше использовать фиксированную высоту в пикселях.  

• Некоторые блоки, такие как карточки товаров, могут растягиваться на 100% ширины.  

• Это позволяет блокам адаптироваться под разные размеры экранов, независимо от устройства.  

• Важно учитывать дизайн и избегать контраста между фиксированными и растянутыми блоками.  

• Микс фиксированных и растянутых блоков может выглядеть странно.  

• Старайтесь минимизировать контраст между блоками на всю ширину экрана и блоками в сетке.  

• Не все блоки можно сделать на 100% ширины, и это имеет свои причины.  

• Текстовые блоки нельзя растянуть на 100% ширины.  

• Это сделано для улучшения читаемости на больших мониторах.  

• Дизайнеры Tilda учитывают визуальную составляющую сайтов.  

• Tilda ограничивает количество используемых шрифтов до двух.  

• Это помогает избежать неэстетичного вида сайта.  

• Ограничения продиктованы дизайном и эстетикой.  

• Разные блоки на сайте могут иметь разную ширину.  

• Визуальный контраст помогает сгладить различия.  

• Важно следить за аккуратностью и отсутствием разрывов.  

• Зероблок позволяет работать с сеткой и стандартными блоками.  

• Зероблок предоставляет полную свободу действий.  

• Важно следить за аккуратностью и избегать разрывов.  

• В мобильной версии нельзя менять шрифт и размер.  

• Зероблок позволяет создавать дизайн по своему усмотрению.  

• Важно следить за аккуратностью и избегать разрывов.  

• Зероблок не требует адаптивной верстки для мобильных устройств.  

• Отступы по бокам не критичны и не доставляют неудобств пользователям.  

• Важно не обращать внимания на надуманные проблемы.  

• В зероблоке есть два контейнера: грид-контейнер и виндо-контейнер.  

• Грид-контейнер подразумевает 12 фиксированных колонок.  

• Виндо-контейнер растягивает контент на 100% ширины экрана.  

• Рекомендуется располагать контент по колонкам.  

• Текст не должен попадать на отступы.  

• Важно правильно работать с сеткой и попадать в колонки.  

• Высота экрана часто вызывает ошибки.  

• В настройках артборда можно установить высоту зероблока в пикселях или процентах.  

• По умолчанию установлено 550 пикселей, что является безопасной высотой для большинства устройств.  

• Разные устройства имеют разные разрешения экрана.  

• Стандартное разрешение ноутбука 1366x768 пикселей.  

• Строка состояния Windows и браузера уменьшает доступную высоту экрана.  

• Не рекомендуется увеличивать высоту зероблока выше 550 пикселей.  

• На больших экранах зероблок должен растягиваться на 100% высоты.  

• Это позволяет избежать скролла на маленьких и больших экранах.  

• Ширина контентной части по умолчанию составляет 480 пикселей.  

• Клиенты могут менять размер браузера нестандартно, что влияет на адаптивную верстку.  

• В Tilda используются пороговые значения для адаптивной верстки.  

• Зероблоки используются для уникального расположения компонентов и анимации.  

• Tilda удобна для клиентов, которые могут создавать сайты самостоятельно.  

• Зероблоки применяются для сложных и уникальных дизайн-решений.  

• Ширина колонок должна быть фиксированной.  

• Пример: ширина зероблока 2000 пикселей.  

• Важно учитывать ширину колонок при создании сайта.  

• Добавление серых кругов по бокам сайта для визуального веса.  

• Круги создают фон, который не виден на маленьких экранах.  

• Это помогает избежать ощущения пустоты и фиксированности на больших экранах.  

• Элементы, которые не важны для маленьких экранов, можно обрезать.  

• Это позволяет контенту быть фокусом на маленьких экранах.  

• Важно не обрезать важные элементы, такие как фотографии или текст.  

• Как сделать так, чтобы элементы расширялись на всю ширину экрана.  

• Использование контейнера Grid для фиксированного размещения элементов.  

• Переключение на контейнер Windows для резиновой верстки.  

• Переключение контейнера с Grid на Windows для резиновой верстки.  

• Возможность выравнивания элементов по оси X и Y.  

• Пример использования контейнера Windows для фиксированного размещения элементов.  

• Проблемы с наездом элементов друг на друга на маленьких экранах.  

• Важность равномерного распределения элементов для предотвращения наезда.  

• Пример исправления наезда элементов для аккуратного размещения.  

• На больших экранах появляются большие отступы.  

• На маленьких экранах элементы могут наезжать друг на друга.  

• Проблемы часто возникают из-за неправильного сочетания элементов.  

• Используйте Zurb Foundation с осторожностью.  

• Будьте внимательны к верстке по Zurb Foundation.  

• Используйте резиновую верстку только при необходимости.  

• Многие сайты не используют Zurb Foundation.  

• Примеры сайтов с фиксированными элементами и анимацией.  

• Резиновая верстка может быть блестящей, но требует аккуратности.  

• Возможность указывать ширину элементов в процентах.  

• Это помогает избежать больших дыр, но усложняет управление.  

• Важно тестировать на разных экранах для точного предвидения.  

• Можно сочетать стандартные блоки с Zurb блоками.  

• Важно следить за выравниванием элементов в колонках.  

• Аккуратность в верстке улучшает восприятие сайта.  

• Google PageSpeed Insights измеряет скорость загрузки в попугаях.  

• Важно учитывать размер картинок и сложность анимации.  

• Скорость загрузки сайта зависит от множества факторов.  

• Обсуждение возможности вывода зероблока в слое под стандартным блоком.  

• Переход к теме мобильной верстки, которая требует отдельного вебинара.  

• Два варианта развития событий для стандартных блоков.  

• Пример с обложкой: настройка отображения блока только на десктопах.  

• Проблемы с отступами между блоками и их настройка для мобильных версий.  

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

• Преимущества точечной настройки отступов для аккуратного отображения блоков.  

• Зероблок позволяет управлять данными и верстать по своему усмотрению.  

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

• Пример изменения размера шрифта для разных версий.  

• Важность верстки для всех версий отображения.  

• Проблемы игнорирования промежуточных версий.  

• Рекомендация отключать винду контейнер для мобильных версий.  

• Различие между резиновой версткой для десктопов и фиксированной версткой для мобильных версий.  

• Пример использования грит-контейнера для мобильных версий.  

• Преимущества фиксированного отображения элементов на мобильных устройствах.  

• Обсуждение проблем с адаптацией и масштабированием в мобильной версии.  

• Проблемы с адаптацией под разные разрешения и устройства.  

• Рекомендации по использованию адаптивных версий и сериалов для работы.  

• Проблемы с отображением шрифтов на китайских устройствах и в браузере Instagram.  

• Рекомендации по использованию размеров шрифтов популярных сайтов для мобильной версии.  

• Проблемы с масштабированием шрифтов и их решение.  

• Важность создания разных дизайнов для мобильной и доступной версий.  

• Различия в восприятии сайтов на компьютере и телефоне.  

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

• Подведение итогов и анонс будущих вебинаров.  

• Рекомендации по посещению вебинаров по SEO и продающим текстам.  

• Анонс вебинара по исправлению ошибок на сайтах и приглашение к участию.  

• Ответы на вопросы о создании сайтов на Tilda и покупке видеокурсов.  

• Завершение вебинара и благодарность участникам.