На телефоне кнопка «Обсудить проект» закрывает фотографии. Посетитель не может рассмотреть работу и, возможно, даже не доберётся до описания услуги. Для архитектурного бюро, интерьерной студии или мебельной мастерской это уже не мелочь в оформлении. Мобильную страницу стоит проверять как путь целиком: что человек видит сначала, как изучает проект и удаётся ли ему отправить запрос.
Какие задачи решает мобильный сайт
Посетитель открывает сайт по рекомендации знакомого, переходит из сообщения с фотографией проекта или возвращается к сохранённой странице, обсуждая ремонт с семьёй. Он может быть на улице, с одной свободной рукой и медленным соединением. Рассчитывать, что позже он обязательно сядет за компьютер, не стоит.
У сайта строительной или интерьерной компании несколько задач. Показать характер выполненных работ. Объяснить, что входит в услугу и где заканчивается ответственность исполнителя: например, речь идёт о проектировании, комплектации, изготовлении мебели или авторском сопровождении. Помочь связаться с компанией и при этом дать ответы на базовые вопросы тем, кто пока сравнивает предложения.
Удобная мобильная версия сама по себе не принесёт обращения: заказчик оценивает портфолио, репутацию, сроки, бюджет и специализацию. Но неудобная страница способна остановить заинтересованного человека — если планировку не разглядеть, ограничения услуги легко пропустить, а форму трудно заполнить.
Не уменьшенная копия, а другая расстановка приоритетов
На широком экране меню, фотографии, описание и форма могут стоять рядом. На телефоне они идут друг за другом, и порядок становится частью смысла. На странице проекта первыми могут появиться тип объекта, краткое описание задачи и несколько показательных кадров. На странице услуги — результат работы, этапы и способ начать разговор.
Адаптивная вёрстка подгоняет сетку под ширину экрана, но не решает, что читать сначала. Если до полезных сведений нужно пролистать баннер, длинную цитату и несколько экранов обещаний, посетитель может их не найти. Мобильную последовательность блоков лучше просматривать отдельно, с вопросами заказчика в голове.
Укорачивать страницу за счёт важной информации тоже не нужно. Если на телефоне исчезают подписи к планам, география работы или условия начала проекта, предложение выглядит иначе, чем есть на самом деле. Сократить повторы, разбить плотный текст подзаголовками и убрать второстепенное оформление — другое дело.
Навигация, которую можно пройти одним пальцем
Мобильное меню должно помогать выбрать раздел, а не показывать всю внутреннюю структуру компании. «Проекты», «Услуги», «О бюро», «Контакты» понятнее рубрик, смысл которых известен только сотрудникам. Если разделов много, их можно сгруппировать. Слишком глубокая вложенность мешает: трудно помнить, где находилась нужная страница.
Ссылкам и кнопкам нужны площадь для касания и расстояние между собой. Когда телефон, кнопка закрытия меню и соседняя иконка стоят вплотную, промахнуться легко. Отдельного внимания требуют закреплённые панели: нижняя кнопка связи полезна ровно до тех пор, пока не закрывает текст, подписи или отправку формы.
Контакты должны быть доступны без всплывающих окон. Номер телефона — нажимаемым, адрес мастерской — записанным текстом, часы связи — указанными рядом со способами обращения. Для компании из Калининградской области имеет смысл уточнить, работает ли она за пределами города и когда нужна личная встреча. Так заказчик поймёт, подходит ли ему услуга, ещё до звонка.
Портфолио: изображение должно объяснять проект
В архитектуре и интерьере фотографии помогают оценить масштаб пространства, сочетание материалов и детали решения. Широкий кадр на телефоне может превратиться в узкую полосу; при автоматической обрезке иногда исчезает как раз важный узел. Мобильное кадрирование ключевых изображений стоит проверять по одному.
Галерею проще читать, когда кадры выстроены осмысленно: общий вид, планировочное решение, детали с пояснениями. Подпись «Фрагмент интерьера» мало что добавляет к фотографии кухни. А фраза «Высокие шкафы размещены вдоль глухой стены, чтобы сохранить свет у окна» объясняет замысел, даже если на маленьком экране часть комнаты не видна. Разумеется, подпись должна описывать реальный проект, а не приписывать материалам или конструкциям свойства, которые не подтверждены.
С планами и чертежами сложнее. Лист, уменьшенный до ширины телефона, не позволяет прочитать мелкие обозначения. Можно показать его целиком, дать возможность открыть крупнее и коротко пояснить, на что смотреть. Одного масштабирования недостаточно для посетителя, который не привык читать профессиональные чертежи.
Проверьте и управление галереей: не уводит ли попытка листать кадры на соседнюю страницу, виден ли номер изображения, легко ли выйти из полноэкранного режима. Автоматическое переключение мешает рассмотреть детали и дочитать подпись.
Фотографии и скорость загрузки
Нет необходимости загружать на телефон каждый исходный файл в полном размере. Сайт может отдавать изображения подходящего разрешения, а кадры ниже первого экрана — подгружать ближе к моменту просмотра. Но главное изображение не стоит откладывать так, чтобы на его месте долго оставалась пустота. Если размеры блоков заданы заранее, текст и кнопки не смещаются при появлении фотографий.
Формат и сжатие подбирают по самим кадрам. Потери особенно заметны на кирпичной фактуре, тонких линиях мебели и плавных переходах света. Поэтому проверять нужно и вес страницы, и качество изображения на телефоне: быстрая галерея с нечитаемыми деталями мало помогает изучить проект. Видео или сложная анимация уместны, когда движение действительно позволяет понять пространство, а не подменяет ясные фотографии.
Текст и формы: убрать препятствия для обращения
С телефона описание услуги часто читают урывками. Но сводить его к лозунгу нельзя: заказчику важно знать, для каких объектов подходит работа, что он получит, какие исходные данные понадобятся и как начинается сотрудничество. Умеренные по длине абзацы, понятные подзаголовки и короткие списки позволяют находить ответы без лишней прокрутки.
Формулировки не помогут, если текст трудно разобрать. Светло-серая подпись поверх фотографии может выглядеть аккуратно в макете, но теряться на экране при дневном свете. Для надписей на изображениях проверяйте разные варианты кадрирования: на узком экране фон за буквами меняется. Ссылки должны отличаться от обычного текста не только цветом, а раскрывающиеся блоки — иметь понятные названия.
В форме стоит спрашивать то, что компания готова обработать на первом этапе. Для начала разговора обычно хватает имени, способа связи и краткого описания задачи. Требование сразу указать точную площадь каждого помещения, полный адрес и готовое техническое задание может остановить человека, который ещё выясняет, возможен ли проект. Если подробности нужны для предварительной оценки, объясните зачем и разрешите приблизительный ответ.
- Размещайте подписи к полям так, чтобы они оставались видны после начала ввода. Подсказка внутри поля не должна быть единственным объяснением.
- Для телефона и электронной почты выбирайте соответствующие типы полей: устройство покажет подходящую клавиатуру и выполнит базовую проверку ввода.
- Показывайте ошибку рядом с нужным полем и объясняйте, что исправить, не стирая уже введённый текст.
- После отправки подтверждайте получение запроса и сообщайте, каким способом компания ответит. Не указывайте срок, если соблюдать его не получается.
Если к форме можно приложить план или фотографии, заранее сообщите допустимые форматы и ограничения размера. Заказчик может загружать снимки прямо с телефона; непонятная ошибка вынудит его начинать заново. Другой способ связи пригодится, но не должен служить оправданием неработающей формы.
Доступность помогает не только отдельной группе пользователей
Сайтом пользуются с занятой рукой, при плохом освещении, с увеличенным шрифтом или через экранный диктор. Доступность здесь — часть работоспособности. Описания значимых изображений, ясные названия кнопок и последовательные заголовки помогают тем, кто не может воспринимать страницу только глазами.
При увеличении системного шрифта заголовки и кнопки не должны обрезаться. Важные сведения нельзя прятать за наведением курсора: на телефоне его обычно нет. Если характеристики материала появляются только при наведении на образец, мобильный посетитель их не увидит. Цвету тоже нужна текстовая опора: «доступно» и «недоступно» понятнее зелёной и красной точек без пояснений.
Всплывающие окна, запросы согласия и плавающие панели проверяйте одновременно. По отдельности каждое может казаться терпимым, а вместе они закроют почти весь экран. Необязательное окно должно закрываться без борьбы с интерфейсом.
Как проверять мобильную версию перед публикацией
Скриншота макета мало. Нужна опубликованная или тестовая версия с настоящими изображениями, рабочими формами и сообщениями об ошибках. Пройдите несколько обычных маршрутов: найдите проект похожего дома, уточните состав услуги, откройте контакты и отправьте запрос. Так заметнее разрывы между удачными отдельными экранами.
- Проверьте разные ширины экрана. Важнее названий моделей то, как меняются блоки между узким и широким состояниями: нет ли горизонтальной прокрутки и обрезанных подписей.
- Пройдите страницу без идеального соединения. Заметьте, когда появляются заголовок, фотографии и основные действия. Если меню начинает работать лишь после загрузки тяжёлого видео, этим стоит заняться в первую очередь.
- Испытайте касания. Откройте галерею, вернитесь назад, нажмите номер телефона, раскройте меню и заполните форму. Проверьте, не закрывает ли экранная клавиатура кнопку отправки.
- Увеличьте текст. Блоки должны расти по высоте, не скрывая содержание.
- Прочитайте проект без фотографий. Основной смысл должен оставаться понятным, а значимые изображения — иметь уместные описания.
После запуска смотрите не только на число мобильных посещений. Полезнее замечать конкретные затруднения: где прекращают просмотр, отправляется ли форма, открывают ли планы и возвращаются ли из галереи к описанию. Сами по себе такие наблюдения не объясняют причину. Короткий визит на страницу контактов, например, может означать, что номер нашли сразу. Сверяйте выводы с ручной проверкой и отзывами клиентов.
При каждом обновлении проекта редактору пригодится короткий маршрут на телефоне: открыть страницу, посмотреть первый кадр, прочитать подписи, увеличить план и отправить тестовое сообщение. После замены фотографии это поможет вовремя заметить, что важная деталь вышла за пределы мобильного кадра.