Тип сайта
Дата
Ссылка
Лендинг
Октябрь 2021
Цель: Создание анимированного веб-сайта HTML5 для настольных компьютеров и отдельного легкого веб-сайта для мобильных устройств.
КРАТКАЯ ИНФОРМАЦИЯ ОТ КЛИЕНТА
Клиент хотел создать творческий веб-проект, не полагаясь на извечную банальную идею «анимации параллакса на основе прокрутки». Взаимодействие с веб-сайтом должно быть уникальным и интерактивным.
КРАТКАЯ ИНФОРМАЦИЯ ОТ КЛИЕНТА
Клиент хотел создать творческий веб-проект, не полагаясь на извечную банальную идею «анимации параллакса на основе прокрутки». Взаимодействие с веб-сайтом должно быть уникальным и интерактивным.
ОСОБЕННОСТИ
О состоянии веб-сайта можно поделиться с помощью динамических ссылок. Например, по этой ссылке можно напрямую открыть страницу наград и галерею "игровых вещей"
Настройки включения / выключения звука хранятся в локальном хранилище. Это обеспечивает лучший пользовательский опыт для постоянных пользователей, которые ранее отключили звук на веб-сайте. Пользователь портативного устройства получает настраиваемую клавиатуру для электронной почты, которая упрощает ввод идентификатора электронной почты.
Поскольку веб-сайт в значительной степени полагается на JavaScript, было добавлено предупреждение для пользователей, у которых отключен JavaScript. Это было сделано с помощью простой техники добавления тегов <noscript>.
ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ
Все изображения были сжаты с использованием tinyPNG и ImageOptim для достижения наилучших возможных результатов без ущерба для качества изображения.
Мы отключили Parallax в пользу производительности для мобильных устройств. Мы поняли, что наличие параллакса означает более низкую производительность прокрутки и более высокие размеры страниц, вызванные загрузкой нескольких изображений в виде слоев параллакса. Код гарантирует, что изображения рабочего стола не загружаются на мобильный телефон и наоборот.
Я убедился, что серверная команда настроила «заголовки с истекающим сроком действия» и включила g-zip для повышения производительности.
Общедоступные URL
Фронтенд UX
Предупреждение об отсутствии JS
Производительность изображения
Уменьшение количества HTTP-запросов на настольном веб-сайте
Настройка Expires Header и g-zipping Content
