LOUD 77: jak zbudowałem kompletny ekosystem muzyczny w czystym HTML, CSS i JavaScript
Miała powstać mała, szybka strona bez CMS-a. Jak zwykle wyszło trochę inaczej.
LOUD 77 jest projektem muzycznym rozwijanym wokół roots reggae, soulu i materiałów LIVE. Dwie wydane płyty, kolejne utwory w przygotowaniu, własny kanał YouTube i obecność w największych serwisach streamingowych sprawiły, że zwykła wizytówka bardzo szybko przestała być wystarczającym rozwiązaniem.
Zamiast dokładać kolejną instalację WordPressa, bazę danych i zestaw wtyczek, postanowiłem zbudować cały serwis od podstaw jako stronę statyczną: HTML, CSS i vanilla JavaScript.
Założenie było proste: ma być ekstremalnie szybko
Punktem wyjścia był wcześniejszy projekt DIGIKROM Static. Pokazał on, jak niewiele technologii potrzeba do zbudowania kompletnego serwisu, jeżeli treść nie wymaga ciągłej pracy w panelu administracyjnym.
LOUD 77 pasował do tego modelu idealnie.
Nie potrzebowałem systemu użytkowników, koszyka, dynamicznych formularzy ani codziennej edycji setek rekordów. Potrzebowałem za to pełnej kontroli nad wyglądem, bardzo dobrego czasu ładowania i możliwości zbudowania interfejsu dokładnie wokół muzyki.
Dlatego fundament pozostał ekstremalnie prosty:
- czysty HTML,
- CSS bez ciężkiego frameworka UI,
- vanilla JavaScript,
- brak CMS-a,
- brak bazy danych,
- brak jQuery,
- brak bibliotek potrzebnych wyłącznie do wyrenderowania strony.
Strona muzyka, która nie wygląda jak szablon dla muzyka
Od początku nie chciałem budować kolejnej ciemnej strony z dużą fotografią, biografią artysty i zestawem ikon Spotify.
LOUD 77 miał już własny język wizualny. Szczególnie album Path Of Life stworzył ciemniejszy, bardziej filmowy świat oparty na scenie, świetle, samotności, drodze i postaci ukrytej za charakterystyczną bandaną.
To właśnie ten świat stał się głównym językiem projektu.
Kolorystyka została ograniczona do niemal czarnego tła, złamanej bieli i ciepłego bursztynowego akcentu. Fotografie nie pełnią roli dekoracyjnej. Są częścią narracji.
W efekcie strona zaczęła przypominać bardziej połączenie okładki winylowej, magazynu muzycznego i filmu koncertowego niż klasyczny serwis internetowy.
Manifest, Path Of Life i Part III — trzy rozdziały jednej historii
LOUD 77 ma obecnie dwie wydane płyty: Manifest oraz Path Of Life. Powstaje również trzeci rozdział projektu — Part III.
Zamiast prezentować je jako trzy niezależne produkty, zbudowałem wokół nich jedną narrację:
Manifest → Path Of Life → Part III
Manifest jest początkiem i pierwszym statementem projektu. Path Of Life jest jego obecnym, dojrzalszym i bardziej introspektywnym światem. Part III pokazuje kierunek, w którym LOUD 77 zmierza dalej.
Każdy album otrzymał własną statyczną podstronę, kompletną tracklistę, kontekst oraz własny język wizualny.
LIVE Sessions dostały własny świat
Materiały koncertowe bardzo szybko przestały mieścić się w jednej sekcji na stronie głównej.
Powstała więc osobna przestrzeń LIVE z materiałami takimi jak Under This Roof, Still Standing oraz If This Is My Last Time.
Filmy nie są jednak ładowane jako ciężkie iframe’y YouTube podczas otwierania strony. Użytkownik otrzymuje lokalny visual, a właściwy materiał wideo jest uruchamiany dopiero po interakcji.
Dzięki temu warstwa wizualna może być bogata bez płacenia za nią wydajnością przy pierwszym renderowaniu.
Własny Listen Hub zamiast Linktree
Kolejnym krokiem było stworzenie własnego centrum dystrybucji muzyki.
Pod adresem loud77.com/listen/ działa minimalistyczny Listen Hub prowadzący do oficjalnych profili LOUD 77 w:
- Spotify,
- Apple Music,
- YouTube Music,
- Deezer,
- TIDAL,
- Amazon Music.
Nie ma zewnętrznego brandingu, kolejnej usługi SaaS ani dodatkowego pośrednika. Jeden link może być wykorzystywany w social media, opisach filmów czy kodach QR, a użytkownik przez cały czas pozostaje w świecie LOUD 77.
29 utworów dostało własne strony
Na tym etapie projekt mógł spokojnie zostać zamknięty. Tyle że poszczególne utwory miały własne okładki, pełne teksty i bezpośrednie adresy w serwisach streamingowych.
Powstał więc kolejny poziom architektury: 29 indywidualnych Song Pages.
Każda strona utworu zawiera między innymi:
- własną okładkę 800 × 800 px,
- tytuł i informacje o albumie,
- numer utworu i czas trwania,
- bezpośrednie linki do sześciu streamingów,
- pełny tekst utworu,
- krótkie wprowadzenie do jego tematyki,
- materiał LIVE lub dodatkowy visual, jeżeli jest dostępny,
- nawigację do poprzedniego i następnego numeru.
W ten sposób adres konkretnego utworu nie jest wyłącznie smart-linkiem. Jest pełnoprawnym dokumentem, który może funkcjonować samodzielnie w wyszukiwarce, social mediach albo jako link udostępniony bezpośrednio przez słuchacza.
Bezpośrednio do konkretnego utworu, a nie do profilu artysty
Jednym z ważniejszych elementów projektu było mapowanie linków streamingowych.
Każdy z 29 utworów ma osobne adresy w Spotify, Apple Music, YouTube Music, Deezer, TIDAL i Amazon Music.
Oznacza to, że klikając „Listen” przy konkretnym numerze, użytkownik nie trafia na ogólny profil LOUD 77 i nie musi ponownie szukać utworu.
Trafia dokładnie tam, gdzie chciał.
Linki są przechowywane centralnie w warstwie JavaScript, dzięki czemu nie trzeba powielać ich ręcznie w wielu miejscach serwisu.
Lokalny odtwarzacz MP3 bez obciążania pierwszego wejścia
Na stronie głównej pojawiła się również możliwość odsłuchania wybranego utworu bez opuszczania loud77.com.
Nie użyłem jednak gotowego playera ani zewnętrznego SDK.
To lekki natywny odtwarzacz oparty o HTML5 Audio. Plik MP3 wykorzystuje preload=”none”, więc nie jest pobierany podczas zwykłego otwierania strony.
Transfer rozpoczyna się dopiero wtedy, gdy użytkownik świadomie wybierze odtwarzanie.
Dzięki temu serwis może oferować bezpośredni kontakt z muzyką bez pogarszania wydajności dla osób, które nie korzystają z playera.
SEO bez WordPressa i wtyczki SEO
Brak CMS-a nie oznacza braku technicznego SEO.
Każdy istotny adres ma własny title, description, canonical i Open Graph. Serwis posiada również własny sitemap.xml oraz robots.txt.
Warstwa danych strukturalnych została przygotowana bezpośrednio w kodzie i obejmuje między innymi:
- MusicGroup,
- MusicAlbum,
- MusicRecording,
- BreadcrumbList.
Song Pages mogą dzięki temu precyzyjnie opisywać relację pomiędzy artystą, albumem i konkretnym nagraniem bez korzystania z generatora schema we wtyczce.
To ten sam obszar, którym zajmuję się również podczas technicznej optymalizacji SEO bardziej klasycznych serwisów.
Mobile nie jest pomniejszonym desktopem
Duża część odbiorców projektu muzycznego trafia na stronę z telefonu, dlatego responsywność nie mogła oznaczać wyłącznie zmniejszenia elementów.
Układy sekcji zmieniają rytm, tracklisty otrzymują bardziej mobilny sposób prezentacji, a najważniejszy hero strony głównej wykorzystuje osobną grafikę przygotowaną specjalnie dla małego ekranu.
Desktop może dzięki temu korzystać z szerokiej, koncertowej kompozycji, podczas gdy telefon otrzymuje kadr zaprojektowany od początku pod pionowy viewport.
Co finalnie powstało?
Projekt zaczynał jako pomysł na niewielką stronę statyczną.
Finalnie powstał niezależny cyfrowy ekosystem muzyczny obejmujący:
- stronę główną,
- Music Hub,
- osobne strony albumów,
- LIVE Sessions,
- The Story,
- Listen Hub,
- 29 pełnych Song Pages,
- lyrics,
- własne smart-linki,
- sześć platform streamingowych,
- lokalny audio player,
- pełną warstwę SEO i danych strukturalnych.
A wszystko to nadal działa bez WordPressa, CMS-a i bazy danych.
Nie każdy projekt potrzebuje CMS-a
Nie traktuję tego jako argumentu przeciwko WordPressowi. W wielu projektach CMS jest dokładnie właściwym narzędziem.
Problem zaczyna się wtedy, gdy wybór technologii następuje automatycznie, zanim zostanie zadane podstawowe pytanie: czego ten projekt naprawdę potrzebuje?
LOUD 77 potrzebował swobody, szybkości, bardzo specyficznego doświadczenia wizualnego i relatywnie przewidywalnej struktury treści.
W tym przypadku czysty front-end nie był eksperymentem. Był po prostu najbardziej logicznym rozwiązaniem.
Jeżeli chcesz zobaczyć efekt końcowy, otwórz loud77.com.
Jeżeli natomiast zastanawiasz się, czy podobne podejście ma sens w Twoim projekcie, zobacz ofertę DIGIKROM lub skontaktuj się ze mną i opowiedz, co chcesz zbudować.
