01
Приоритет содержания
Определяем, что посетитель должен увидеть первым. Важное действие не уходит под декоративную иллюстрацию.
Дизайн и проектирование
Адаптивный дизайн сайта
Перестраиваем интерфейс под реальную ширину экрана, чтобы текст, изображения и действия сохраняли смысл.
- Формат
- Дизайн и проектирование
- Оценка
- После уточнения состава работ
- Начало
- Краткое описание задачи на почту
Когда подходит
Задача и контекст
Адаптация не сводится к уменьшению настольного макета. На телефоне меняются порядок блоков, длина строки, размеры изображений и способ работы меню. Отдельно проверяются длинные названия, таблицы, контакты и основные действия.
Что входит в работу
02
Типографика
Настраиваем размер, межстрочный интервал и переносы. Служебные подписи сохраняют читаемость.
03
Компоненты
Перестраиваем меню, списки, таблицы и подборщики. Кнопки получают достаточную область нажатия.
04
Проверка границ
Проверяем узкие ширины, длинный текст, увеличение и фокус. Отсутствие общего скролла не заменяет проверку наложений.
Что получите
Макеты ключевых состояний для узких и широких экранов и правила изменения композиции.
Состав оценки
От чего зависит стоимость
- Число сложных компонентов
- Состояние существующей вёрстки
- Таблицы, интерактивы и варианты содержания
Сначала уточняем задачу и материалы. Затем согласуем объём, срок и критерии приёмки.
Границы задачи
Что важно учесть
Дизайн адаптации и проверка готовой вёрстки разные этапы. Для существующего сайта возможность изменений зависит от шаблонов и платформы.
Ответы на вопросы
Сколько мобильных макетов нужно?
По числу разных типов и сложных состояний. Не каждой странице нужен отдельный рисунок, если она использует проверенный шаблон.
Нужна ли версия для планшета?
Промежуточные ширины нужно учитывать: там также возможны неудобные переносы и пустоты.
Можно скрыть часть текста?
Только если это не лишает посетителя важных условий. Сокрытие ради красивого кадра не решает задачу.
Как поступить с таблицей?
Выбрать карточки или ограниченную прокрутку самой таблицы. Вся страница не должна уезжать по горизонтали.
Будет ли проверка клавиатурой?
Фокус и порядок взаимодействия учитываются в макетах, затем проверяются в готовом интерфейсе.
Можно исправить только первый экран?
Да, если область задачи ограничена. Но общие стили могут требовать проверки связанных страниц.