Корпоративные сайты

Серьёзный покупатель в первую очередь проверяет корпоративный сайт. Мы создаём ваш сайт так, как продуктовая компания создаёт свой собственный продукт: спроектированный с нуля под ваш бренд, собранный в статический HTML, доставляемый с глобальной edge-сети, проверенный на каждом размере экрана и написанный так, чтобы его находили.

Начать проект

или напишите нам на [email protected]

Рендеринг

Статический HTML, без сервера в рантайме

Доставка

Глобальная edge-сеть Cloudflare

Доступность

WCAG 2.2 AA, проверено на каждой странице

Языки

По числу ваших рынков

Трекинг

Без сторонних скриптов

Хостинг

Мы размещаем и сопровождаем, помесячно

Результаты

Что входит в сайт Whitewater

У каждого проекта одна и та же основа. Дизайн и текст меняются от клиента к клиенту, а инженерная база остаётся неизменной.

01

Дизайн-система для вашего бренда

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

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

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

02

Страницы, написанные под реальные запросы покупателей

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

03

Форма связи, которая реально доставляет письма

Форма построена на обычном HTML и отправляет данные на serverless-эндпоинт того же домена. Её защищают проверка Cloudflare Turnstile, скрытое honeypot-поле и проверка времени заполнения, а письма отправляются с подтверждённого домена, поэтому заявка попадает во входящие, а не в спам.

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

04

Каждая страница на каждом языке, на котором вы продаёте

У каждого языка свои настоящие адреса и свой текст, а hreflang-кластер, canonical-ссылка на саму себя и направление текста настроены на уровне каждой страницы. Этот сайт сам служит доказательством: он работает на восьми языках.

05

Изображения и шрифты обрабатываются при сборке

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

06

Хостинг, деплои и тесты, которые их контролируют

Мы размещаем и обслуживаем готовый сайт за ежемесячную плату: edge-платформу, сертификаты, домен отправки, деплои и наблюдение за работой. Сайт представляет собой обычный код в репозитории с автоматическими проверками и деплоем одной командой, а тесты здесь не для галочки: доступность, паритет локалей, заголовки безопасности, гигиена метаданных и целостность ссылок проверяются при каждом изменении, и при красном прогоне деплой останавливается.

Замена

Замена сайта, который у вас уже есть

Большинство корпоративных сайтов не первые. Ваш уже что-то ранжирует, уже собирает ссылки с площадок, о которых вы давно забыли, и на нём уже есть страницы, которые клиент сохранил в закладках. Замена, которая это игнорирует, может свести на нет годы накопленного трафика за один день, поэтому перенос закладывается в проект с самого начала, а не придумывается в день запуска.

01

Инвентаризация прежде, чем начнётся дизайн

Мы составляем список всех адресов текущего сайта: из sitemap, внутренних ссылок, логов сервера или CDN, а также истории Search Console, если она у вас есть. Каждый адрес затем получает решение: остаётся на том же месте, переносится, объединяется с более сильной страницей, переписывается или намеренно выводится из обращения.

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

02

Контент переносится без потери смысла

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

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

03

Карта редиректов: письменно и проверяемо

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

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

04

Что переносится, а что мы намеренно убираем

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

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

05

Переключение и недели после него

Новый сайт работает на адресе предпросмотра задолго до переключения, поэтому в день запуска ничего не видно впервые. В момент переключения мы меняем DNS, оставляем старый хостинг доступным, пока изменение не распространится повсюду, проверяем карту редиректов, убеждаемся, что почта с формы приходит, отправляем новый sitemap и оповещаем сервисы мгновенной индексации, чтобы поисковики обошли сайт заново в течение дней, а не при следующем плановом визите.

Дальше мы наблюдаем. После любой замены сайта позиции в поиске несколько недель меняются, пока поисковики заново обходят и переоценивают сайт: одни запросы закрепляются выше, другие сначала проседают, а потом восстанавливаются. Мы вместе с вами следим за основными показателями: числом проиндексированных страниц, состоянием редиректов, Core Web Vitals и запросами, которые реально важны для бизнеса, и честно рассказываем, что видим, включая случаи, когда ответ в том, что делать ничего не нужно.

Чего мы точно не сделаем, так это не назовём цифру заранее. Аккуратный перенос защищает то, что вы уже заработали, и даёт более качественному контенту честный шанс конкурировать. Любой, кто гарантирует результат замены сайта, просто гадает вашим трафиком.

Инженерия

Как это устроено

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

Сначала статика

Страницы компилируются в HTML ещё до прихода первого посетителя. На пути запроса нет сервера приложений и нет запроса к базе данных, который бы задерживал первую отрисовку. Контент, навигация и метаданные живут прямо в HTML, поэтому поисковый робот и человек на слабом мобильном соединении получают одну и ту же страницу.

Улучшение, а не зависимость

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

Ресурсы обрабатываются один раз

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

Деплои, которые можно откатить

Каждое изменение фиксируется коммитом. Continuous integration собирает сайт, прогоняет полный набор тестов и только потом публикует его на edge-сети. Если что-то не так, предыдущая версия восстанавливается одним откатом.

Рис. 1. Страница как чертёж: область просмотра, заголовок, главное действие, контрастная цель.

Поиск

