Дизайн — статьи о сайтах
У небольшого отеля обычно мало фотографий, и каждая из них работает на решение гостя. Если снимки свалены в одну галерею без порядка, человек не поймёт, какой номер он увидит и что находится за окном. Тогда он пойдёт сравнивать отели на агрегаторах. Ниже о том, как распределить кадры по сайту так, чтобы они отвечали на вопросы гостя.
Какие вопросы гость пытается решить по фото
Посетитель смотрит снимки, чтобы проверить несколько вещей: какой именно будет номер, чисто ли в нём, как выглядит вход и территория, далеко ли до центра или моря, что с завтраком. Отсюда набор обязательных кадров:
- фасад и вход, снятые так, как гость увидит их при приезде;
- каждый тип номера: общий план, кровать, ванная комната, вид из окна;
- общие зоны: ресепшен, зал для завтрака, двор или терраса, парковка;
- окружение: улица, ближайшие ориентиры.
Отдельно подумайте о кадрах, которые снимать неудобно, но которые снимают сомнения: вид из окна в реальную погоду, лестница, если лифта нет.
Общая галерея или фото внутри страниц: что выбрать
Одна большая галерея «Фото» удобна владельцу, но неудобна гостю: он видит интерьеры и не понимает, к какому номеру они относятся. Надёжнее хранить снимки там, где они нужны для решения:
- на странице каждого номера есть своя галерея с его кадрами;
- на главной стоит короткая подборка из 5–6 лучших снимков, по одному на смысловую группу;
- на странице «Об отеле» или «Территория» показаны общие зоны и окрестности;
- общая галерея, если она нужна, разбита на вкладки по разделам.
Условный пример: страница номера «Стандарт с видом во двор»
Так может выглядеть порядок блоков на странице. Название и данные вымышлены и показывают только структуру.
- Первый экран: главная фотография номера целиком, рядом название, площадь, число гостей, тип кроватей, кнопка проверки дат.
- Под ней лента из 5–7 миниатюр в фиксированном порядке: общий план с порога, кровать, рабочая зона, ванная, вид из окна, деталь (чайная зона или шкаф).
- Рядом со снимком ванной подпись: «Душевая кабина, фен, набор полотенец».
- У снимка вида из окна подпись: «Окна выходят во двор, парковка с другой стороны здания».
- Ниже текстовый список удобств, чтобы информация не зависела от картинок.
Такой порядок повторяется на всех страницах номеров, и гость легко сравнивает варианты, переключаясь между ними.
Подписи, названия файлов и alt-тексты
Подпись нужна там, где фото не отвечает на вопрос само: что входит в комнату, что за окном, с какой стороны снимали. Не пишите «Уютный номер» — это оценка, а не информация. Лучше «Двуспальная кровать 160 см, окно на север».
В атрибуте alt опишите, что изображено, одной короткой фразой: «Ванная комната стандартного номера с душевой кабиной». Его читают программы экранного доступа, и он отображается, если картинка не загрузилась. Названия файлов тоже лучше делать понятными: standart-vanna.jpg вместо IMG_4082.jpg. Это удобно и вам при работе с материалами.
Вес и размер файлов: чтобы страница открывалась на телефоне
Многие гости смотрят отель с телефона, часто на мобильном интернете. Снимок прямо с камеры весит несколько мегабайт, и страница с десятком таких файлов будет грузиться долго. Что делать:
- готовить копии нужного размера: для ленты миниатюр маленькие, для просмотра крупно — до ширины около 2000 пикселей;
- сжимать JPEG так, чтобы заметных артефактов не было, проверяя на светлых стенах и тенях;
- просить разработчика подгружать крупные версии только при открытии снимка, а на экране показывать уменьшенные;
- использовать набор размеров (атрибут srcset), чтобы телефон получал файл поменьше.
Проверьте, что листание пальцем в просмотрщике работает, а кнопка закрытия достаточно большая.
Проверочный список перед публикацией
- У каждого типа номера есть общий план, кровать, ванная и вид из окна.
- Порядок кадров одинаков на всех страницах номеров.
- Фото соответствует реальному состоянию: мебель, текстиль, ремонт.
- Есть кадры входа и пути от остановки или парковки.
- У значимых снимков есть конкретные подписи, у всех — alt.
- Файлы названы понятно, лишние дубли удалены.
- Страница номера открывается на телефоне без долгого ожидания.
- Важные условия (удобства, вид, этаж) написаны текстом, а не только показаны на фото.
- Раз в сезон снимки сверяют с реальностью и заменяют устаревшие.
Если у вас пока мало материала, лучше снять недостающие кадры по этому списку, чем добавлять случайные снимки для количества.
