Бывает так: макет согласован, дизайн красивый, заказчик доволен. Приходит момент сдачи, открываешь сайт на телефоне — а кнопки съехали, шрифт не тот, форма не отправляется. Знакомо? Вёрстка и программирование — это та часть работы, где красота встречается с реальностью. И именно здесь чаще всего всплывают проблемы, которые никто не заметил на этапе макета.
Расскажу, что проверять, когда сайт уже собран, чтобы не ловить баги после запуска.
Внешний вид на разных экранах
Макет обычно рисуют под один размер — чаще всего под широкий монитор. А открывать сайт будут на телефонах, планшетах, ноутбуках и старых мониторах. Проверять нужно всё это, а не только десктоп.
Уменьшайте окно браузера постепенно и смотрите, как ведёт себя страница. Не должно быть горизонтальной прокрутки, текста, который вылезает за края, кнопок, которые наезжают друг на друга. Отдельно проверьте промежуточные разрешения — планшет или небольшой ноутбук часто оказываются самым проблемным местом.
Кроссбраузерность
Сайт, который идеально выглядит в Chrome, может развалиться в Safari или Firefox. Особенно это касается шрифтов, скруглений, гибких сеток и работы с формами. Откройте сайт хотя бы в трёх-четырёх основных браузерах и пройдите основные страницы.
Если используете современные технологии, проверьте, что они поддерживаются в нужных версиях. Иногда красивая анимация в Safari просто не работает — и страница выглядит пустой.
Скорость загрузки
Тяжёлый сайт — это потерянные посетители. Проверьте, сколько весит страница и сколько времени занимает загрузка. Основные виновники — большие картинки, видео без сжатия и обилие скриптов.
Картинки должны быть в современных форматах и подходящего размера. Скрипты — подключены в нужный момент, а не все сразу в самом начале. Есть много сервисов, которые покажут, что именно тормозит. Если результаты далеки от хороших, стоит вернуться к вёрстке — переделать потом будет сложнее.
Формы и отправка данных
Форма заявки — это главный инструмент продаж на сайте. Проверьте каждую форму: заполните её как обычный посетитель, отправьте и убедитесь, что письмо пришло. Проверьте обязательные поля — правильно ли они помечены, есть ли понятные подсказки об ошибке.
Отдельно проверьте, что происходит при неверном вводе. Если человек вводит номер телефона с буквами или оставляет поле пустым, форма должна вежливо подсказать, в чём дело. Если после нажатия «Отправить» ничего не происходит — это поломка, а не «ну, наверное, отправилось».
Меню и навигация
Пройдите по всем ссылкам в меню и проверьте, что они ведут туда, куда должны. Частая история — ссылка на страницу, которой ещё нет, или пункт меню, который никуда не кликается. Это выглядит как недоделка и отпугивает посетителей.
Не забудьте про мобильное меню. Оно должно открываться, закрываться и не перекрывать содержимое страницы. Кнопка «вверх» и хлебные крошки — если они есть — должны работать.
Тексты и изображения
Проверьте весь контент на реальных данных. Часто в вёрстке остаются заглушки: «Lorem ipsum», картинки-плейсхолдеры, тестовые телефоны и адреса. Замените всё на настоящее и проверьте, что длинные заголовки не ломают вёрстку.
Посмотрите, как выглядит сайт с реальными фотографиями — с нужным соотношением сторон и разрешением. Картинка, которая отлично смотрится в маленьком блоке, может растянуться на весь экран и превратиться в кашу.
SEO-основа
Даже если продвижением займётесь позже, базовая техническая основа должна быть заложена сразу. У каждой страницы — свой title и description. У картинок — alt-тексты. Адреса страниц — понятные и с ключевыми словами, а не набор символов.
Проверьте, есть ли карта сайта и файл robots.txt, работает ли редирект со старых адресов, если сайт переезжает. Это мелочи, которые на старте легко упустить, а потом долго исправлять.
Доступность и мелочи
Проверьте, что сайтом можно пользоваться с клавиатуры, что у кнопок есть понятные подписи, а контраст текста достаточный. Это влияет не только на доступность для людей с ограничениями, но и на общее удобство.
И пройдитесь по мелочам: работает ли поиск, открываются ли ссылки в новых вкладках там, где это нужно, не осталось ли «битых» изображений. Именно из таких мелочей складывается ощущение, что сайт сделан аккуратно.
Красные флаги перед сдачей
- Горизонтальная прокрутка на телефоне.
- Форма «отправляется», но письмо не приходит.
- Ссылки в меню ведут на несуществующие страницы.
- В текстах остались заглушки и тестовые контакты.
- Страница грузится дольше пяти секунд.
- В Safari или Firefox что-то сломалось.
- На страницах одинаковые title и description.
- Картинки весят по несколько мегабайт.
Один пункт — повод вернуться к работе. Несколько — значит, сайт ещё не готов к запуску.
Вместо итога
Хорошая вёрстка — это когда сайт одинаково хорошо работает везде: на телефоне и компьютере, в любом браузере, с быстрым и медленным интернетом. Проверка перед сдачей занимает пару часов, но экономит недели правок потом. Не стесняйтесь просить разработчика пройтись по этому списку вместе с вами — так вы увидите результат своими глазами, а не со слов.