Сайт подорослішав:справжній сайт дев'ятьма мовами

Чому я пишу про сайт

Привіт, я Сергій, засновник Mommy Refuel. Зазвичай ці оновлення про сам застосунок, але 13 вересня сайт змінився за один день сильніше, ніж за попередній місяць — з однієї довгої сторінки-лендінгу в щось набагато ближче до справжнього продуктового сайту. Це подія, яку варто пояснити нормально, з реальними датами й тим, що саме куди поїхало, а не одним рядком у списку змін.

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

Від однієї сторінки з якорями до справжнього багатосторінкового сайту

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

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

До кінця цього першого етапу збірка вже генерувала 166 реальних, індексованих сторінок — можливості, турбота, материнство, тарифи, ресурси, компанія та юридичні розділи, — кожна зі своїм заголовком, описом і canonical-посиланням, а старі маршрути перенаправлені на нові, щоб ніщо з того, що раніше працювало, не стало 404.

Копія дизайну перестала бути прев'ю й стала живим сайтом

До цього затверджений візуальний дизайн жив як прев'ю-збірка. Щоб mommyrefuel.com точно йому відповідав, я зробив точну, самодостатню статичну копію цього дизайну — головну плюс 46 внутрішніх сторінок, з усіма реальними ресурсами (стилі, скрипти, зображення, скріншоти) — і переналаштував саму збірку Amplify так, щоб вона брала саме цю копію. Тепер крок збірки сайту копіює цю копію прямо в продакшн-вивід, тож те, що ви бачите на mommyrefuel.com, — це точно затверджений дизайн, а не його наближена реконструкція в іншому фреймворку. Після перемикання я перевірив маршрути по всьому сайту (головна, /app, /features/refuel-score, /care, /privacy) — усі відображалися коректно.

Щоб кожна внутрішня сторінка відчувалася як головна

У головної сторінки був власний теплий, редакційний голос; внутрішні сторінки йому ще не зовсім відповідали. Я переналаштував усю дизайн-систему, щоб вони належали до однієї родини: заголовки лишаються на Manrope (той самий дисплейний шрифт, що й у застосунку), основний текст переходить на шрифт-пару (DM Sans) для читабельності, а палітра кольорів береться напряму з токенів MRColor застосунку — те саме бордове чорнило, теплий паперовий фон, приглушені кольори тексту й ліній. Окремо перевірив це на темних смугах (текст на сливовому фоні), щоб контраст точно тримався — і він тримався.

Реальні фото, реальні скріншоти застосунку — без макетів

Кожен скріншот на сайті — реальний кадр із поточного застосунку, не макет: я переналаштував сторінки, де скріншот не відповідав темі, щоб кожен блок показував саме той екран, про який іде мова (наприклад, сторінка про підсумок для лікаря тепер показує реальний екран «Підготуватися до візиту / Поділитися PDF», а не якийсь інший).

Для редакційних фото я зібрав повноцінний пул теплих, ліцензованих світлин (усі — Unsplash License, вільні для комерційного використання) мам, малюків і родин, і доклав реальних зусиль, щоб сусідні сторінки не повторювали одне й те саме фото — за темою розділу: сторінки про вагітність показують вагітних жінок, сторінки турботи — доглядальницю з дитиною, сторінки про партнерство — родини. До кінця дня сайт спирався на 29 різних фото з єдиною теплою кремовою колірною корекцією, і жодне не повторювалося поряд.

Готуємо сайт, щоб його могли знайти

Справжній сайт має бути знаходимим. Того ж дня я виправив баг із canonical-адресами, через який усі сторінки вказували на старий тестовий домен замість mommyrefuel.com — якби це лишилося, Google взагалі не міг би проіндексувати справжній сайт, — і додав sitemap та robots.txt. Верифікував домен у Google Search Console, додав Google Analytics і додав теги OpenGraph та Twitter Card по всьому сайту (з нормальною прев'ю-картинкою), щоб поширене посилання показувало картку, а не порожнечу, — на будь-якій із доступних мов.

Сайт перейшов з двох мов на дев'ять

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

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

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

Кілька маленьких, чесних деталей

Кілька дрібниць для точності: у підвалі кожної сторінки тепер вказано, що Mommy Refuel — один із продуктів seven a.m., студії, яку я заснував, з посиланням. Сторінки для інвесторів і про наше бачення виросли конкретними, чесними розділами (що працює вже зараз, чому саме зараз, як ми будуємо), а не розмитими заявами. Увечері я спробував анімований «блоб»-ефект на кутах фото й того ж вечора відкотив його — він не пасував до спокійнішого редакційного макету, тож зображення знову прямокутні, а заокруглені кути лишилися тільки для скріншотів застосунку.

Де і коли

• 09:37 — Внутрішні сторінки підлаштовані під редакційний стиль головної: Manrope + DM Sans, бордово-кремова палітра з MRColor (b2bb39c). Опубліковано на mommyrefuel.com.
• 10:04 — Повна багатосторінкова архітектура з реальним двоколонковим меню; 166 сторінок у збірці (7279027). Опубліковано на mommyrefuel.com.
• 10:39 — Точна статична копія затвердженого дизайну (47 сторінок + ресурси) (0911c9d).
• 10:51 — Продакшн-збірка Amplify перемкнута на цю копію напряму — mommyrefuel.com тепер віддає точно затверджений дизайн (03c286f). Опубліковано.
• 10:59–12:41 — Реальні скріншоти застосунку прив'язані до правильних сторінок; зібраний і тематично розподілений пул фото; майже нуль повторів між сторінками (52da965, 4227c78, 570d667, 1acbc27 та суміжні коміти).
• 13:20–14:14 — Сторінки для інвесторів і про наше бачення розширені конкретними, чесними розділами (2049d56, a0004c5).
• 13:51–13:55 — Виправлено SEO: canonical-посилання по всьому сайту, додано sitemap і robots.txt (c22b129), верифікацію в Search Console (be6a79f), Google Analytics (84fbc6a).
• 17:23–19:55 — Сайт перекладено українською, іспанською, німецькою, французькою, польською, італійською, португальською та російською, сторінка за сторінкою: головна, головні сторінки, контакти, преса й партнерства, тарифи й історії, оновлення, юридичні сторінки (лише оболонка), розділ можливостей, розділ материнства, підрозділи турботи й усе інше — повне покриття сайту дев'ятьма мовами (8c00546 — c302319, близько 20 комітів).
• 19:01–19:11 — Атрибуція в підвалі: Mommy Refuel — один із продуктів seven a.m. (b91226f, 77724f9).
• 20:34–20:36 — Заголовки сторінок і мета-описи для кожної мови; теги OpenGraph і Twitter Card по всьому сайту для прев'ю посилань (5e5a773, e561031). Опубліковано.

Що далі

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