Головний розробник сайту Kremlin.ru Артем Геллер про створення сервісу та роботі з адміністрацією президента

Генеральний директор студії lab.AG Артем Геллер, який працював над новою версією президентського сайту Kremlin.ru, дав інтерв'ю виданню Smashing Magazine — у ньому він розповів про розробку ресурсу, технічних аспектах роботи з адміністрацією президента, створення адаптивного інтерфейсу сайту, а також розкрив деякі деталі проекту.

image

Особливості роботи з державними структурами
Державний замовник такий же, як комерційний, іноді навіть краще. Адміністрація президента довіряла нам як проектувальникам і дизайнерам, її представники хотіли зробити сайт Кремля краще. Мабуть, працювати з ними було все одно, що з кращим з комерційних замовників.

Але історія почалася давно. Приблизно в 2008 році прес-служба адміністрації президента розіслала компаніям, які займалися інформаційним дизайном в вебі, пропозицію зробити сайт президента. У мене в той момент було багато часу, і я зробив свій варіант — продуманий і об'ємний.

Час від часу мені дзвонили і повідомляли, що ми потрапили у двадцятку, потім в десятку. Але в якийсь момент мені зателефонували і сказали: «Приходьте в Кремль». Там з трьох кращих компаній вибрали мою.

Я відповідав за подієву і довідкову частину порталу Kremlin.ru, який запустили у 2009 році. Це був перший «крутий» державний сайт, який отримав гарні відгуки від професійного співтовариства, включаючи відвідувачів «Хабрахабра». Потім мене покликали робити сайт уряду (government.ru), і він був другим знаковим для російського e-gov.

Коли я зробив перший сайт в 2009 році, то 80 відсотків наступних держсайтів підлаштовувалися під його стиль. Те ж саме я побачив після створення government.ru і вже тоді почав закладати можливість стандартизації. Займаючись розробкою одного, думаєш про всі ресурси, які будуть собі це копіювати.

Створюючи новий сайті, ми тримали в голові весь російський e-government. Не люблю термін «урядові сайти». Ми хотіли створити еталон.

Ми постійно були в прямому контакті з прес-службою президента. Та й сам президент у створенні сайту брав участь на ключових етапах розробки.

Мені завжди подобалися компетентні люди, які вміють приймати рішення. Саме з такою командою на стороні замовника нам довелося працювати. Рідкісний клієнт. Ми побачили чиновників, які в п'ятницю після десяти вечора сиділи і обговорювали з нами, «як зробити наш сайт краще», хоча своїх підлеглих вже відпустили додому. Вони працювали з нами разом з самого початку і до останнього дня перед запуском. Вони довіряли нашу думку. Ми перепробували і перевірили кожне рішення.

Минула версія сайту славно прослужила 6-7 років. Протягом цього часу ми структурували і вирішували все нові і нові завдання, що виходять з запитів користувачів і потреб прес-служби. У нас було достатньо часу, щоб зрозуміти пріоритети мінливої аудиторії. Поступово виникло безліч ідей, здатних радикально поліпшити UX для всіх груп користувачів, з'явилися завдання, які вимагали відновити нашу CMS, змінилася платформа — «залізна» складова ресурсу.

Технології, уподобання аудиторії змінюються досить швидко. Так що цілком природно, що сайт президента повинен відповідати всім потребам часу. Все це вплинуло на створення абсолютно нового ресурсу, і я б не називав це редизайном.

Зараз робота над сайтом триває.

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

Проводилися інтерв'ю та аналіз цільових аудиторій. У нашому випадку це В першу чергу (40%) журналісти — з-за інформаційною, а не сервісної специфіки. Саме цей ресурс часто виявляється цитованим джерелом важливої інформації, пов'язаної з діяльністю президента.br/>

Для них ми зробили дуже багато. Як один із сотні маленьких прикладів — посилання на матеріал без стилів, звідки просто копіювати текст.

Це дуже зручно, так як при стандартному Ctrl(Cmd)+A, Ctrl(Cmd)+C, Ctrl(Cmd)+V ми дозволяємо вставляти матеріал з буфера без будь-яких стилів. Для цього ми помістили його в text area. Це дозволяє не змінювати форматування у своєму редакторі після вставки.

