Landbox

Сайт-продажи курсов https://landbox.online/

Адаптивная верстка. Использовались - SCSS, HTML5, JS, JQUERY.

Заказчик обратился со следующими задачами:

-Вёрстка должна быть полностью адаптивная (респонсив), поддержка последних двух актуальных версий браузера Chrome, IE (последняя), Firefox, Opera, Edge, Safari, Yandex.

- Должна быть поддержка Retina экранов, а именно svg иконка

- Для картинок нужно использовать ленивую загрузку, т.е. они должны появляться плавно

- Если можно сделать без query, то делаем без него, т.е используем плагины на чистом js

Теперь по вёрстке☺️ Какие сложности возникли:

- Анимация текста, она прекрасно работала в Google Chrome, но при этом плохо работала в Safari...слайды могли находить друг на друга, при сворачивании окна браузера, анимация могла зависнуть. Данная проблема была решена путём замены простой анимации, на слайдер swiper JS, он уже использовался в проекте, его не нужно было подключать и тем самым, мы не нагрузили страницу лишней библиотекой.

- другая сложность заключалась в том, что заказчик просил хороший pagespeed, но при этом требовалось автовключение видео в топе страницы и объемные картинки высокого разрешения, которые нагружали страницу и не давали возможность увеличить скорость загрузки страницы...пришлось выбирать между хорошим качеством и быстрой загрузкой, остановились на хорошем качестве.

В общем то и всё. Сроки соблюдены, заказчик доволен.