Нестандартные элементы дизайна в программировании сайта

Новостная часть сайта

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

Однако новостная часть задумывалась нестандартной. На сайте требовалось завести три типа записей.

• Новости. У каждой новости должны быть фотография, заголовок, дата, анонс и полный текст.
• Статьи. Как и в новостях, здесь нужны фотография, заголовок, дата, анонс и полный текст, но дополнительно — имя и фотография автора.
• События. Мероприятия могут длиться несколько дней, поэтому здесь уже выводятся две даты: начала и окончания. Неактивные события менее важны, поэтому их необходимо отделять графически.

Дизайн сайта

Для того чтобы сайтом хотелось пользоваться, он должен быть удобным и привлекательным. Наш арт-директор изучил интернет-ресурсы ряда российских и зарубежных СМИ и представил свое решение, которое отличалось от стандартной информационной сетки сайтов, разработанных на Canape CMS.

• Все новости были поданы с большими картинками, чтобы посетители могли удобнее ориентироваться и быстрее находить нужные новости
• Самый свежий материал сделан больше остальных, чтобы собрать больше просмотров, которые он заслуживает (это главная история на сайте в текущий момент)
• На внутренней странице новости мы ограничили ширину блока для удобочитаемости, потому что невозможно не сбиться с нужной строки, когда читаешь сайт, растянутый во всю ширину экрана. так делают абсолютно все СМИ
• Внизу на внутренней странице добавили отзывы, чтобы пользователь не уходил с сайта, а продолжал чтение. Так растет среднее время визита и лояльность аудитории
• В событиях применили цветовое кодирование, которое однозначно и максимально быстро позволяет понять, завершено ли мероприятие или на него еще открыта регистрация
• Добавили изображения авторов, чтобы пользователь почувствовал себя ближе к команде, наполняющей ресурс

Главная страница, десктоп

Список новостей, десктоп

Детальная страница новости, десктоп

Клиент утвердил дизайн сразу же, и мы приступили к реализации.

Особенности программирования нестандартного дизайна

1. Первая новость на главной странице крупнее остальных

Из-за этого нам пришлось запрограммировать дополнительный, более крупный, формат галереи в новостях (под большое фото). Возникшее пустое пространство справа мы заняли формой подписки на рассылку.

2. Каждый тип записей выглядит по-своему

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

Кроме того, нам понадобилось программировать уникальные поля, такие как «фото пользователя» и даты начала-окончания.

3. События могут длиться несколько дней, быть активными и неактивными

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

4. Детальная страница с уникальным дизайном

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

5. Правая колонка с выборкой последних записей.

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

Проект в цифрах