Другий сегмент — це громадяни Росії та зарубіжна аудиторія (50%). Найбільша і найважливіша частина, про яку ми нескінченно думали від старту створення концепції до найдрібнішої деталі. Скажу по секрету, всередині нашої команди є негласний гасло, яке ми запозичили у хлопців, що створюють gov.uk: User needs, not government needs».

Держава усвідомлює проблеми, які сама генерує; відбувся переломний момент, тепер простіше — сформувався запит на якісний за всіма критеріями продукт. Так, з нами складно. Так, є проблеми бюрократії та розуміння процесів.

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

Чиновники (все більше молоді сьогодні) зовсім інакше формулюють завдання: піклуючись про інтереси аудиторії, замінюють вкусовщину на функціоналізм. Раніше про це піднімав мова дизайнер, тепер на цьому ставлять акцент насамперед самі замовники.

Президентом само введений складний KPI — задоволеність користувачів інтернет-сервісів, послугами на 90% до грудня 2015 року, а до грудня 2020 року — на 95%. Важко зрозуміти, як досягти таких результатів, але важливо зовсім інше: KPI є, формулювання існує, над виконанням будуть працювати.

Третя група професійної аудиторії — чиновники зі своїми завданнями і специфікою, 10%. У більшості випадків тут ми вирішуємо питання доступності до оперативно яку наповнювали базі нормативних документів, доручень, ключових завдань, які ставить президент і його адміністрація.

image
Ми не ставили перед собою завдання розібратися в інформаційній структурі минулого ресурсу (ми її вже створили і просто підтримували), але хотіли переосмислити наші підходи до представлення різних типів даних з урахуванням потенційного контексту.

Ми постаралися максимально простій формі об'єднати кілька великих президентських ресурсів в один. Наприклад, раніше існував окремий сайт «Держава», на якому зберігалися матеріали про інститут президентства та інформація про діяльність державних структур, консультативних і дорадчих органів при президенті. Тепер всі ці матеріали можна знайти на Kremlin.ru у розділі «Структура». Та й від архівів ми позбулися. Тепер всі матеріали, починаючи з січня 2000 року, доступні на цьому ресурсі.


Для нас було важливо відокремити інформацію про події (новинний та інший контент) від «статичною» — наприклад, навігаційних елементів. У той же час було необхідно мінімізувати кількість інформаційного шуму. Одна з основних ідей — це лінійність контенту, інформація скрізь виводиться в одну колонку. В результаті у нас вийшла зрозуміла не перевантажена структура. Про наявність довідкової офіційної інформації ми підказуємо лише в необхідному контексті.

Kremlin.ru не є ЗМІ в традиційному або сучасному його розумінні, існує своя значна специфіка, зокрема, не треба відкручувати рекламу. Те ж саме з показниками «глибина перегляду» або «часом знаходження на ресурсі»: для нас позитивність цих показників часто є негативним фактором, що позначає, що людина не зміг отримати максимально швидко ту інформацію, яку шукав.

У нас був файл зі структурою, який листувався аж до запуску проекту. Зокрема, нам необхідно було підібрати найбільш точні, лаконічні формулювання. Ми не можемо дозволити собі подвійне трактування текстів на державному ресурсі настільки великий інформаційно-політичної значущості.

Сайт наповнений речами в дусі «Little big details». Думаю, вам буде цікаво їх вивчити. Всі вони несуть конкретну задачу. Ми можемо пояснити необхідність використання на сайті кожного блоку, зв'язку, тексту, пікселя і микроанимации — на Kremlin.ru немає нічого зайвого. За всім стоїть логіка, адже «Бог в деталях».

Якщо б ми зробили цей проект «середнім» — це був би справжній провал. Якщо б ми цей проект зробили «погано» — це була б катастрофа. У разі, якщо проект зроблений «дуже добре», то єдине питання, яке потенційно може виникнути у професійного співтовариства і медіа — це «скільки на нього витрачено грошей?» Ми не боїмося таких питань, тому що можемо розповісти, на що пішов кожен рубль.

image
Бюджет проекту
Вартість оновленого сайту президента склала 20 млн рублів (близько $330 тисяч). У вартість увійшли як розробка нової версії сайту, так і підтримка старої. У разі президентського сайту, — це ще й забезпечення безпеки. Крім того, частина цих грошей пішла на створення англомовної версії сайту і версії для дітей.

