Технологии сайтов

С 1999 года, в процессе разработок сайтов и руководства студией, мной постоянно проводился анализ технологий, потенциала их возможностей или устаревания (смены технологий). Вывод из многолетнего анализа проведённых проектов: все технологии разработки эффективного сайта для бизнеса должны с самого начала проекта формироваться под основную задачу – привлечение целевой аудитории (выход на постоянный спрос, достижение лидирующих позиций в конкурентном спросе). А основа целевого спроса в интернете – это поисковые системы и сервисы. Но именно поисковые системы формируют самые строгие и самые разнообразные требования к технологиям сайтов, которые претендуют на лидерство в спросе.

Современная ситуация и ключевые требования к сайтам
Рекомендуемая технология - дизайн сайта с CSS анимацией
Технологии поддержки сайтов и развития web проектов
Лучшая технология оформления сайтов, которая уже не актуальна
Преимущества моей адаптивной технологии анимации (2007-2019)

Современная ситуация и ключевые требования к сайтам

Google делает одним из основных факторов оценки качества сайтов Core Web Vitals 2021. Современное требование к технологиям сайтов – это скорость загрузки, скорость возможности взаимодействия, скорость появления стабильного отображения, мобильная адаптивность и безопасность. Сайты должны максимально эффективно проходить тесты PageSpeed Insights (ближе к 100%). К тому же, экосистема Google (поиска, статистики, сервисов, браузеров и устройств) оценивает поведенческие факторы аудитории сайта.

У Яндекса YATI (Yet Another Transformer with Improvements) – новый алгоритм ранжирования, уделяющий внимание разнообразию поискового (человеческого) спроса и факторам поведения пользователей на сайте (их вовлечённости). При этом, Яндекс формирует такие же высокие требования к скорости загрузки сайтов (даже рекомендует создавать "облегчённые" версии страниц).

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

Технологии поддержки сайтов и развития web проектов

Главный вывод 2021 года: выход нового сайта в лидирующие позиции конкурентного спроса – это сейчас сложная задача. Её нельзя реализовать без комплексного подхода к технологической платформе сайта и его специальной информационной политики. Важен качественный оптимизированный контент, постоянная работа с инструментами индексации поисковых систем, работа с различными сервисами, SSL, настройка технических файлов. Необходима постоянная информационная политика сайта, работа с соцсетями, работа с эксклюзивностью текста и изображений, фотосъёмка, техподдержка с настройкой сервера хостинга, резервное копирование, и многое другое (проведение рекламных компаний, почта, профили, аккаунты, платежи, домены и хостинг, CRM). Отдавать это в руки неквалифицированных специалистов – быстро загубить проект (накопить ошибок, потерять индексацию, попасть под алгоритмы фильтров) или потерять время.

Современные технологии выхода на конкурентный спрос настолько сложны, что требуют специалистов и понимания взаимозависимых процессов. В противном случае – вы уходите бороться за клиента только ценой и бюджетом рекламы (воронка конкуренции).

Раньше, сайт передавался с программной платформой CMS (системой управления контентом сайта) для возможности управления информацией и поддержки сайта силами персонала компании или контент-менеджерами. Но сейчас – взаимосвязь, сложность и разнообразие технологий и сервисов требует только профессиональной комплекной поддержки и продвижения сайта (в любом конкурентном коммерческом спросе), что исключает некомпетентные "эксперименты".

Есть ещё одна технологическая проблема почти всех современных CMS систем (программные платформы). Они плохо проходят тесты скорости PageSpeed Insights – сайты на таких платформах не могут войти в "зелёную зону" 90%. Это относится и к бесплатным, и к платными CMS. А у "online конструкторов" со скоростью загрузки страниц ещё хуже. Возможно, именно эта ситуация с постоянным понижением скорости работы сайтов на популярных платформах и привела к внедрению требований Google Core Web Vitals 2021.

У меня есть опыт адаптивной оптимизации создаваемых сайтов на платформах WordPress и ocStore (OpenCart) до 98% (с графикой), но это подразумевает полную ручную переделку архитектуры шаблонов. Но всё равно не даст максимальной скорости для всех страниц сайта.

