Адаптивная вёрстка
Адаптивная вёрстка подстраивает расположение и размеры элементов под доступную ширину экрана. Содержание должно оставаться читаемым и управляемым на телефоне и компьютере.
Также встречается: Адаптивная верстка сайта.
Для чего используется
Адаптивная вёрстка сохраняет содержание и рабочие сценарии на разных экранах. Для SEO это доступный мобильный каталог, читаемые условия и форма, которую можно отправить с телефона. Специалист проверяет страницы входа из поиска: даже при хороших позициях горизонтальная таблица или перекрытая кнопка могут отнимать обращения.
Как применяется
Проверьте меню, длинные заголовки, таблицы, формы и клавиатурный фокус. Тестируйте не только несколько популярных размеров, но и промежуточные ширины.
- Проверьте типовые страницы на узкой, промежуточной и широкой ширине: меню, таблицы, карточки, изображения и длинные заголовки.
- Пройдите путь к обращению с телефона, включая клавиатуру, ошибки формы, согласия и закреплённые элементы.
- Сопоставьте доступное содержание и ссылки мобильной и настольной версии; важная информация не должна исчезать из-за компактного оформления.
Практический пример
На телефоне таблица характеристик растягивает страницу, а плавающая кнопка перекрывает отправку заявки. Локальная прокрутка таблицы и исправление отступов сохраняют информацию и действие без удаления разделов.
Учебный пример.Ошибки и риски
Перестановка колонок сама по себе не решает мобильную задачу. Таблицы, изображения и фиксированные панели требуют отдельной проверки.
Скрытие важного текста в мобильной версии обедняет страницу. Сначала меняют подачу: раскрывающиеся блоки, удобную прокрутку таблиц и размер элементов, сохраняя информацию.
Как проверить результат
Проверьте отсутствие горизонтального переполнения, читаемость текста и доступность кнопок. Эмуляцию дополните реальным устройством, когда оно доступно команде.