Особливості, пов'язані з роботою над медіафайлами
Значна і найбільш важлива частка користувачів нашого ресурсу — це співробітники інформаційних агентств, різних російських і міжнародних ЗМІ. За відгуками, вони люблять наш ресурс за те, що ми ніколи не забували і завжди намагалися створювати корисні та зручні рішення для професійної аудиторії.

Ми доопрацювали введене шість років тому поняття «Працювати з текстом», яке є зручним інструментом навігації по довгих стенограм. Напівавтоматично розмічаємо відео, теми, особи, які представлені в матеріалі, в рази прискорюючи пошук інформації. Робимо великий масив тексту зрозумілим і інтерактивним.

image
Днями На сайті з'явиться можливість дивитися відео з субтитрами. Завдяки цьому вміст стане доступний не тільки англомовним користувачам, але і людям з обмеженими можливостями.

З технічного боку ми не стали винаходити велосипед, вибрали тільки один формат для відео — MP4, і одні формат для аудіо — MP3. Нам було необхідно зробити так, щоб наш сайт ефективно працював на максимальній кількості браузерів і пристроїв. Ми відразу вирішили, що будемо працювати з HTML5 video/audio, так як більшість сучасних браузерів підтримують обрані нами формати, а для давніх інтернет-оглядачів залишили Flash-плеєр.

Писати свій плеєр означало натикатися на ті ж граблі, що і більшість, тому ми зупинилися на бібліотеці MediaElement.js. При цьому дописали підтримку деяких плагінів, які можуть бути встановлені у користувача, таких як QuickTime, Windows Media Player, VLC. Врахували кілька питань відображення медіа без використання JavaScript і поекспериментували зі стилізацією вбудованого плеєра Google Chrome.

Ми відображаємо зображення для відео, якщо браузер не підтримує HTML video, а також не відображаємо нашу велику кнопку Play, якщо і JS відключений або не працює, так як вона перекриває взаємодія з елементом video.

Для Chrome ми отримали непоганий результат застосування стилів до Shadow DOM, схожий з JS-плеєром:

image
Ми намагаємося стежити за нововведеннями для браузерних плеєрів і відповідно змінювати нашу реалізацію.

Для здійснення переходів при відображенні матеріалу з відео ми написали редактор для розмітки тексту і автоматизували плеєр для переходу по розмічених областях.

Десктоп або mobile
Державний ресурс повинен бути максимально доступний громадянам. Це один з основних ультимативних принципів. На великому ресурсі не має сенсу ганятися за трендами, так як ми проектуємо майбутнє, актуальний ресурс на 5-6 років вперед. За цей час індустрія встигне відфільтрувати все лушпиння, залишивши тільки значуще.

Ми не виходили з mobile-first ідеології. У нас було достатньо часу для того, щоб окремо підійти до всіх типів версій відображення проекту, приділили достатньо ресурсів і часу кожної, щоб Kremlin.ru був зручний на всіх типах пристроїв з різними способами взаємодії. На всіх форматах пристроїв ми постаралися максимально залишити рідні рішення. Весь контент і функціональність «великий десктопної версії доступні на «мобільного», «планшетній», «ноутбучної».

Безумовно, ми позбулися на мобільній версії від деяких інтерфейсних рішень, якими просто неможливо користуватися з телефону (робота зі стенограмою), але якщо ми маємо справу з великим форматом — як планшет, це специфічний, професійний інструмент вже доступний. Весь контент однозначно доступний на всіх пристроях. Функціональність проконтролювати складніше, але ми концептуально старалися, щоб завжди підтримувалися усі версії.

image
Я можу більш докладно розповісти про принципи адаптивності Kremlin.ru, так як це окремий і цікаве питання.

