Адаптивный дизайн: почему мобильная версия — главная
В Узбекистане большинство визитов на сайты приходит с телефонов. Мобильная версия — это не «вторая», а основная версия сайта.
Mobile first — не мода, а порядок работы
Если макет сначала рисуют для монитора, а потом «сжимают» под телефон, мобильная версия получается набором компромиссов: длинные блоки, мелкий текст, спрятанные важные элементы.
Обратный порядок дисциплинирует. Узкий экран заставляет решить, что действительно важно: на 360 пикселях ширины помещается один заголовок, одно предложение и одна кнопка, и это ровно то, что нужно посетителю.
К тому же Google индексирует мобильную версию. Контент, скрытый на телефоне ради «чистоты», для поиска фактически не существует.
Что чаще всего ломается
Таблицы. На телефоне они вызывают горизонтальную прокрутку всей страницы. Решение — прокрутка внутри самой таблицы или перестроение в карточки.
Изображения с текстом внутри. На маленьком экране такой текст нечитаем и не индексируется. Текст должен быть текстом, а картинка — фоном.
Фиксированные шапки высотой в треть экрана: на невысоком экране телефона они съедают пространство, оставляя контенту узкую полосу.
Формы с полями в две колонки и мелкими подписями. На телефоне поля должны идти одно под другим и открывать правильную клавиатуру: цифровую для телефона, email-раскладку для почты.
Точки перестроения макета
Не привязывайтесь к моделям устройств: экраны меняются. Ставьте точки перестроения там, где макет перестаёт выглядеть хорошо — обычно это район 480, 768 и 1200 пикселей.
Между этими точками макет должен тянуться плавно. Дизайн, аккуратный ровно на трёх ширинах и разваливающийся между ними, — типичный результат проверки только в стандартных пресетах браузера.
Скорость на мобильном интернете
Адаптивность бесполезна, если страница грузится десять секунд. Сжимайте изображения и отдавайте их в размерах под экран: фотография шириной 2000 пикселей на телефоне — чистая потеря трафика пользователя.
Откладывайте загрузку того, что ниже первого экрана, и не подключайте на мобильных тяжёлые скрипты, нужные только на десктопе.
Как проверять
Обязательно на реальных устройствах, включая недорогой Android — именно такие телефоны у значительной части аудитории, и именно на них видны проблемы с производительностью.
Пройдите ключевой сценарий целиком одной рукой: найти услугу, посмотреть цену, отправить заявку. Всё, что требует увеличения масштаба или точного попадания по мелкому элементу, — недоработка.