Напишите нам:
cont-email.png info@redline.by
cont-mts.png+375 (33) 601-41-11

Лендинг онлайн-курса йоги

Лендинг курса по йоге

Посмотреть сайт: yogacurs.ru

Задача: создать одностраничный сайт с презентацией онлайн-курса по йоге на YouTube, максимально ускорить загрузку страницы и оптимизировать для дальнейшего SEO-продвижения.

Решение: для создания лендинга заказчик прислал подробное техническое задание с описанием структуры будущей страницы и предоставил все изображения в высоком разрешении и отличном качестве. По данному ТЗ программист сверстал страницу с минимальным дизайнерским оформлением в цветах логотипа.

Лендинг курса по йоге - минималистичный дизайн

Все иконки используются в формате SVG для масштабирования их на разных разрешениях экрана без потери качества и для уменьшения загружаемого пользователем трафика. Сравним для примера внешний вид и размеры одних и тех же иконок в PNG формате и SVG:

Лендинг курса по йоге - размеры файлов

Так выглядит одна и та же иконка в разных форматах на мониторе компьютера:

Лендинг курса по йоге - иконки на десктопе

Так они отображаются на экране смартфона с шириной экрана 1080px. В мобильной адаптации браузер отображает вёрстку шириной 360px, поэтому иконка в высоту 72px растягивается до 216px физических пикселей дисплея, что значительно ухудшает качество самой иконки, либо вынуждает использовать файл в 3 раза больше по ширине и высоте (что соответственно увеличит и размер файла):

Лендинг курса по йоге - иконки на смартфоне

Все фотографии были уменьшены до максимального используемого на странице разрешения и оптимизированы для web, что позволило уменьшить общий размер изображений в 50,7 раз (с 11,1 Мб до 223,9 Кб). Для всех изображений были прописаны теги alt и title, для страницы созданы meta-теги title и description.

Лендинг курса по йоге - размеры фотографий

Вёрстка страницы адаптирована под малые разрешения для удобного просмотра на мобильных устройствах. Также для сайта были созданы несколько favicon в разных разрешениях для лучшего отображения иконки сайта на разных устройствах и в разных браузерах. В браузере Chrome на платформах Android настроено изменение цвета верхней панели на фирменный цвет.

Лендинг курса по йоге - адаптив

Весь комплекс работ по оптимизации привёл к таким результатам скорости загрузки на на Google Page Speed: 100 баллов для компьютеров и 99 - для мобильных устройств.

Лендинг курса по йоге - скорость загрузки

Портфолио
Просмотреть работы
Консультация
Заказать консультацию
Наши услуги
Просмотреть все услуги