Создано, чтобы вас находили

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

  • Сначала структура. Одна страница на один поисковый запрос, заголовки отвечают на вопрос, который ввёл человек, а внутренние ссылки делают иерархию понятной.
  • Порядок в head на каждой странице. Уникальные title и meta description, ровно один canonical-адрес и социальные карточки, которые корректно отображаются, когда кто-то вставляет ссылку в чат.
  • Структурированные данные из видимого контента. Разметка Organization, Service и хлебных крошек создаётся из того же источника, что и сама страница, поэтому данные для поисковика никогда не расходятся с тем, что видит человек.
  • Индекс, понятный машинам. Sitemap-индекс на все локали, robots-файл, который на него указывает, и llms.txt для роботов, которые теперь пересказывают сайты людям.
  • Мгновенная индексация. Каждый деплой в продакшен отправляет изменённые адреса в IndexNow, поэтому поддерживающие его поисковики узнают об изменениях за минуты, а не при следующем обходе.
  • Core Web Vitals заложены изначально. Статическая раздача, хешированные неизменяемые файлы и отсутствие сторонних скриптов дают кратчайший путь к хорошим полевым метрикам, которые сами по себе влияют на ранжирование.
  • Чего мы не обещаем. Никто не может продать вам место в топе. Мы создаём техническую и редакционную основу, которая даёт сильному контенту шанс конкурировать, измеряем результат после запуска и честно говорим, что именно вне нашего контроля.

Доступность

Удобно для всех, а не только для большинства

Доступность одновременно снижает юридические риски, влияет на поиск и говорит о качестве. Мы считаем уровень WCAG 2.2 AA минимумом и проверяем его механически, а не декларируем в буклете.

  • Проверяется на каждой странице, ширине экрана и цветовой схеме. Автоматический аудит проходит по каждой собранной странице на ширине телефона, планшета и десктопа, в светлой и тёмной теме, и любое нарушение останавливает сборку.
  • Настоящая поддержка клавиатуры. Ссылка для перехода к контенту первой в фокусе, видимое кольцо фокуса везде и порядок табуляции, который следует логике страницы.
  • Контраст в обеих темах. Цвета текста и интерфейса проверяются на реальном фоне, в тёмной теме так же строго, как в светлой.
  • Анимация спрашивает разрешения. Всё, что движется, отключается для посетителя, чья система просит меньше анимации, и вместо этого показывается статичный кадр.
  • Семантическая вёрстка. Ориентиры для скринридеров, заголовки по порядку без пропусков уровней, подписанные поля форм и осмысленный alt-текст у каждого изображения.
  • Удобные зоны нажатия. Каждый интерактивный элемент не меньше 24 пикселей, и это проверяется измерением, а не на глаз.
  • И руками по клавиатуре тоже. Автоматика ловит многое, но не всё, поэтому мы ещё сами проходим сайт с клавиатуры и читаем его на маленьких экранах перед запуском.

Языки

Один сайт на всех языках, на которых вы продаёте

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

  • Свой адрес на каждый язык. Каждая страница существует по своему URL на каждом языке, поэтому её можно индексировать, ссылаться на неё и делиться ею отдельно.
  • Правильные сигналы. Hreflang-кластер с x-default на каждой странице и canonical, который указывает на саму страницу, а не на английский оригинал.
  • Направление справа налево заложено в вёрстку. Стили используют логические свойства повсюду, поэтому арабская версия зеркалит всю композицию целиком, а не отдельными заплатками.
  • Написано людьми, а не машиной. Тексты пишутся под каждый язык в голосе бренда. Машинный перевод звучит как машинный перевод, и покупатели это замечают.
  • Честный вес шрифтов. Начертания обрезаются под нужную письменность, а текст с нелатинскими символами использует системный шрифт вместо мегабайтов, отправленных на телефон.
  • Переключение языка без JavaScript. Обычные ссылки между одной и той же страницей на разных языках, без cookie и без угадывания редиректов.

Безопасность и почта

Защищено, и почта доходит

У маркетингового сайта небольшая поверхность атаки, и её стоит держать небольшой, а форма связи бесполезна, если её письма оседают в спаме.

  • Настоящая Content Security Policy. Без разрешения на inline-скрипты: каждый inline-скрипт закреплён хешем, всё остальное отклоняется, и внедрённый скрипт просто не может выполниться.
  • Заголовки транспорта и браузера с первого дня. Strict Transport Security, запрет угадывания типа контента, политика referrer и защита от фрейминга работают уже при первом деплое.
  • Многослойная защита формы. Проверка Turnstile на человечность, honeypot для наивных ботов, проверка скорости заполнения для быстрых, серверная валидация и ограничения длины у каждого поля.
  • Доставляемость проверяется при деплое. Домен отправки проверяется прямо при публикации, поэтому форму, которая перестала доставлять письма, замечаем мы, а не клиент, который так и не дождался ответа.
  • Без трекеров по умолчанию. Ничего стороннего не загружается, пока вы сами этого не попросите, а единственная аналитика, которую мы ставим, работает без cookie, а значит и без баннера согласия.
  • Секреты не попадают в репозиторий. Ключи хранятся в отдельном хранилище секретов и попадают на работающий сайт как переменные окружения, а не как файл в git.

Хостинг и изменения

Кто размещает и обслуживает сайт, кто пишет тексты и как их менять

С момента запуска мы размещаем и обслуживаем сайт за ежемесячную плату: edge-платформу, сертификаты, домен отправки, на который приходит почта с формы, деплои и наблюдение, которое подскажет нам, когда что-то требует внимания. Сайт проектируют и строят те же люди, что потом поддерживают его в работе, поэтому вопрос о странице и вопрос о хостинге попадают в одно и то же место и получают один и тот же ответ.

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

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

Кто пишет тексты

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

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

Изменение контента после запуска

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

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

Начать проект сайта [email protected]

Расскажите, что должен делать сайт и кого он должен убедить. Напишите через форму на сайте или на [email protected], и вам ответит тот, кто будет это строить.