Сайт по-разному выглядит в разных браузерах и на телефонах: почему так и что проверять

«У меня всё нормально, а клиент прислал скриншот — всё разъехалось». Знакомая ситуация, которая ставит владельца сайта в тупик: сайт вроде бы один, а выглядит у всех по-разному. Кто-то видит аккуратную страницу, кто-то — наползающие друг на друга блоки, у кого-то не нажимается кнопка заявки, а у кого-то вместо фотографий пустые прямоугольники.

Причина в том, что сайт не картинка, а набор инструкций, которые каждое устройство и каждая программа выполняет по-своему. Разберём, откуда берутся расхождения, какие из них критичны для обращений, как проверять сайт самостоятельно и что требовать от подрядчика.

Почему один сайт выглядит по-разному

Есть несколько независимых причин, и обычно они складываются.

Разные программы просмотра. Их несколько, у каждой своя версия, и поддержка отдельных возможностей у них различается. То, что современная программа отображает правильно, старая может не понять.

Разные размеры экрана. Широкий монитор, ноутбук, планшет, телефон, телефон с очень узким экраном. Сайт должен перестраиваться под каждый случай.

Разные операционные системы. Отличаются шрифты, отрисовка элементов форм, обработка нажатий.

Разный масштаб и настройки. Человек с плохим зрением может увеличить шрифт в полтора раза — и вёрстка, рассчитанная только на стандартный размер, поедет.

Разная скорость соединения. На медленном мобильном интернете часть элементов может не успеть загрузиться, и страница выглядит поломанной.

Расширения и блокировщики. Дополнения, установленные у посетителя, иногда скрывают элементы сайта, в том числе формы и кнопки.

Тёмное оформление системы. На некоторых устройствах цвета инвертируются, и текст может стать нечитаемым.

Какие расхождения действительно опасны

Не всякое отличие — проблема. Разница в толщине шрифта на пару пикселей никого не волнует. Но есть категория ошибок, которые прямо стоят обращений.

Не нажимается кнопка заявки. Самое дорогое. Человек хочет обратиться и не может.

Форма не отправляется или ломается. Поля наезжают друг на друга, выпадающий список не открывается, кнопка уходит за границу экрана.

Телефон не кликается на мобильном. Номер набран так, что по нему нельзя позвонить нажатием.

Меню не открывается. Посетитель не может перейти в нужный раздел.

Текст наезжает на текст или уходит за край. Читать невозможно, человек уходит.

Всплывающее окно невозможно закрыть. Особенно частая проблема на телефонах: крестик оказывается за пределами экрана.

Не загружаются изображения. В магазине это критично: товар без фотографии не покупают.

Содержимое требует горизонтальной прокрутки. Верный признак того, что мобильная версия сделана небрежно.

Именно этот список нужно проверять в первую очередь — он покрывает почти все потери обращений из-за отображения.

Как проверить сайт самостоятельно

Полноценное тестирование — работа специалиста, но базовую проверку владелец может сделать за полчаса.

Соберите три-четыре устройства. Свой телефон, телефон сотрудника с другой системой, планшет, компьютер. Этого достаточно, чтобы выявить основные проблемы.

Пройдите путь клиента, а не откройте главную. Из поиска на страницу услуги, оттуда в форму, заполнить, отправить, увидеть подтверждение. Ошибки чаще всего вылезают именно в середине пути.

Проверьте на узком телефоне. Устройства с маленьким экраном — самая частая жертва плохой вёрстки.

Поверните телефон горизонтально. Ещё один режим, о котором забывают.

Увеличьте масштаб на компьютере до 150 процентов. Так сайт видят люди с большими мониторами и слабым зрением.

Проверьте с медленным интернетом. Отключите скоростное соединение и посмотрите, что происходит на слабом сигнале.

Проверьте в разных программах просмотра. Хотя бы в двух-трёх популярных.

Обязательно проверьте отправку формы. Не просто внешний вид, а именно факт отправки и получения заявки на почту.

