1
Перш ніж зʼявитися на світ, кожне нове медіа має відповісти на питання, яке вирішує все. Звучить це питання так: скільки редакція випускатиме матеріалів за добу?
Кількість новин та репортажів визначає роботу сайту від і до: дизайн, число співробітників, структуру редакції, її бюджет і механізм адмінки. Ми знали, що «Бабель» має оновлюватися не менше 50 разів на день і виходити двома мовами одночасно, українською та російською. Крім того, було очевидно, що за мовою розділяться не тільки читачі, але й кореспонденти: хтось захоче писати однією мовою, хтось іншою.
Дуже швидко (після кількох тригодинних нарад) нам стало зрозуміло, що адмінка «Бабеля» буде дволикою: у неї будуть два однакові інтерфейси, для роботи на двох мовах. При цьому адмінка повинна швидко перемикатися між версіями, зберігати чернетки в двох версіях паралельно, сама перекладати українську версію матеріалу на російську або навпаки.
«Бабель»
Останнє завдання вирішили просто: «Бабель» використовує сервіс Яндекс.Перекладач. Все інше вибудовування адмінки з нуля далося нам трошки складніше.
2
Звичайно, адмінку не обовʼязково робити з нуля, можна купити і готову — але це те саме, що завʼязувати шнурки в чужих, на розмір більших рукавичках. Крім того, медіа з покупною адмінкою не матиме своєї яскраво вираженої індивідуальності. Це добре помітно по сайтах, які використовують WordPress: всі вони різні, але чимось невловимо схожі один на одного.
Спочатку «Бабель» рівнявся на «Медузу» — тому ми уважно вивчили всі матеріали про адмінку «Медузи», які вона сама опублікувала — і багато в них перейняли. На старті наші інтерфейси в чомусь були схожі, у чомусь зовсім ідентичні. При цьому нам було зрозуміло, що ми все одно будемо відрізнятися: у «Бабеля» та «Медузи» різні редакційні політики та різні формати, ми інакше сфокусовані, у нас працюють інші люди — і, врешті-решт, наша адмінка зеволюціонує до невпізнання. Так і вийшло.
«Бабель»
У адмінки «Бабеля», як і будь-якої іншої адмінки, є цикл життя. Спочатку наша адмінка виглядала «голо», її функціонал був мінімальний (зверстав — випустив у світ) і новий співробітник міг розібратися в ній за пів години. Але апетити редакторів і дизайнерів росли, ideil обвішували адмінку індикаторами, маркерами для літературних редакторів, полями для SEO-заголовків і заголовків для соцмереж. Із часом інтерфейс став таким складним, що для роботи з ним потрібно памʼятати два десятки неочевидних прийомчиків, а новачкові доводиться освоювати його тиждень-два.
Рано чи пізно адмінка стає такою заплутаною, що не спрощує, а ускладнює роботу — і її інтерфейс доводиться проєктувати заново. «Бабелю» до цієї стадії ще далеко, але у відділу дизайну вже сверблять руки.
Ось як виглядав «Бабель», коли ніякого «Бабеля» ще не було: ескіз, прототип, перша версія головної сторінки. Айдентика і дизайн — Антон Колотило.
3
Найбільшою кровʼю даються в розробці найпростіші елементи.
Неодмінно виходить так, що нічого простого в них немає, і щоб придумати якусь одну банальну кнопку, потрібно спочатку намалювати дерево користувацьких рішень, написати редакційну політику і закрити десяток вакансій.
На запуску «Бабеля» ця сумна обставина проявилася найяскравіше, коли ми придумували кнопки, необхідні, щоб зберегти, опублікувати і зняти матеріал. Як вони повинні виглядати? Може зробити «селекторний дроп-даун»? Або поставити поруч, одну за одною? У якому порядку? Що на них написати? Дозволити публікувати будь-кому з авторів або тільки випусковому редактору? Дозволити знімати публікацію будь-кому з авторів або тільки головреду? А якщо автори будуть промахуватися по кнопках?
Всі ці питання зайняли кілька двогодинних нарад, під час яких дорослі, добре виховані люди іноді переходили на крик.
Ось як зʼявляється матеріал на «Бабелі»: кореспондент створює нову публікацію, заповнює службові поля, придумує заголовок, пише текст, довантажує картинки, верстає, перекладає на російську (або українську), вичитує — і після цього публікує. Все це може забрати десять хвилин, а може й кілька годин, тому автор зберігається десятки разів. Зрештою, будь-який опублікований матеріал він може зняти з сайту (якщо дозволив головний редактор).
На скріншоті — сторінка нової публікації в «адмінці» «Бабеля». Над інтерфейсом працювала перший арт-директор видання Дарья Свєтлова.
«Бабель»
Під час роботи кореспонденти приймають сотні дрібних рішень, і інтерфейс адмінки повинен їм, як мінімум, не заважати, а краще — допомагати. Що допомагає, а що заважає, може достеменно показати тільки накопичений досвід. Проблема полягала в тому, що ми придумували адмінку для медіа, якого ще не існувало — і власного користувацького досвіду ми не мали. Всі наші хибні вигадки залишилися б у коді якщо не назавжди, то надовго. Страшніше за все було помилитися з трьома найважливішими кнопками.
Врешті-решт, переміг підхід «мінімум кліків»: інтерфейс адмінки влаштований так, що будь-яку дію можливо виконати якомога менше клікаючи мишкою або тачпадом. Ідею «селекторного дроп-дауну» поховали. Кнопки поставили поруч, розфарбували в кольори світлофора — ніхто не промахується.
4
«Бабель» виглядає як «Бабель», тому що наші автори можуть верстати свої матеріали (майже) як завгодно — для цього в адмінці є кілька десятків дрібних і великих зручностей.
Скажімо, адмінка «Бабеля» дозволяє написати текст в Google.doc, розставити лінки, жирність і курсиви, а потім скопіювати його в адмінку — форматування збережеться. До будь-якого слова або фрази можна «підвісити» інформаційну довідку — в них ми ховаємо всю технічну інформацію.
Але головне — автор будь-якої публікації може створити понад десяток різних підверсток: просту текстову підверстку, текст із фотографією, фотографію з текстом, відео з текстом, цифру з текстом, цитату, мініголосувалку, голосувалку з фотографіями, таймлайн, нумерований список і буллет-список. Читати великі матеріали з ними простіше і веселіше.
Певна річ, час від часу кореспонденти і новинарі забувають використовувати всі ці багатства. Тоді проджект-менеджер Стас Шулик бігає по відділах і всім нагадує, що розробники ideil витратили на підверстки сотні годин, і що ігнорувати їх працю просто негарно.
Усі беруться вигадувати підверстки, потім інерція перемагає, підверстки з публікацій зникають, і цикл повторюється знову.
«Бабель»
5
Адмінка позбавляє редакторів «Бабеля» безлічі страждань. Найпростіше працювати випусковому редакторові: йому не потрібно ламати голову, чим заповнити головну сторінку сайту, якщо в країні нічого не відбувається.
Звісно, важко уявити, що в Україні бувають дні, коли нічого не відбувається — зазвичай навпаки, відбувається занадто багато всього одночасно: то чиновник навмисно обдурить своїх громадян, то під парламентом спалять міліцейський бобик, то колишній прокурор ГПУ лізе в американську політику. І все ж дні затишшя бувають. За щільністю і важливістю новин вихідні відрізняються від буднів, день відрізняється від ночі, а літо відрізняється від зими — і головна сторінка медіа повинна це відображати.
Тому головну сторінку «Бабеля» ми переверстуємо три-чотири рази на день. Вона складається з лінійок, лінійки складаються з плиток, і ми можемо збирати цей конструктор, як захочемо: можемо поставити десять лінійок, а можемо сто десять. В одній лінійці може бути одна плитка, а може бути дві, три або чотири, лінійка може бути стандартною або на весь екран.
Зрештою, кілька лінійок можна запхнути в лінійку-карусель: тоді на головній зʼявиться тематичний блок, куди можна зібрати, наприклад, всю «Користь» на тему коронавіруса.
З усім цим багатством доводиться працювати вручну. Спочатку випускаючий редактор конструює головну сторінку з лінійок. Потім закріплює в плитках матеріали в потрібному йому порядку. Включає нову верстку. Перевіряє, як вийшло. Лається. Переробляє. І так три-чотири рази на день.
«Бабель»
Звичайно, верстку головної сторінки ми хотіли автоматизувати. Первісна ідея була такою: ми зробимо десяток готових шаблонів — для вихідних і для буднів, для «порожніх» днів до кінця світу, для дня і для ночі, для грішного і для праведного — і будемо просто перемикати готові шаблони.
Але, як зазвичай, на практиці все працює зовсім не так, як ми задумували від самого початку. Структуру готових шаблонів випускаючі тасують на льоту. Вони роблять клони (для цього потрібно натиснути всього одну кнопку), потім клони клонів, потім клони клонів клонів. В результаті бібліотека шаблонів являє собою місиво, у якому ніхто нічого не розуміє — крім двох-трьох людей, які це місиво влаштували.
Але всі задоволені.
Найперший стек завдань з розробки адмінки «Бабеля».
«Бабель»
6
Будь-яка адмінка має кілька дрібних зручних сервісів, над якими розробники довго працювали, редакція довго чекала — і, в результаті, ними ніхто не користується.
Ось, наприклад, вріз: одне-два речення з графічним акцентом. Врізи у «Бабеля» є, але ними ніхто не користується — виявилося, що вони просто не потрібні.
Але є в «Бабеля» сервіс, який люблять усі і користуються ним всі без винятку: це власний «скорочувач» доменних імен. Будь-який громіздкий лінк на половину екрану ми можемо скоротити до ввічливого і акуратного: https://baa.nu/ulWW5W
Звідки взялося доменне імʼя .nu?
Воно належить острівній державі Ніуе, розташований у південній частині Тихого океану, на схід від островів Тонга. Три мільйони років тому Ніуе був вулканом, але потім охолов. На острові живуть менше людей, ніж у деяких київських ЖК, його аеропорт обнесений деревʼяним парканчиком у половину людського зросту, а вийти на льотне поле можна через деревʼяну хвіртку. На острові немає злочинності, ВІЛ, корупції і коронавірусу. Найбільша подія там сталося девʼять років тому — над островом вночі вибухнув метеорит, ніхто не постраждав.
Редакція «Бабеля» хотіла б зустріти старість саме там.
Редакція «Бабеля» в повному поточному складі (без літературних редакторів).
Karolina Uskakovych / «Бабель»