Ограничение пространства делает решения честнее
На широком экране легко спрятать слабую структуру в декоративных колонках. Мобильный формат требует выбрать главное: цель страницы, основное сообщение и действие.
Это не отказ от выразительности, а дисциплина, после которой дизайн увереннее масштабируется вверх.
Контент получает приоритет до сетки
Сначала определяют порядок информации, затем подбирают компоненты. Самые важные ответы должны появляться раньше второстепенных подробностей.
Так структура отражает реальные задачи пользователя, а не расположение элементов в макете.
Палец менее точен, чем курсор
Интерактивные зоны должны иметь достаточный размер и расстояние. Состояние наведения не может быть единственным способом открыть функцию, потому что на сенсорном экране его нет.
Закреплённые элементы не должны перекрывать контент или отнимать половину высоты экрана.
Читаемость важнее количества символов
Размер шрифта, длина строки и межстрочный интервал проверяются на реальном устройстве. Слишком мелкий текст заставляет масштабировать страницу, а чрезмерно крупный разрушает ритм.
Заголовки следует адаптировать по смыслу и переносам, а не только уменьшать формулой.
Изображение должно помогать, а не задерживать
Мобильному устройству не нужен тяжёлый файл, подготовленный для большого монитора. Адаптивные источники и современные форматы снижают трафик без заметной потери качества.
Важный объект оставляют внутри безопасной области кадра, чтобы вертикальная обрезка не уничтожила композицию.
Форма учитывает клавиатуру и контекст
Правильный тип поля вызывает подходящую клавиатуру, подпись не исчезает после ввода, а ошибка объясняет способ исправления. Чем меньше обязательных полей, тем легче начать диалог.
Автозаполнение и понятные форматы экономят усилия пользователя.
Адаптивность — это изменение композиции
При расширении экрана появляются дополнительные колонки и воздух, но смысловой порядок сохраняется. Контрольные точки выбирают там, где ломается контент, а не под конкретную модель телефона.
Компоненты должны выдерживать промежуточные ширины и увеличение текста.
Реальное устройство показывает то, чего не видно в редакторе
Проверяйте сайт на медленной сети, при ярком свете, с экранной клавиатурой и разными браузерами. Важно пройти весь сценарий, а не только посмотреть первый экран.
Особое внимание уделяют меню, формам, галереям и фиксированным кнопкам.