Найденные проблемы фиксируйте скриншотом с указанием устройства и программы — это сильно ускорит работу подрядчика.

Что делать с очень старыми программами просмотра

Регулярно возникает вопрос: поддерживать ли устаревшие версии. Ответ зависит от аудитории.

Посмотрите в Яндекс.Метрике отчёт по программам просмотра и устройствам. Если на старую версию приходится меньше половины процента посетителей, вкладывать деньги в её поддержку бессмысленно. Если это несколько процентов — а такое бывает у компаний, работающих с организациями, где на рабочих местах стоят старые системы, — поддержку нужно закладывать.

Разумный компромисс — принцип «должно работать, необязательно красиво». На старом устройстве сайт может выглядеть проще, без анимации и сложных элементов, но телефон, меню и форма заявки обязаны работать всегда.

Как это влияет на схему продвижения 3 в 1

Наш подход к получению обращений опирается на три канала, и проблемы с отображением бьют по каждому из них по-своему.

Поиск и нейроответы. Человек из поиска попадает на конкретную страницу — статью или описание услуги. Если на его устройстве текст разъехался, он уйдёт за несколько секунд, и все вложения в подготовку материала окажутся впустую. Есть и косвенный эффект: поисковые системы учитывают удобство сайта на мобильных устройствах, и сайт, неудобный на телефоне, реже показывается тем, кто ищет с телефона.

Яндекс.Справочник. Переход с карточки в Яндекс Картах почти всегда происходит с мобильного устройства и в конкретной ситуации: человек стоит на улице, сидит в машине, идёт по делам. У него мало времени и часто плохая связь. Если страница грузится медленно или кнопка звонка не нажимается, он вернётся в карты и позвонит следующей компании из списка.

2ГИС. Здесь ситуация ещё жёстче: переход происходит прямо из приложения, во встроенном окне просмотра, которое ведёт себя не так, как обычная программа. Мы неоднократно сталкивались с тем, что сайт нормально работает в браузере, но во встроенном окне приложения ломается: не открывается меню, не срабатывает форма, всплывающее окно перекрывает всё и не закрывается. Проверять сайт именно через переход из карточки — обязательный пункт, о котором почти никто не помнит.

Отсюда практическое правило: проверять сайт нужно не только на разных устройствах, но и по разным путям входа — из поиска, из карточки в Яндекс Картах и из карточки в 2ГИС. Это три разные ситуации, и ошибки в них разные.

Что требовать от подрядчика

Если сайт делает или сопровождает подрядчик, стоит заранее договориться о правилах.

Список поддерживаемых устройств и программ. Конкретный перечень, а не «всё современное».

Проверка перед сдачей. Работы считаются принятыми после проверки на согласованном списке, а не после того, как «у меня открылось».

Обязательная проверка форм. Не только вёрстки, но и фактической отправки заявки на каждом устройстве.

Проверка после каждой доработки. Правка в одном месте регулярно ломает другое. Особенно это касается шапки, меню и форм.

Реакция на сообщения об ошибках. Согласованный срок исправления критичных проблем — тех, что мешают оставить заявку.

Скриншоты как доказательство. И от вас, и от подрядчика.

Как поймать проблемы, о которых не сообщают

Главная сложность в том, что посетители не жалуются. Человек, у которого не отправилась форма, просто уходит. Есть несколько способов узнать о проблемах без обратной связи.

Отчёты по устройствам в Яндекс.Метрике. Сравните долю обращений с разных типов устройств и с разных программ просмотра. Если с какого-то устройства посетители есть, а заявок нет совсем — там что-то сломано.

Записи визитов. Яндекс.Метрика позволяет посмотреть, как человек вёл себя на странице. Несколько записей визитов с мобильных устройств обычно сразу показывают проблему: человек несколько раз пытается нажать кнопку и уходит.

Карта кликов. Показывает нажатия по местам, где нет ссылок, — часто это признак того, что элемент не работает.