Фронтенд і бекенд
BEM («блок, елемент, модифікатор», " методологія створення веб-додатків — прим. ред.) — правильний шлях розвитку веб-розробки, недарма набирають обертів такі проекти, як ReactJS і WebComponents.

В процесі розробки у нас сформувався свій «варіант» BEM, якась варіація концепції. Ми поділяли JS і CSS-код компонентів в окремі файли, при проектуванні HTML-шаблонів виходили з зручності повторного використання без прив'язки до конкретних функціональних елементів.

Спеціально під наші потреби ми написали обробник запитів і менеджер відображення, а також систему якорів для більш плавної анімації.

Всі ці інструменти обслуговують responsible-сітку з двома незалежними колонками і виділеним багаторівневим меню в хедері, футером і бічних меню. Тут дуже багато корнер-кейсів для кожного розміру, і їх доводиться програмувати індивідуально (обробка і анімація переходів між сторінками, зміни розмірів вікон, відображення та приховання мобільного меню і так далі).

Були і специфічні проблеми для поточного часу. Наприклад, відмову від Flash — ми максимально намагаємося підтримувати HTML5 video, але зберегли підтримку відображення відео через Flash і Silverlight для старих браузерів.

Так само ми використовували сучасні способи пре — і пост-процесингу CSS і JavaScript, і це дуже сильно нам допомагало:

  • CSS: SASS + Compass, з автоматичною генерацією PNG. Дуже сильно спрощує роботу з media queries і CSS-анімації і збільшує повторної прийнятності у використанні коду в порівнянні із звичайним CSS.
  • JS: ми не використовували препроцесорів зразок CoffieScript або TypeScript. Ми тільки автоматизували збір скриптів, стиснення і упаковку в один файл.
  • Автоматизація складання через завдання Grunt.
  • Збірка повішена на хуки репозиторію, і на момент деплоя в репозиторії завжди лежить актуальна версія всіх генеруються файлів. Ніякого людського чинника в цьому процесі.
Є одне важливе правило. Запрошуйте хороших інженерів і давайте їм час — це насправді не складно.

Особливості роботи з навігацією і анімаціями

Навігація по сайту працює швидше завдяки тому, що завантаження JavaScript і CSS відбувається один раз, крім того, ми використовуємо History API. Перед запуском ми виявили найбільш повільні місця як у клієнта, так і в серверному коді, оптимізували їх, включили кешування скрізь, де тільки можливо.

Гладкість анімації досягається в основному за рахунок використання CSS, але не тільки. Ми провели оптимізацію на рівні контекстів відтворення. Проводили тестування часу відгуку в анімації, це дуже важливо для плавності відображення елементів інтерфейсів, було дуже багато проблем з підтримкою застарілих, але ще використовуваних браузерів.

Рекомендуємо іншим проектам приділяти увагу таким деталям, саме ці дрібниці роблять сайт дійсно зручним і приємним в експлуатації.

Особливості розробки адаптивного інтерфейсу
На даному витку еволюції проектування і розробки значною мірою сформувалося базове розуміння адаптивності. Ми ще не дочекалися AiUi — програмно генеруються інтерфейсів, як результат обробки автоматично зібраних даних. Де спочатку інтерфейсу не існує і є тільки інформація на вході, з допомогою якої будуються об'єкти, сутність, акценти, розміри, кольори і так далі. Доводиться миритися з реальністю і самим проводити цю роботу не персоналізовано, але для груп.

Щоб зрозуміти результат, необхідно розуміти декілька важливих ввідних: пропорції змінюються. Старі 4:3 давно витісняються прагненням до 16:9, розуміючи цю ситуацію даність у нас відкрилася можливість думати і в цьому напрямку. Пристроїв значно більше. «Мобільний» і «десктоп» — це формати подання, які виділяють більшість розробників адаптивних ресурсів. У нашому випадку ми виділили не два, а чотири базових види відображення:

  • мобільний телефон;
  • планшет (вертикальний і горизонтальний);
  • середньоформатний ноутбук або екран — 15-17 дюймів;
  • великий десктоп — 17-27 дюймів.
Саме ці чотири формату з їх популярними розмірами вікна браузера і лягли в основу адаптивного ресурсу.

image
За нашою статистикою, 22% користувачів заходять на ресурс з мобільних пристроїв і бачать адаптований під них сайт, у 54% низький дозвіл — вони бачать сайт посередині або з маленьким відступом праворуч. Ще у 24% великі дозволу по горизонталі.

Користувацька статистика
Браузери:
Google Chrome — 30,4%;
Firefox — 15,9%;
Internet Explorer — 12,5%;
  • MSIE 11 — 5,74%;
  • MSIE 8 — 2,83%;

  • MSIE 9 — 2,18%;
  • MSIE 10 — 1,41%;
  • MSIE 7 — 0,21%;
  • MSIE 6 — 0,033%;
  • Opera — 11,2%;
Mobile Safari — 8,34%;
Yandex.Browser — 7,59%;
ChromeMobile — 5,06%;
Android Browser — 2,95%;
Safari — 1,67%;
Opera Mini — 1%.
Географія російськомовної версії ресурсу:

Росія — 77,9%;
Україна — 7,12%;
Німеччина — 1,29%;
США — 1,29%;
Білорусь — 1,12%;
Казахстан — 1,04%;
Китай — 0,58%;
Великобританія — 0,57%;
Молдова — 0,42%;
Узбекистан — 0,39%.
Географія англомовної версії ресурсу:

США — 20,1%;
Росія — 8,22%;
Німеччина — 7,72%;
Великобританія — 6,13%;
Канада — 4,18%;
Франція — 3,88%;
Нідерланди — 3,09%;
Австралія — 2,59%;
Австрія — 2,4%;
Норвегія — 2,21%.
Ми думали про всіх групах користувачів з безліччю пристроїв. Для всіх створили свій, правильний, окремий досвід. У результаті для того, щоб ідеально відобразити сайт на всіх типах пристроїв з проміжними значеннями, нам знадобилося 9 брейкпоинтов. Всі версії розроблялися паралельно.

Має сенс розповісти, яку ідею ми вклали в самий цікавий спосіб навігації та відображення, який починається від 1580 px.

У більшості сучасних ресурсів переважна кількість користувачів приходить на конкретний матеріал з зовнішніх посилань. В нашому випадку вони відразу бачать дві незалежні колонки. Ліва колонка вже не є виключно контентної, а перетворюється в основний елемент навігації. Права колонка залишається виключно контентної без зайвих навігаційних інструментів та не потрібної інтерфейсної обв'язки.

За нашими підрахунками, швидкість навігації в цьому режимі зросла в 1,5 рази, що дуже сподобалося редакції і нашим постійним користувачам. Також з'явилася унікальна можливість не закриваючи матеріал почерпнути додаткову інформацію в лівій частині сайту. Нам вдалося здивувати адміністрацію президента динамікою і зручністю рішення. Через кілька тижнів у них відпали всі питання в цій частині.

Зазвичай застосовують стандартні деревоподібні рішення. Наведу один приклад із сотні. Людина читає новину, і в ній згадується якась особа. Він клацає на нього, в колонці зліва, не закриваючи матеріал, виникає інформація про його поточної посади, біографії і ще якихось важливих даних. Саме цією функціональністю ми прискорюємо навігацію і не розриваємо ритм читання. Таким же чином, не відволікаючись від події чи документа, можна відкрити інший розділ, прочитати додаткову інформацію, написати лист, дізнатися контакти прес-служби і так далі.

За нашою статистикою, процентна складова користувачів з роздільною здатністю браузера 1580px+ від загального числа аудиторії плаває в межах 24% від загального числа користувачів. Виходячи з сітки, у нас все ще існує можливість зменшити значення в пікселях для двухколоночного відображення, але спираючись на статистику ми не зможемо отримати великий процентний приріст аудиторії. На даний момент в цій боротьбі компромісів ми зупинилися на числі 1580.

image
Дві незалежні колонки породжують безліч нових способів взаємодії. Ви чекали таби в Finder? Ви пам'ятаєте Norton Commander? Ви звикли до своїх поштових програм і новинних агрегаторів? Всі ці інтерфейсні можливості ми будемо розкривати на новому Kremlin.ru. Як приклад: в одному з наступних релізів ми запустимо стеки матеріалів, коли в правій колонці збираються прочитані і додаткові матеріали, до яких можна повернутися або дізнатися щось важливе. Таких ідей дуже багато і важливо відчувати баланс, розуміючи завдання.

Інші цікаві особливості
Я вже на початку говорив, що сайт просто кишить маленькими радощами проектувальника, дизайнера і веб-розробника. Спробую перерахувати малу частину смакоти:

SVG-карта Росії і світу. При кліці на певний ділянку, оточений великою кількістю кордонів, можна вибрати всі найближчі країни або регіони зі списку. Карта автоматично наближається до цієї ділянки.

image
Іконки з даними. В стрічках та матеріалах ми не тільки показуємо довжину відео, аудіо та кількість фотографій, але і розмір матеріалу — заздалегідь вираховуючи кількість знаків. Це вирішує дві професійні завдання: користувачеві немає необхідності заходити в матеріал, якщо він бачить, що робота над ним ведеться повний текст з'явиться пізніше. Також користувач може заздалегідь вирішити, чи готовий він читати великий текст чи ні.

image
Нотифікації. Якщо вкладку з сайтом не закривати, у стрічках оновлюються новини і позначається кількість непрочитаних. Для оперативності роботи редакції відразу після того, як відбулася подія, на сайті з'являється короткий текст, потім — стенограма і фотографії, в кінці викладається відео. Ми бачимо всі ці оновлення, повернувшись у вкладку з «Новим Кремлем».

image
Робота close icon в матеріалі. При прокрутці вниз ми приховуємо іконку, але при прокручування вгору вона знову з'являється. Так само ми починаємо її показувати при наведенні на велику область праворуч зверху, так як ми розуміємо, що людина потенційно хоче закрити матеріал. Також матеріал можна закрити, просто клікнувши на вільну область праворуч.

Анімація взаємодії при кліці або tap. На тач-пристроях анімація підказує користувачеві, пройшло чи взаємодія. Це важливо у зв'язку з нашою специфікою динамічно подгружаемого контенту.

image
Завантаження шрифтів. Важливо дати можливість користувачу з низькою швидкістю з'єднання миттєво почати читати заголовки і текст матеріалів, не чекаючи дратівної підвантаження кастомних шрифтів. Рішення цієї задачі допомогло нам позбавити користувача від болісного очікування, але ми отримали невеликі «стрибки», які спробуємо компенсувати за рахунок підбору налаштувань системних шрифтів.

Підвантаження стрічок. Для відображення списків використовується механізм инкрементальной завантаження при прокручуванні сторінки. При цьому нам було необхідно дати можливість переглядати і використовувати футер. Ми використовували так звані зони завантаження і відображення, при попаданні на які відбувається одна з дій: або відображення наступної сторінки, або предзагрузка сторінки. Також з'являються кнопки навігації до наступної або попередньої сторінки списку.

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

image
Розумний zoom. Спробуйте! У мобільній версії при подвійному натисканні на тексті на матеріалі ми збільшуємо розмір шрифту із збереженням позиції.

Адаптивні заголовки. Розмір шрифту змінюється в залежності від розміру заголовка, щоб залишатися в нашій сітці.

image
" Завантаження зображень. Одним із наших завдань було максимально повно підтримувати різні пристрої з різною щільністю пікселів (Retina, Ultra HD). Ми використовуємо досить свіжу техніку з використанням атрибута srcset, яка підтримується багатьма сучасними браузерами, а для старичків ми взяли JavaScript-реалізацію. Заодно і для видеопостера подібне написали. Для повільних з'єднань ми використовували в якості прелоадера фоновий градієнт, який обчислюється на основі переважних відтінків зображення.

image

Адаптивні іконки. Іноді ми відкриваємо матеріал «поверх» сайту, а іноді справа. Для кожної з цих ситуацій ми проводимо підрахунки і показуємо відповідну ситуації іконку. Спробуйте змінити вікно браузера при великому дозволі.

image
Font rendering. Багато сил було витрачено на якісний рендеринг шрифтів у всіх можливих операційних системах і браузерах. У різних ситуаціях ми застосовували різні рішення, а іноді навіть змінювали колір тексту для конкретного браузера. Для Franklin Gothic ми пробували використовувати кілька різних варіантів візуалізації, але в результаті зупинилися на: text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased, який найкраще працював в максимальному числі браузерів і ОС.

Як приклад, в Chrome колір тексту в футері виглядав сірим, а в Safari синім. Ми обрали дещо інший відтінок, який відповідав нашим завданням і виглядав скрізь однаково.

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

Стенограми, розмітка відео. Для розмітки тексту ми написали свій власний модуль. Можна встановити тему, персону для будь-якого параграфа. Отриманий список маркерів ми показуємо на сторінці зі стенограмою, де при кліці можна переходити до зазначених словами. Також кожен параграф позначається тимчасовим маркером. І при відтворенні відео матеріал автоматично докручивается до позиції в ролику.

При цьому навігація по стенограмі і навігація відео може працювати одночасно. У цій частині одним з головних викликів було створення зручного інтерфейсу для редакторів. Ми написали розширення для адмінки. Інтерфейс, що дозволяє редактору кожному параграфу зіставити персону, тему, проміжок часу. На виході виходять класи і data-* атрибути (див. наприклад исходники view-source:http://kremlin.ru/events/president/transcripts/pre... — Ctrl+F data-time-start), які підхоплюються і використовуються в JS.

Естетика в деталях. Ми показуємо наші бекграунду в разі, якщо користувач продовжує скролл, впершись у кінець або початок сайту.

image
Окрема версія герба. Зробили окрему версію герба, який відповідає законодавству і виглядає просто відмінно. Це було необхідно, оскільки до цього моменту не існувало спеціальної версії, розробленої для екрану. Важливо було вписати герб правильну просту форму, чого не було зроблено раніше, а пізніше для впізнаваності додати деталі, близькі до звичної візуалізації. Ми спочатку вирішили, що подаруємо герб всім, хто буде створювати держсайти, — виклали вихідні файли і ілюстрації під вільною ліцензією Creative Commons.

image
Mark and Share. Ця бібліотека дозволяє користувачам вичинити фрагменти контенту на сайті і ділитися з іншими користувачами мережі унікальними посиланнями на позначені елементи.

image
Мені здається, цей список може бути нескінченним.

Особливості локалізації на дві мови (російська та англійська)
Всі проектування проходило з тестуванням англійських формулювань базових елементів. Існує безліч моментів, які відрізняють ці версії, зокрема на головній сторінці англійської версії ми показуємо карту світу, а не мапу Росії, або відображаємо міжнародний формат +7..., замість російського 8 (495)… Перевіряємо на бек-енді. Якщо мова російська, то виводимо 8, якщо англійською, то +7.

Так само ми використовуємо gettext з автоматичним складанням PO-файлів (файл у форматі «початкова фраза — переклад») з вихідного коду: серверсайд, шаблонів, JavaScript. При складанні проекту готові переклади упаковуються назад в JavaScript, шаблони та код підставляють перекази при генерації сторінки. Досить типове рішення.

Як працювала команда
Ми всі працюємо в одній просторій кімнаті, в якій кожен поважає думку іншої. Ми достатньою мірою професійні, щоб слухати, чути і приймати рішення, не скочуючись до бюрократії роздутих команд.

C нашого боку над проектом працювало два UX-дизайнера, — п'ять фронтенд-інженерів і значне число людей, що займаються бекендом в різному розумінні.

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

Як приклад: саме в прототипі для браузера клієнт по-справжньому зрозумів, як зручна наша ідея з двухколоночной незалежною структурою.

image
Проектування, дизайн та розробка — це паралельні процеси, які запустилися практично одночасно і тривали аж до запуску нового Kremlin.ru. Ми і зараз продовжуємо роботу над поліпшенням проекту в різних напрямках.

Інструменти, які використовуються в роботі команди
Почали проектування на папері і в звичному Photoshop, але практично відразу перемалювали все Sketch. Мучилися під час становлення продукту від його нестабільності і загадковою специфіки експорту в SVG, але по мірі розвитку Sketch повертатися в Adobe Photoshop немає великого бажання.

Якщо брати всі етапи, включаючи первинні теоретичні, то розробка тривала більше року.

Значну частину завдань з фронтенду ми вирішили перенести в Trello, де за рік було закрито більше 2500 карток із завданнями і списком завдань.Про розробку державних сервісів і застосовувалися бібліотеках Не враховуючи ті, які були відправлені в архів або видалені. Ми постійно поповнюємо список, виходячи з наших ідей і розумних відгуків користувачів. На поточний момент є 72 картки, які тільки належить закрити.

image
За час проекту були створені 40-80 версій практично кожного макета з ітераціями різного ступеня складності.

image
У чарівному світі збираються 15 розумних людей і відразу вирішують, яким має бути сайт. Але в реальному житті відразу все не врахуєш. Ескізи сайту за цей час практично не змінилися. Але ми дві тисячі разів пройшли по його структурі, зібрали всі граблі, щоб в результаті отримати потрібні рішення.

За результатами ми зробили коротку презентацію принципів, на яких повинен будуватися новий сайт. На аркушах формату А3 — всі основні сторінки майбутнього сайту, опису «як, що і чому». Так, щоб людина «зі сторони» для нашої області за п'ять хвилин зміг вникнути в суть — що пропонується і чому. Описали принципи, підготували картинки, зробили виноси з поясненнями «ось у цьому місці цей принцип працює ось так».

Дуже важливо, щоб комунікація з клієнтом була оперативна і на двох сторонах були люди, що приймають рішення. Адміністрація президента бачила все — від перших начерків ручкою на папері з поясненням принципових ідей до постійного доступу до декількох серверів з різними версіями.

Ми багато чому вчимося у наших клієнтів.

Про розробку державних сервісів і застосовувалися бібліотеках
Найближчим часом якість самої держави буде сприйматися в тому числі через дизайн. Лояльність і до державним організаціям буде будуватися за тим же принципом: зручно і швидко працювати з сервісом сайту — гарне відомство, незрозумілий і некрасивий сайт — «погане» відомство. І саме цей факт буде найважливішим критерієм розвитку державних інтернет-проектів.

Вже сьогодні російські чиновники зовсім інакше формулюють завдання, піклуючись про інтереси аудиторії, замінюють вкусовщину на функціоналізм. Раніше про це піднімав мова дизайнер, тепер на цьому ставлять акцент насамперед самі замовники.

У нас є свій набір бібліотек, якими ми вже активно ділимося, або поділимося після того, як приведемо в порядок.

Ми вже викладали раніше наш бекенд-фреймворк — iktomi, — набір інструментів для фронтенда, з них найбільш популярні це — SVG-карти і mashaJS (Mark and Share). Ми прагнемо виділяти напрацювання і віддавати їх спільноти, це допомагає і нам самим полегшувати їх використання.

Буває так, що деякі розробники навіть не використовують інструменти контролю версій. Ми розуміємо, що безліч регіональних сайтів намагаються бути схожими на федеральні держ-сайти. Часто це спричиняє невмілий перенесення елементів дизайну або структури сайтів.

У нас з'явилося прагнення допомагати створювати гарні і зручні ресурси.

Як приклад, особливу увагу ми приділяємо приймання коду і автоматизації пошуку помилок, використання інтеграційного і модульного тестування. Не всі підрядники дотримуються цього і не всі замовники висувають такі вимоги. Рекомендації по прийманню допомогли б замовникам отримувати більш якісні сайти.

Наприклад: ми бачили державний проект, у якого захист від збоїв будувалася за рахунок дублювання вмісту на п'яти серверах, у разі помилки одного з серверів запит пересилаються на другий сервер і так далі. Це знижувало ймовірність того, що користувач побачить помилку, але при цьому така кількість серверів надмірно і не раціонально.

Ми беремо на себе завдання публікувати рекомендації, набори прикладів і принципів, які допоможуть зробити державні сайти більш доступними і корисними. Зараз ми створюємо колекцію компонентів і рекомендацій, для того, щоб поділитися нею з спільнотою.

Це буде сайт, на якому ми зберемо рецепти з розробки та управління, компоненти та бібліотеки, які можна повторно використовувати, рекомендації та принципи проектування дизайну сайтів різного призначення. Надалі він стане місцем, де народжуються стандарти, з перфекціонізмом виробляються патерни, де кращі люди дизайн-індустрії спільною працею створюють пиктографику, шрифти і так далі, де озвучуються і вирішуються проблеми, а готові рішення безкоштовно трансполируются на будь-які ресурси, зокрема, державні.

Ми сподіваємося, що цей сайт об'єднає всі доступні практики та інформацію, сформує стиль і необхідний рівень якості для інших державних інтернет-ресурсів.

Будемо раді отримати оновлення та побажання від інших команд і їх проектів.

Мабуть, потрібно було з цього почати. Велике спасибі всім хлопцям, які брали участь у створенні Kremlin.ru. Спробую перерахувати тих, кого можу: Sergey Shapiro, Katrin Shapiro (coat of arms), Arthur Chafonov, Olga Romanova, Eugene and guys from the backend.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.