Лабораторная работа №5 - Тема: Адаптивный дизайн и UX-аудит
1. Теория
1.1. Что такое адаптивный дизайн
Адаптивный дизайн — подход, при котором веб-страница автоматически подстраивается под экран устройства: десктоп → планшет → мобильный.
1.2. Медиа-запросы (Media Queries)
Позволяют применять разные стили в зависимости от ширины экрана:
@media (max-width: 768px) {
.container { width: 100%; }
nav ul { flex-direction: column; }
}
1.3. Что такое UX (User Experience)
UX — восприятие и удобство взаимодействия пользователя с сайтом.
1.4. Основные принципы UX
- Простота и интуитивность
- Доступность
- Скорость
- Ясность
2. Задание
2.1. Подготовка
Использовать сайт из ЛР4 (my-site).
2.2. Добавление адаптивности
-
Определить брейкпоинты:
-
≥1024px — десктоп
- 768–1023px — планшет
- <768px — мобильный
- Реализовать Flex/Grid.
- Обновить стили под разные устройства.
2.3. UX-аудит
Проверить в DevTools:
- удобство навигации
- читаемость текстов
- корректность изображений
- проблемные элементы (ошибки, скрытые блоки, маленькие кликабельные зоны)
2.4. «Скорость = деньги»
Замерить загрузку в DevTools → Network. Объяснить влияние задержки на конверсию.
2.5. «Битва конкурентов»
Сравнить демо-сайт ReadyScript с Ozon/Wildberries по:
- скорости
- удобству поиска
- визуальной структуре
3. Контрольные вопросы
- Какие события браузера подходят для отслеживания активности?
- Как реализовать адаптивную вёрстку под три брейкпоинта?
- Как работает переключение темы (день/ночь)?
- Что такое «дребезг» событий и почему это плохо?
- Как безопасно обновлять DOM при логировании событий?
4. Чек-лист для самопроверки
| Баллы | Критерии выполнения |
|---|---|
| 6 | Реализованы ≥ 5 критериев, небольшие неточности в адаптации допустимы. Добавлен счётчик кликов или событий, корректно обновляется. Интерфейс перестраивается под 3 диапазона ширины (десктоп/планшет/мобильный). Реализована смена темы (день/ночь) через JS и CSS-классы. Добавлена реакция на частые действия (например, лайки, сообщения о высокой активности). Работа выполнена без фреймворков, код аккуратен, выполнена в онлайн-редакторе, есть скриншоты или ссылка. |
| 5 | Реализованы ≥ 5 критериев, но есть заметные неточности в адаптации или оформлении. |
| 3–4 | Реализованы ≤ 2 критериев, адаптация работает с ошибками. |
| 1–2 | Реализовано минимально, функциональность частично нарушена. |
| 0 | Работа отсутствует или не запускается. |