Контроль количества заявок. Резкое падение после доработки сайта — сигнал, что где-то сломалась форма.

Регулярная самопроверка. Раз в месяц пройти путь клиента с телефона. Занимает десять минут и регулярно что-нибудь находит.

Почему сайт «сломался сам по себе»

Отдельный класс обращений: сайт работал годами, никто ничего не менял, и вдруг что-то поехало. Причины обычно такие.

Обновилась программа просмотра. Разработчики браузеров периодически перестают поддерживать устаревшие способы вёрстки. Сайт, собранный десять лет назад, может однажды перестать корректно отображаться просто из-за обновления у посетителей.

Обновилась система управления сайтом или её дополнения. Обновление, установленное ради безопасности, иногда меняет внешний вид элементов.

Перестал работать внешний сервис. Шрифты, карты, чат, счётчики подгружаются со сторонних адресов. Если такой адрес стал недоступен, страница может выглядеть иначе или подтормаживать.

Кончился срок действия сертификата безопасности. Посетитель видит предупреждение и уходит, не дойдя до сайта.

Кто-то внёс правку. Самая частая причина, о которой сначала все забывают: сотрудник добавил новость с фотографией нестандартного размера или вставил текст из документа вместе с оформлением.

Изменилось содержимое. Длинное название товара, которое не помещается в карточку, или загруженное фото в неверной ориентации ломают вёрстку в конкретном месте.

Вывод простой: «никто ничего не трогал» почти никогда не соответствует действительности, и при разборе проблемы стоит начинать с вопроса, что менялось в последние дни — на сайте, у сервисов и в содержимом.

Как сократить количество таких проблем

Ограничьте возможности оформления при наполнении. Чем меньше вариантов вставить текст с чужим форматированием, тем меньше поломок.

Задайте правила для изображений. Единый размер и пропорции для карточек и новостей избавляют от половины проблем с вёрсткой.

Минимизируйте внешние подключения. Каждый сторонний сервис — потенциальная точка отказа и лишние секунды загрузки.

Ведите список доработок. Когда есть запись, что и когда меняли, поиск причины занимает минуты вместо дней.

Настройте регулярный контроль. Достаточно раз в неделю проверять ключевые страницы и отправку формы, чтобы не узнавать о поломке от клиента через месяц.

Держите сопровождение. Проблемы такого рода возникают у всех, вопрос только в том, сколько времени проходит между поломкой и исправлением. Именно это время и стоит денег.

Типичные ошибки

Проверять только на своём устройстве. У владельца обычно новый телефон и хороший интернет — то есть лучшие условия из возможных.

Считать, что «адаптивная вёрстка» решает всё. Она решает вопрос размеров, но не поведения элементов и не особенностей встроенных окон приложений.

Не проверять формы. Внешний вид может быть в порядке, а заявка не уходить.

Игнорировать медленный интернет. Значительная часть посетителей приходит с мобильного соединения не лучшего качества.

Забывать про повторную проверку после правок. Самый частый источник новых поломок.

Не смотреть статистику по устройствам. Проблема видна в цифрах задолго до того, как о ней кто-то сообщит.

Что в итоге

Расхождения в отображении сайта неизбежны, но опасны только те, что мешают человеку связаться с вами. Кнопка, форма, телефон и меню обязаны работать на любом устройстве, при любом размере экрана и при переходе из любого источника — из поиска, из Яндекс Карт и из 2ГИС. Всё остальное — вопрос аккуратности, а не потери денег.

Проще всего закрепить эту проверку за конкретным человеком и конкретным днём месяца — иначе она откладывается бесконечно. Регулярная проверка занимает считанные минуты, а находит проблемы, о которых иначе вы узнали бы только по упавшему числу заявок — и то не сразу.

Если вы подозреваете, что часть посетителей не может оставить заявку, специалисты компании «Сайты Профессионально» проведут бесплатную проверку сайта на разных устройствах и по разным путям входа, покажут найденные проблемы со скриншотами и оценят, сколько обращений вы теряете прямо сейчас.