К тому же, в большинстве CMS, инструменты SEO оптимизации и настройки сервера примитивны и имеют множество ограничений. И чем больше функциональности вы захотите подключить (применяя модули), тем медленнее будет работать ваш сайт. Даже с включением кэширования и сжатия на сервере и сокращением графических элементов в дизайне страниц. Все равно JS библиотеки и отдельные файлы JS, сотни килобайт Bootstrap CSS кода шаблонов, библиотеки символьных шрифтов и др. заполнят первые сессии загрузки страниц (+ обращения к БД) и не позволят быстро проходить современные тесты скорости. А разработчикам приходится «экономить» на дизайне сайтов, сокращая графическую часть. Такова архитектура многих сайтов и она массовая!

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

Технологии сайтов и CSS анимация в дизайне

Лучшая технология оформления сайтов, которая уже не актуальна

К сожалению, в 2019 году мне пришлось отказаться от самой эффективной технологии оформления – адаптивной связки Flash + HTML5 анимации в пользу только CSS анимации. Google прекратил поддержку плагина Adobe Flash в ядре Сhromium для браузера Chrome и других браузеров (см. историю Flash с примерами анимации). А я лишился одного из козырей в своём Full Stack арсенале, а мои клиенты огромных (проверенных временем) возможностей и преимуществ. Закончилась эпоха зрелищных интерактивных сайтов, без предоставления альтернативы для пользователей. Многие даже не могут поверить, что оформление сайтов ещё 10 лет назад было более зрелищным и более интерактивным, чем сейчас.

В те прекрасные времена на сайтах царствовал Flash. Сайты мировых брендов соревновались в интерактивном дизайне своих роликов Flash анимации. Но (со временем) мне пришлось усовершенствовать технологию адаптивности вариантов анимации и собрать свой фреймворк для автоматического определения наличия Flash-плагина в браузере и запуска нужной версии анимации в ходе загрузки одной страницы (без редиректа!).

Представьте сборку: один сайт, а мне на "фронт" нужно разработать и собрать ДВЕ анимации — Flash + CSS анимация. И создать два технологичных сценария:

