Что значит mobile first
Сначала проектируется экран шириной около 360 пикселей, потом страница расширяется для планшета и компьютера. Такой порядок заставляет оставить только важное: на маленьком экране не поместится лишний блок, и приходится решать, что главное. На компьютере страница потом получается чище, а не перегруженной.
Обратный путь — сжимать десктопный макет — приводит к тому, что элементы налезают друг на друга, текст мелкий, а кнопки не нажимаются. Проверка на двух-трёх реальных телефонах выявляет больше проблем, чем десять эмуляторов.
Правила для маленького экрана
- Основной текст не менее 16 пикселей, строки не длиннее экрана
- Кнопки и ссылки на расстоянии, достаточном для нажатия пальцем
- Меню — компактное, с самыми нужными пунктами и кнопкой связи
- Номер телефона и мессенджеры в один тап, а не картинкой
- Отсутствие горизонтальной прокрутки на любой странице
- Таблицы заменены карточками или прокручиваются внутри блока
- Всплывающие окна не закрывают весь экран и легко закрываются
- Контраст текста и фона достаточен при солнечном свете
Что отличается от десктопа
- Навигация одной рукой
- Важные действия размещают в нижней части экрана, где проще достать большим пальцем.
- Медленная сеть
- Не все в метро и на трассе с четырьмя полосками связи. Лёгкие страницы выигрывают.
- Другие сценарии
- Человек ищет адрес, телефон, график. Эти сведения должны находиться за секунду.
- Формы и клавиатура
- Правильные типы полей, автозаполнение и отсутствие закрытых клавиатурой кнопок.
Проверка перед запуском
Откройте сайт на разных устройствах
Небольшой Android, iPhone, планшет. Хотя бы один старый телефон.
Пройдите путь клиента
От рекламы или ссылки до заявки, только с телефона и только пальцем.
Проверьте портретную и ландшафтную ориентацию
Особенно видео, галереи и калькуляторы.
Измерьте скорость на мобильной связи
Включите ограничение скорости в инструментах браузера и посмотрите на ощущения.