Extrusion - новостной портал для международного журнала

Разработка Extrusion-info.com была интересной и объемной работой. Оригинальный просмотр журналов, нестандартная структура вывода новостей, 4 языковые версии, адаптивность - рассмотрим все эти особенности более подробно.

Адаптивные Версии Сайта

Верстка сайта сделана под основные используемые сейчас диапазоны разрешений. Если мерить по ширине экрана, то диапазоны получаются следующие:

  • 1) 320px – 375px
  • 2) 375px – 510px
  • 3) 510px – 785px
  • 4) 785px – 1024px
  • 5) 1024px – 1180px
  • 6) 1180px - *

В каждом диапазоне, сайт оптимизирован для наиболее удобного отображения и чтения материалов. В частности, на планшетной и мобильной версиях при первом открытии страницы – сразу отображается полноценное меню сайта. По мере прокрутки, шапка сайта становится «прилипшей» и появляется мобильное меню (по-другому бургер-меню).

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

На телефонной версии, на главной странице модуль с последними журналами превращается в слайдер, который можно перелистывать смахиванием (свайпом).

Раздел новостей экструзии и сопутствующих областей

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

В итоге, на главной странице размещаем модуль с последними журналами каждого языка – английский, немецкий, русский и китайский (мандаринский).

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

  • Topstories (лучшие новости по выбору редактора);
  • Mostread (наиболее читаемые новости за прошедшую неделю);
  • News (последние новости);
  • Articles(последние статьи);
  • Videos (последние видеозаписи).

Отдельно отметим модуль «Mostread». Что бы обеспечить вывод наиболее читаемых новостей за неделю, создали отдельный cron-скрипт, который находит в базе новостные записи, и высчитывает у какой из них количество просмотров выросло больше всего за прошедшую неделю. Разумеется, они фильтруется на предмет пересечения с «Topstories» и другими блоками.

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

topstories

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

tags
tags

Раздел журналов

VMVerlagGmbH выпускает 4 журнала: Extrusion, ExtrusionInternational, Extrusion Russia Edition и Extrusion Asia Edition. Под каждый журнал создан отдельный раздел с возможностью просмотра старых журналов – просмотром онлайн через специальную «читалку» или непосредственно скачиванием pdf-файла с журналом.

zhurnalzhurnal

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

zhurnal_pdf

Баннерная ротация

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

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

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

rotaciy

Языковые версии

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

Руководствуясь нашим опытом, языковые версии лучше всего делать с отдельными админ-панелями, т.к. очень часто бывает, что версии сайта развиваются в разных направлениях, да и сами администраторы любят построить административную панель «под себя».

Для удобства посетителей, на сайте организовано автоматическое определение языка пользователя по статистической информации из его браузера. Благодаря ей, посетитель сразу попадает на версию сайта со знакомым ему языком.

Разумеется, на сайте присутствует ручной выбор языка – сайт запоминает выбор пользователя.

lang

Подписка

На сайте организована система сбора почтовых и email-адресов посетителей, интересующихся экструзией и сопутствующими областями знаний.

  • Первая форма подписки расположена в левой колонке и открывается вручную.
  • Вторая – всплывает сама после прочтение определенного количества статей на сайте.
  • Третья – на отдельной странице, где расположена не только подписка на email-рассылку, но и подписка на печатную версию журнала.

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

podpiskapodpiska

Поделиться:
Автор:  Михаил Золотарев
Категория:  Кейсы


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

Имя*
Ваш E-mail*

Возврат к списку