В 2014 году к нам обратилась команда National Geographic Россия. Существующий ресурс старейшего издания о культуре, географии и природе требовал качественного апгрейда. Его главная особенность — наличие огромного количества фотоконтента, одну часть которого генерируют и публикуют пользователи, а другую размещает в статьях редакция NatGeo. Помимо фотографий и иллюстраций ресурс содержит множество статей, авторских тестов и обзоров, а также фотоконкурсов с призами. Большой, высоконагруженный проект.

Ставим задачи

Чтобы увеличить глубину просмотров, а также сделать сайт функциональнее и комфортнее в управлении, нужно было сделать следующее:

• Оптимизировать структуру и доработать новый интерфейс ресурса.
• Реализовать эффективное решение по показу фотографий для статей, фотографий пользователей и фотоконкурсов.
• Перенести проект на новую платформу с сохранением всех данных. Привести их к единообразию.

Разработка

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

Остановимся на этапах разработки подробнее. После получения дизайн-макета новой версии сайта мы взялись за его реализацию. Первое, что предстояло сделать нашей команде, — сформировать структуру данных на сайте, определить основные инфоблоки и их связи. На втором этапе мы занялись вёрсткой и связанной с ней доработкой элементов дизайна. Это продлилось около месяца. Третьим этапом стала, собственно, разработка сайта. Она разделилась на три части, которые определили специфика контента проекта и сроки реализации, установленные клиентом.

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

Было

Стало

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

Фотораздел

Личный кабинет пользователя

Постмодерация

• В третью часть вошли фотоконкурсы и тесты. Фотоконкурсы присутствовали на старой версии сайта, для них тоже был реализован перенос данных. Тесты же разрабатывались в новом формате. Для конкурсов по аналогии с фото-разделом были созданы специальные интерфейсы. В ходе разработки трёх основных частей постепенно сформировалась и главная страница.

Было

Стало

 Было

Стало

Также параллельно с разработкой осуществлялась подготовка продакшн-окружения для размещения на нем нового сайта: сервер был нужным образом сконфигурирован, заранее было установлено необходимое программное обеспечение. Перед релизом над уже загруженном на сервер сайтом было проведено несколько видов тестирования. После чего мы вывели его на прод. Но это, конечно, не всё. Редкий проект обходится без каких-либо доработок. Сейчас мы всё ещё реализуем некоторый функционал и добавляем новые конкурсы. Последний из них —National Geographic Traveler Awards 2015, где проводится голосование за лучшие туристические направления. Знакомьтесь, оценивайте.

Решение в помощь редакторам. В качестве платформы проекта была выбрана CMS «1С-Битрикс», к которой мы дополнительно разработали специальный сервис для модерирования загружаемого пользователями контента. Из-за особой специфики и больших объёмов загружаемой информации мы решили реализовать такой сервис вне административного раздела Битрикса в закрытой от обычных пользователей части сайта. Он позволяет редакторам быстро управлять пользовательским контентом и модерировать фотографии, присылаемые для участия в конкурсах.

За счёт популярной сейчас технологии «бесконечного скроллинга» на главной и внутренних страницах сайта увеличилась глубина просмотров. Помимо этого, в каждой статье появились рекомендации к дальнейшему чтению и подборка самых читаемых материалов. Заодно были размещены интернет-версии свежих номеров журнала и реализован быстрый поиск с помощью поискового движка Sphinx, полноценно поддерживаемого Битриксом. Для того чтобы повысить устойчивость сайта к нагрузкам, мы использовали двойное кэширование.

Как уже отмечалось, «жемчужина» NatGeo — огромная коллекция авторских снимков. Ей мы уделили особое внимание. Чтобы сконцентрировать внимание пользователя на уникальном фотоконтенте, мы представили его в виде простой и функциональной галереи.

Было

Стало

Кадры маркируются: указывается описание и автор. Самые любопытные могут рассмотреть снимки в большем разрешении. Есть возможность комментирования и оценки снимков.

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

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

Что в итоге?

За четыре с небольшим месяца работы нам удалось добиться всех заявленных целей. А самым главным итогом, пожалуй, является то, что мы навели порядок в контенте. Переработка структуры сайта и подачи материалов повысила его информативность, и это привело к увеличению просмотров и посещаемости в два раза. Проведённое тестирование показало, что сейчас сайт способен выдержать более высокую нагрузку. Новый сайт National Geographicуже встретил своих пользователей и получил оценку со стороны экспертов отрасли — стал лауреатом конкурса «Рейтинг Рунета» в номинации «СМИ, издательства». Мы надеемся, что теперь с NatGeo открывать красоту мира станет еще легче и увлекательнее.

Технологии:

• Веб-сервер Nginx с FastCGI-кэшированием.
• PHP-FPM.
• Memcached для кэширования данных сайта и компонентов.
• Redis для хранения пользовательских сессий.
• Sphinx для индексации и полнотекстового поиска по фотографиям и статьям на сайте.
• CMS «1С-Битрикс»: «Управление сайтом», редакция «Бизнес».
• Шаблонизатор Twig для удобной работы с шаблонами компонентов и версткой сайта (используется модуль «Твигрикс» для «1С-Битрикс», разработанный ЦВТ).
• Grunt для автоматизации задач по оптимизации загружаемого контента (CSS, JS).
• Активное использование AJAX для реализации «бесконечного скроллинга» на страницах сайта.

 

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