Ещё 10 лет назад оформление сайтов было другим – интерактивным, анимированным и зрелищным (с технологией контроля потоковой загрузки анимации). Это время, когда Flash + Action Script были королями WOW-эффекта. Почти для каждого моего проекта по созданию сайта я разрабатывал анимированную презентацию (как часть оформления главной страницы). С контролем режимов загрузки, но полной индексацией контента страницы под задачи SEO.
Разработанное мной решение – модернизированный фреймворк (на основе стандартизированного от Adobe), служивший мне более 10 лет, позволял адаптивно сочетать сразу две технологии анимации в дизайне одной страницы. Его назначение – автоматически адаптировать вариант анимации в дизайне сайта под наличие или отсутствие плагина Adobe Flash в браузере пользователя. При наличии плагина – пользователю показывалась Flash анимация со сложным сценарием. А при отсутствии плагина – пользователь видел "упрощённую" HTML5 анимацию с JS или CSS. Сайт сам автоматически выбирал вариант кода страницы, подстраиваясь под браузер посетителя.
Этот праздник технологий продлился до 2018 года, пока Google Chrome не прекратил постоянно существующую в браузерах поддержку Flash плагина на уровне движка Сhromium. (Почему? Тут есть аналитика). Моя технология сборки сайтов с двумя версиями адаптивной анимации потеряла смысл – в большинстве браузеров работала только версия дизайна с CSS анимацией.
Технологическая схема адаптивной анимации
Пример презентационной Flash анимации:
Кадры CSS анимации в мобильной версии сайта, которая так же отличалась от двух видов анимации под десктопные браузеры:
С появлением обязательного тестирования Core Web Vitals 2021 (при индексации сайта), скорость загрузки страницы стала очень важным параметром для продвижения сайта в поисковых системах. Существует ошибочное мнение, что главное для увеличения скорости и успешного прохождения тестов – это сократить графику на странице. И графическая анимация на сайте не нужна из-за SEO (разговоры про «минимализм»). Но вот наглядный пример того, что даже с графической CSS анимацией правильно собранный сайт великолепно проходит тесты на скорость загрузки!
Разработка логотипа для проекта:
После полной отмены поддержки Flash анимации в браузерах в 2018, технология двойной адаптивной анимации потеряла актуальность. И мне пришлось внедрять уже четвёртую версию анимации для дизайна главной страницы сайта. Новая версия основана только на использовании CSS3, адаптивна под мобильные устройства и позволяет достигать 100% в тестировании Pagespeed Insights (под современные стандарты индексации Core Web Vitals 2021).
Пример современной версии CSS3 анимации:
Работы по проекту: разработка и комплексная поддержка сайта (с 2000 по 2023): анализ спроса и конкуренции, контент менеджмент, регулярный редизайн, смена технологий анимации и вёрстки, SEO, работа с поисковыми сервисами, индивидуальные графические материалы для сайта, контроль индексации сайта, техническая поддержка, настройка хостинга, политика аккаунтов.
Исполнитель:
👉 finest.ru ( весь объём работ - один full stack developer );
