Новый сайт Международного дискуссионного клуба «Валдай»

• Старт проекта
• Процесс
• Сроки
• Нагрузка и ответственность
• СМИ-составляющая
• Импорт контента
• Социальные функции
• Адаптивность
• Итоги

Старт проекта

Междунаро́дный дискуссио́нный клуб «Валда́й» (англ. Valdai Discussion Club) — экспертно-аналитический центр, который был образован в 2004 году в Великом Новгороде…

Участниками конференций клуба «Валдай» стали многие выдающиеся политики, эксперты, общественные деятели и деятели культуры из России и других государств…

...С участниками ежегодных заседаний клуба «Валдай» с момента его основания традиционно встречается Президент России Владимир Путин.

(Из статьи о клубе «Валдай» на ru.wikipedia.org)

Рис. — скриншот valdaiclub.com

Рецепт победы в важном тендере с 40-страничным описанием требований:

• Два дня работы в режиме Пожар;

• Ведро кофе;

• Знакомство с журналистской терминологией и понятием Think tank;

• Анализ 31 сайта схожей тематики;

• 17 листов с набросками модульных сеток;

• Самоотверженный дизайнер с температурой 39*;

• Билет на самолет;

• Степан Овчинников, готовый «рассказать за идею».

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

После будут 13 вариантов дизайна главной страницы, нагрузочные тестирования, запуск разделов «на бой» ночью, организация «горячей линии» и прочие милые моменты. А в ту пятницу, перед 23 февраля, мы с коллегами просто радовались новому интересному проекту.

Процесс

После решения формальностей, мы приступили к работе по нашему стандартному процессу:

1. Концепция;

2. Дизайн главной страницы;

3. Техническое задание;

4. Дизайн внутренних страниц;

5. Верстка;

6. Производство;

7. Тестирование;

8. …

9. PROFIT!!!

Определенную долю веселья в проектирование вносило то, что сайт ориентирован на зарубежную аудиторию — запутаться во всех этих Opinions, Highlights, Annual Conferences и Chairman’s Speeches было легко.

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

Сроки

Как обычно, все сложности надо было преодолевать стремительно и беспощадно — в ИНТЕРВОЛГЕ ходила шутка, что в случае незапуска сайта всю команду сошлют в Сибирь. Спасать коллектив пришлось программистам.

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

Многие думают, что если один программист справится с работой за пол года, то два сделают эту работу за 3 месяца, а три за 2 месяца. К сожалению, такая математика в реальности работает не так. По нашему опыту, подключение второго разработчика ускоряет производство в 1,5 раза, третьего еще на 25 %.

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

Сразу после запуска сайта «на бой», заказчик попросил добавить отдельный, большой раздел, посвященный предстоящей конференции. Спроектировать, сделать, протестировать, согласовать со всеми участниками и наполнить нужно было всего за неделю. Успели. После этого, коллеги сказали, что мой лимит «срочно, вчера, завтра запуск, ну ребята, время то всего 9 вечера» выработан на год вперед.

Нагрузка и ответственность

Любой большой проект это серьезная ответственность. Ответственность не только за качественный запуск, но и за дальнейшую работу ресурса.

Мы с самого начала понимали, что в момент передачи сайта, все самое интересное только начинается. Готовились основательно:

1. «Композит» наиболее популярных типов страниц;

2. Мощная конфигурация VDS, способная выдержать 50 000 хитов в час;

3. Нагрузочное тестирование — чтобы никаких неожиданностей в день «В», когда несколько десятков тысяч пользователей будут смотреть прямую трансляцию с Президентом России;

4. Ускорение CDN — чтобы сайт открывался быстро по всему миру, в данном проекте это актуально;

5. Горячая линия 24*7. Помимо менеджера проекта, были выбраны три счастливчика наиболее ответственных сотрудника. Мы гарантировали, что как минимум один из этих специалистов всегда сможет принять обращение, определить проблему и скоординировать дальнейшие действия.

6. Резервное копирование — автоматические ежедневные «снимки» виртуальной машины, резервное копирование Битрикса «в облако», «ручное» копирование (по-старинке, на свой сервер).

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

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

