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