Проблемы до

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

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

Задачи:

• обновить дизайн;
• сделать редактирование главной страницы и всех модулей как можно более гибкими и доступными для редактора сайта;
• разработать понятную и удобную структуру и навигацию;

Старый сайт

Выглядел следующим образом (главная страница):

Работа над новым сайтом

Прежде всего нами был разработан дизайн главной и второстепенных страниц с учетом пожеланий клиента и современных новостных сайтов.

Логическая структура переработана, публикации разделены на обычные новости, которые имеют свою рубрику, добавлен блок Мнения. Также есть каналы (Россия 1, Россия 24, Россия К), которые сожержат свои передачи, те в свою очередь, имеют выпуски, т.е. новость (она же выпуск) имеет привязку к рубрике, передаче и каналу.

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

Основной новостной блок занимает место сразу под шапкой и виден сразу на мониторе, резиновый. Слева от него блок с текущими новостями, не попавшими ни в один блок на главной странице.

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

Ниже идут блоки с новостями по рубрикам. Блоки меняются местами, переименовываются, удаляются, добавляются. Новости в них добавляются вручную.

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

Формирование главной страницы

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

Такой способ защищает от дублирования новостей в разных блоках и сразу демонстрирует, сколько осталось нераспределенных новостей. Не обязательно рстаскивать все новости по блокам, оставшиеся будут показываться в блоке "Свежее / Популярное", который находится под шапкой, слева от главного блока.

Главная страница в административной части:

Опубликовывание новостей и доступы пользователей

В системе могут быть разные пользователи с разным уровнем доступа. Это:

- журналисты, которые пишут статьи (видят только свои), но не могут опубликовывать их на сайт,

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

Работа с контентом:

Автоматизированный горизонтальный рекламный баннер

Горизонтальный рекламный баннер также резиновый, как и весь сайт. Для того чтобы он визуально не прерывался из-за фиксированных размеров вставояемых .jpg и .gif, в админке можно задать цвет фону, тогда весь блок будет идти вровень с общим блоком. Также есть возможность верстать данный рекламный блок с картинкой, текстом и стрелочкой для перехода: слева встанет картинка, по центру текст и справа интерактивная стрелочка. Условия для данной верстки: картинка менее 500 пикс по ширине, небольшой текст; стрелочка появляется, если при картинке и тексте на мониторе в 1000 пикс для нее остается место.

Создание /редактирование баннера в админке:

Так выглядит сверстанный баннер:

Перейти на сайт