для Falsh — своя библиотека максимально адаптированных объектов + Action Script + сценарий контроля режимов загрузки (loop-циклы, чтобы убрать долгую пред-загрузку.
для CSS анимации — это сборка изображений и вёрстка DIV с текстами и графикой для кадров, и отладка сценария свойств CSS анимации. Но версия на Flash была ВСЕГДА легче, качественнее, а сценарий сложнее. Плюс возможность загрузки других файлов анимации в контейнер сцены (переходы из ролика в ролик).

Разработанное мной решение – модернизированный фреймворк (на основе стандартизированного от Adobe), служивший мне более 10 лет, который позволял адаптивно сочетать сразу два вида анимации в дизайне одной страницы. Его назначение – это автоматическая адаптировать дизайн сайта (выбор варианта анимации в дизайне) под наличие или отсутствие плагина Adobe Flash в браузере пользователя. При наличии плагина – пользователю показывалась Flash анимация со сложным сценарием. А при отсутствии плагина – пользователь видел "упрощённую" HTML5 анимацию с JS или CSS анимацию. Сайт сам автоматически выбирал вариант кода страницы, подстраиваясь под браузер посетителя.

Flash анимация имела контролируемую по времени и объёму потоковую загрузку, что позволяло показывать целое интерактивное "кино" из анимации с фоновой отложенной загрузкой, которую посетитель даже не замечал – правильный сценарий анимации не влиял на скорость построения HTML элементов страницы и не влиял на время загрузки страницы (критичное для SEO оптимизации). Такая технология изначально рассчитывалась мной для проектов, которые будут оптимизированы под эффективное продвижение в поисковых системах (SEO). Анимация "в первом экране" позволяла получать высокие значения вовлечённости посетителей и их поведенческих факторов (больше время просмотров, больше переходов по сайту, минимум отказов).

Этот праздник технологий продлился до конца 2017 года, пока Google Chrome не прекратил постоянно существующую в браузерах поддержку Flash на уровне движка Сhromium (а свой YouTube они уже перевели на HTML5). Сборка сайтов с двумя версиями анимации потеряла смысл – работала только CSS анимация. В 2019 поддержку плагина прекратил Adobe.

В настоящее время, вы можете увидеть Flash версии анимации в оформлении моих проектов (до 2019 года) только при наличии Flash-плагина в браузере (без плагина будет HTML5+CSS анимация). Сейчас самый удобный способ просмотра Flash анимации на сайтах в интернете – это эмуляторы "Flash Player Enabler" или "Ruffle", которые можно установить в виде приложений к вашему браузеру в интернет-магазине Chrome.

При наличии плагина Flash анимация будет отражаться в дизайне страниц автоматически (Как включить Flash в браузере). Возможно, в моём портфолио осталась последняя возможность посмотреть на то, каким технологичным было оформление сайтов ещё 10 лет назад (пример, пример, ещё пример).

Моя технология адаптивной анимации в дизайне сайта (2007-2019)

Основана на корректном (соответствующем всем стандартам) микро фреймворке Adobe, для интеграции Flash объекта в тело HTML документа (object classid), который я модернизировал и адаптировал для возможности подстраиваться под конфигурации браузеров (с плагином или без него). С показом альтернативной анимации (вместо анимации из файла .swf) вместо кода альтернативного контента. Он заменялся индексируемым кодом альтернативной HTML5 (HTML+CSS) анимации, с использованием файла JavaScript или "чистой" CSS-анимации.

Технологии сайтов

Преимущества, которые были у моей адаптивной технологии оформления с Flash (сейчас устаревшей)

"Вау-эффект" для посетителей c Flash плагином в браузере. И явное преимущество в зрелищности и презентационных возможностях в версии для пользователей с flash. Явный выигрыш в сравнении с сайтами конкурентов без анимации, и явное информационное преимущество в первом экране.

Не нужно бояться отсутствия поддержки "устаревших" технологий — дизайн автоматически адаптируется под возможности браузера и платформу посетителей сайта, предоставив HTML5 версию дизайна для той части аудитории, у которой нет (отключён) flash плагина в браузере.

Страницы с моей версткой прекрасно индексировались поисковыми системами! Фреймворк создавался под продвижение сайтов. Так как Flash презентация является только отдельным элементом (объектом) в составе страницы, а сама страница (структура, тексты, ссылки, навигация, меню, файлы фона) всё это — обычный прекрасно индексируемый HTML. Объект Flash был полностью корректно интегрирован с соблюдением стандартов и спецификаций, требуемых поисковыми системами.

Нет проблем с безопасностью для вашего сайта — анимация это обычный файл .swf. И разумеется, нет проблем с безопасностью для посетителей — ролик собран корректно, без обращения к фреймам, без загрузки JavaScript, и даже на версии АctionScript 2.0 (без поддержки спорной функциональности 3.0). Большинство статей про "опасный" Flash уже тогда устарели на 10 лет.

Нет загрузки процессора или памяти на устройствах посетителей! Сборка на АctionScript 2.0 (без ошибок и без тяжёлой функциональности), линейная анимация и ограничения в количестве векторных объектов исключает необходимость производительных затрат на анимацию. Миф о требовательной производительности устарел на 10 лет! Он был актуален для старых устройств (для старых плагинов) и для работы с потоковым видео большого разрешения. Он не касается обычной линейной анимации (особенно с оптимизацией объектов) и тем более не актуален для современных мощных устройств.

При отсутствии поддержки в устройствах (например - iPhone) автоматически показывается версия страницы на HTML5 с поддержкой всех современных технологий фреймворков и библиотек.

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

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

Отличное сочетание с поисковыми алгоритмами учёта поведенческого фактора в ранжировании сайта и учёта ими "отказов" посетителей (быстрый уход со страницы). Сайт с красивой информационной анимацией (презентацией) в "первом экране" задерживает внимание посетителя на определённое время (хороший сценарий интересен). А значит — меньше процент "отказов" и дольше время честного просмотра страницы! И результат — выше лояльность к сайту посетителей и поисковых систем (алгоритмов поведенческого фактора).

Использование адаптивных элементов оформления сайта в виде отдельных объектов, позволяет интегрировать его в любые системы управления сайтом (CMS).

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

Технологии сайтов

Современная ситуация и ключевые требования к сайтам

Рекомендуемая технология - дизайн сайта с CSS анимацией

Технологии поддержки сайтов и развития web проектов

Лучшая технология оформления сайтов, которая уже не актуальна

Преимущества, которые были у моей адаптивной технологии оформления с Flash (сейчас устаревшей)