Создание новостного сайта для международного журнала Extrusion

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

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

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

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

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

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

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

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

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

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

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

• Topstories (лучшие новости по выбору редактора);

• Mostread (наиболее читаемые новости за прошедшую неделю);

• vNews (последние новости);

• Articles(последние статьи);

• Videos (последние видеозаписи).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписка

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

• Первая форма подписки расположена в левой колонке и открывается вручную.

• Вторая – всплывает сама после прочтение определенного количества статей на сайте.

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

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