Дизайн — статьи о сайтах
Хостинг — услуга, которую не видно. Клиент платит за место на сервере, но не видит ни площадку, ни людей, которые её обслуживают. Фотографии — один из немногих способов показать, что за тарифами есть реальная инфраструктура. Но у отрасли есть особенность: неудачный кадр может раскрыть лишнее, а случайный стоковый снимок вызовет вопросы. Ниже — как подойти к фотографиям на сайте как к рабочему материалу, а не как к украшению.
Какие снимки нужны хостинг-провайдеру, а какие нет
Полезны те фотографии, которые подтверждают конкретное утверждение на странице:
- общий вид машинного зала или площадки, где размещено оборудование;
- системы, о которых вы пишете в тексте: источники бесперебойного питания, охлаждение, стойки;
- дежурная смена поддержки или инженеры за работой;
- офис и вход — для тех, кому важно, что у компании есть физический адрес.
Не стоит ставить «серверные вообще»: коридор с синей подсветкой, рендер или кадр из банка изображений. Внимательный клиент отличит чужую площадку от вашей, и тогда под сомнение попадут и остальные заявления на сайте. Если своих снимков пока нет, лучше схема или текстовое описание, чем чужая фотография под видом своей.
Что убрать из кадра до публикации
Для хостинга это отдельный пункт процесса. Перед загрузкой кадр проверяют на следующее:
- читаемые наклейки на стойках и серверах: номера, имена клиентов, адреса, серийные номера;
- экраны мониторов и терминалов, где видны панели, IP-адреса, имена хостов;
- пропуска, замки, расположение камер и точек контроля доступа;
- кабельные трассы и схемы коммутации, по которым можно понять устройство сети.
Решение о том, что можно показывать, принимает ответственный за безопасность площадки, а не дизайнер. Сотрудников, попавших в кадр, нужно предупредить и получить их согласие по вашим внутренним правилам. Ещё один момент: при экспорте удаляйте метаданные файла — в них иногда остаются данные камеры и геометка.
Где на странице разместить фотографии
Раздел «Галерея» в конце сайта мало кто открывает. Снимок работает, когда стоит рядом с утверждением, которое он подтверждает. Фото источников питания — в блоке про отказоустойчивость, фото смены — на странице поддержки, общий вид площадки — на странице о дата-центре. На страницах тарифов и заказа декоративные фотографии не нужны: они отвлекают от выбора и замедляют загрузку.
Условный пример: блок «Площадка» на странице о компании
Так может выглядеть фрагмент. Данные в квадратных скобках подставляются только реальные.
- Заголовок: «Где физически размещены ваши сайты».
- Первая фотография: ряд стоек в машинном зале, без читаемых наклеек. Подпись: «Машинный зал, ряд со стойками. Снимок: [месяц и год]».
- Текст рядом: «Питание: [реальная схема ввода и резервирования]. Охлаждение: [реальное решение]. Доступ на площадку: [кто и как допускается]».
- Вторая фотография: оборудование бесперебойного питания. Подпись: «ИБП в отдельном помещении. Снимок: [месяц и год]».
- Ссылка под блоком: на страницу с описанием условий обслуживания, где написано то же самое без маркетинговых оборотов.
Принцип простой: фото, подпись и текст не противоречат друг другу. Если в тексте указано два ввода питания, а на снимке виден только один шкаф, лучше пояснить это в подписи.
Подписи, alt-тексты и имена файлов
Alt-текст описывает то, что видно: «Ряд серверных стоек в машинном зале, вид вдоль прохода». Подпись добавляет то, чего на снимке не видно: что это за помещение, когда снято, что изменилось с тех пор. Имя файла — для порядка в медиатеке, например mashzal-ryad-2.jpg. Перечислять в alt ключевые слова вроде «дешёвый хостинг» не нужно: это ухудшает чтение для людей со скринридерами и ничего не гарантирует в поиске.
Вес и порядок загрузки: фото не должны тормозить сайт
Посетитель сайта хостинга невольно оценивает и скорость самого сайта. Поэтому:
- загружайте несколько размеров одного снимка и подключайте подходящий под экран;
- используйте современные форматы со запасным вариантом JPEG для старых браузеров;
- задавайте ширину и высоту, чтобы текст не прыгал при подгрузке;
- включайте отложенную загрузку для кадров ниже первого экрана, но не для главного;
- ограничьте число снимков на странице: три осмысленных лучше двадцати одинаковых.
Проверочный список перед публикацией
- Снимок сделан на вашей площадке или в вашем офисе, а не взят из банка изображений.
- Рядом есть утверждение, которое он подтверждает.
- В кадре нет читаемых номеров, имён клиентов, экранов и схем.
- Служба безопасности просмотрела кадр, сотрудники согласны.
- Метаданные удалены.
- Есть alt-текст и подпись с датой съёмки.
- Файл подготовлен в нескольких размерах, главный кадр не откладывается при загрузке.
- В календаре стоит пересмотр фотографий после смены оборудования или переезда.