Пик нагрузки на графике

СМИ-составляющая

Сайт valdaiclub.com похож на СМИ — частое обновление информации, развитая тематическая и перекрестная навигация, особое внимание расположению материалов на странице.

Мы дали редакторам богатый инструментарий:

1. Темы и Регионы. Помимо основной категории, например Opinions или Books, материал может относиться к Темам и Регионам. Так пользователю легко следить за любыми материалами интересующей его тематики.

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

1. Простые фотографии;

2. Фотогалереи;

3. Видео;

4. Инфографику;

5. Документы — с автоматическим определением размера и цветовым кодированием, в зависимости от типа файла;

6. Связанные материалы;

3. Полная настраиваемость выводимых материалов. Редактор может выбрать, какой материал вывести в любом месте главной страницы или в топе ленты. При этом, все настройки удобно собраны в одном месте.

4. Множественная привязка авторов — один или десять, страна должна знать героев.

Управление этим «самолетом» получилось простым и интуитивно понятным. Но мы все равно составили 40-страничную инструкцию.:)

Рис. — к статье может прикрепить видео и фотоматериалы

Импорт контента

Для valdaiclub.com сохранение контента при переезде на новую версию было обязательным условием. Кому захочется терять более 3000 статей, написанных за 6 лет работы?

Чтобы успешно решить эту задачу, пришлось преодолеть следующие трудности:

1. Коренное изменение структуры — категории на старом и новом сайте не совпадали, нужно было составлять таблицу соответствий;

2. Доступа к БД не было. В админку нас тоже не пустили. Парсили контент напрямую с сайта;

3. Лишние теги и остатки стилей MS Office — при импорте нужно было убрать все лишнее, не повредив, при этом, логическую разбивку текста, списки, курсивы, выделения жирным, ссылки и т.д.;

4. Привязка к авторам — нужно было перенести всех авторов и сохранить привязку статей к ним;

5. Перенести фотоматериалы — сохранить фотографии к статьям, подогнать их под новый формат, не забыть про копирайт.

К счастью, наш руководитель отдела проектов, Алексей Шкарупа, владеет особой магией «импорт откуда угодно чего хотите», и даже обещал рассказать когда-нибудь про нее подробнее в отдельной статье.

Социальные функции

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

1. Кнопки «Поделиться»;

2. Tweet this — позволяет твиттнуть заранее заданный редактором текст;

3. Tweet of the day — твитт дня;

4. Add to blog — генерирует html-код для вставки превью статьи в блог;

5. Send to friend — отправляет краткое описание и ссылку на материал на введенный email;

6. Rate this article — пользователи могут оценивать статьи;

7. Комментарии и лента Твиттера для основной конференции Valdai 2015;

Результат показала статистика — более 10 % посещений составляют переходы из социальных сетей и блогов.

Рис. — статью можно добавить в блог или послать другу на емэйл

Адаптивность

Сайт valdaiclub.com далеко не первый адаптивный проект в нашем портфолио. Нас не останавливал ни калибр проекта, ни его высокая технологичность. Но сложности все равно были.

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

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

1. Мобильные телефоны — менее 768 px по ширине;

2. Планшеты в вертикальном положении — от 768 до 1024 px;

3. Планшеты в горизонтальном положении и небольшие мониторы — от 1024 до 1280 px;

4. Широкоформатные мониторы — более 1280 px;

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

3. Сложность верстки вырастает на порядок. Особую сложность представляет создание разной логики работы элементов для «пальца» и мышки.

4. Объем работы при проведении тестирования также увеличивается на порядок.

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

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

Итоги

Новую версию valdaiclub.com за время Форума «Валдай» посетили десятки тысяч людей. Это были не просто мимолетные визиты. Сайтом активно пользуются — заходят с мобильных устройств и ПК, читают новости и делятся ими с друзьями, знакомятся с будущими событиями и ищут интересные статьи прошлых лет...

Чтобы все эти действия были понятны и просты для пользователя, мы и используем все «заумные» технологии — адаптивность и композит, интеграцию с социальными сетями и парсинг контента, нагрузочное тестирование и AJAX-подгрузку…

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