ChrisTats: kun tatuoijan kotisivuista tuli aikakauslehti

Asiakas

Christopher ”Chris” Balak, tatuoija, ChrisTats. Työskentelee INKY 11 -studiossa Helsingin Alppilassa.

Työ

christats.fi 2.0: portfolio, flash-kuvat, videot, ajanvaraus ja hallintapaneeli

Konsepti

Lehti: sivusto on painetun lehden numero 01

Tekniikka

PHP, MariaDB, TypeScript, three.js, tavallinen webhotelli

Kielet

suomi ja englanti

Palvelu

Uniikki toteutus

Mistä ChrisTatsin uudet sivut lähtivät?

Tein Chrisille ensimmäiset sivut vuonna 2026: portfolion ja ajanvarauksen. Ne toimivat, mutta ne näyttivät tatuoijan sivuilta, joita on paljon. Chris halusi seuraavaksi sivut, joita ei ole kenelläkään muulla tatuoijalla Suomessa.

Lähtötilanteesta selvisi kolme asiaa, jotka ohjasivat kaikkea muuta:

• Kävijät tulevat Instagramista ja TikTokista. Sivut avautuvat usein sovelluksen omassa selaimessa, jossa yläreunassa on sovelluksen omat painikkeet ja tilaa on vähän.
• Chris hoitaa asiakasviestinsä Instagramissa. Sähköpostilomake, jonka viesteihin vastataan päivien päästä, ei sovi hänen tapaansa tehdä töitä.
• Hinnastoa ei ole. Jokainen tatuointi hinnoitellaan erikseen. Sivuilla näkyy vain 50 euron varausmaksu, 48 tunnin peruutusraja ja 18 vuoden ikäraja.

Miksi tatuoijan sivuista tuli aikakauslehti?

Aloitin tutkimalla, miltä vuoden 2026 palkitut sivustot näyttävät ja mikä niissä toimii. Parhaissa oli yksi yhteinen piirre: koko sivuston idea tulee tekijän omasta maailmasta, ei verkkosivujen kaavoista. Kilpa-ajajan sivuilla kypärä ohjaa koko ilmettä, elokuvan sivuilla kuvauspaikan arkkitehtuuri.

Ensimmäinen konseptini rakentui Chrisin käsialan ja tatuointikaavion ympärille. Siitä siirryimme painotuotteeseen. Tatuointikulttuurissa paperi on kaikkialla: flash-arkit seinällä, kaaviot, lehdet ja tarrat. Lehti antoi valmiin rakenteen, jonka jokainen ymmärtää ilman ohjeita. Kansi kertoo kuka, sisällys kertoo mitä löytyy ja takakannesta löytyvät yhteystiedot.

Konseptista tehtiin neljä versiota ennen kuin se lyötiin lukkoon lokakuun alussa. Chris teki itse useita ratkaisuja, esimerkiksi sen, että sivuilla ei ole sivunumeroita lainkaan, vaan osastot on numeroitu lukujärjestyksessä.

Etusivu on koko lehden numero ja jokainen osasto on myös oma sivunsa, esimerkiksi galleria ja flash-liite. Navigointi on peukalon ulottuvilla alareunassa: hakemisto ja pinkki Varaa-painike.

Mitä jätin pois?

Uniikissa toteutuksessa valinnat ovat yhtä tärkeitä kuin se, mitä lisätään. Nämä jäivät tarkoituksella pois:

• Hinnasto. Chris hinnoittelee jokaisen työn erikseen, joten sivuilla ei ole hintaesimerkkejä, jotka joku voisi ymmärtää lupaukseksi.
• Tumma tila. Lehti on painettu paperille, joten sivuilla on yksi vaalea ulkoasu myös silloin, kun puhelin on tummassa tilassa.
• Kikkailu. Ei omaa hiiren osoitinta eikä vierityksen kaappaamista. Liike tulee vain lehden omista asioista: painokuvan kehittymisestä, kromin heijastuksista ja leimasta.
• Ulkopuoliset palvelut. Ei valmista ajanvarausliitännäistä eikä kolmannen osapuolen skriptejä. Kaikki toimii sivuston omalla koodilla.

Miten ChrisTats 2.0 on rakennettu?

01Palvelin tekee sisällön, JavaScript viimeistelee

Palvelin tuottaa jokaisen tekstin, kuvan, linkin ja lomakkeen valmiiksi. Sivut toimivat myös ilman JavaScriptiä. Liike ja 3D tulevat päälle vasta, kun ne ovat valmiita ja jos käyttäjä on pyytänyt laitteeltaan vähemmän liikettä, sivu näyttää kaiken heti paikallaan. Kromilogon 3D-koodi ladataan vasta, kun sitä tarvitaan.

02Venyvät otsikot ilman hyppimistä

Lehden otsikot täyttävät aina koko palstan leveyden. Ne on tehty muuttuvalla Anybody-fontilla, jonka leveyttä voi säätää. Palvelin laskee jokaisen otsikon leveyden fontin omista mitoista jo ennen kuin sivu latautuu, joten sivu ei hypi, kun fontti tulee näkyviin.

03Instagramin selain ensin

Koska suuri osa kävijöistä tulee sovellusten sisäisistä selaimista, suunnittelin sivut ensin niille. Yläreunan alueelle, jossa sovellukset näyttävät omat painikkeensa, ei tule mitään painettavaa. Linkit avautuvat samaan ikkunaan ja lomakekentät ovat niin isoja, ettei puhelin zoomaa niihin.

04Varaus, joka sopii Chrisin tapaan tehdä töitä

Varauskupongissa kysytään Instagram-tunnus, koska Chris vastaa varauksiin Instagram-viestillä. Sähköposti kysytään silti, jotta kuitit ja maksutiedot tulevat aina myös sähköpostiin. Kun flash-kuva varataan, se näkyy varattuna heti kaikille.

05Hallintapaneeli puhelimen kotinäytöllä

Chris lisää töitä, flash-kuvia ja artikkeleita sekä hoitaa varaukset omasta hallintapaneelistaan, joka toimii puhelimen kotinäytöltä kuin sovellus. Kun hän merkitsee varauksen valmiiksi, asiakas saa seuraavana päivänä yhden viestin, jossa pyydetään Google-arvostelua.

06Haettavuus ja laatu

Sivusto toimii suomeksi ja englanniksi ja siinä on suomeksi 29 artikkelia ja 10 tyylisivua, joiden kautta tatuointia etsivä voi löytää Chrisin töitä Googlesta. Jokaisella sivulla on yksi pääotsikko, kuvilla kuvaavat tekstivastineet ja dialogit toimivat näppäimistöllä. Koodia tarkistaa yli 500 automaattista testiä ja jokaiselle sivulle asetettiin koko- ja nopeusbudjetti, joka mitattiin hidastetulla mobiiliyhteydellä.

”Kaveri osaa hommansa! Asiat hoidettiin ammattimaisesti ja lopputuloksesta tuli juuri sellainen kuin pyysin. Suosittelen vahvasti.”

Mitä tästä voi oppia oman yrityksen sivuille?

Kaikki yritykset eivät tarvitse lehteä, eivätkä useimmat tarvitse 3D-logoa. Kolme periaatetta toimivat silti jokaisella sivustolla:

• Idea tulee asiakkaan omasta maailmasta. Tatuoijalla se on paperi ja painojälki, maalarilla ehkä sävykartta. Silloin sivut eivät näytä pohjalta.
• Sivut tehdään sinne, missä asiakkaat ovat. Chrisin asiakkaat ovat Instagramissa, joten sivut on suunniteltu sen selaimelle ja varaukset hänen viesteihinsä.
• Yksi selvä toiminto. Jokaiselta sivulta pääsee varaamaan yhdellä painalluksella.

Jos tarpeesi on tavallisempi, Starttisivu tai Yrityssivusto on nopeampi ja edullisempi tie. Suunnittelen nekin yrityksellesi. Esimerkiksi helsinkiläisen INKY 11 -studion sivut tein kuvavetoisina: työnäytteet ovat pääosassa ja ajanvaraus on muutaman klikkauksen päässä.

Lähteet

1. ChrisTats. https://christats.fi
2. three.js: JavaScript 3D library. https://threejs.org/
3. Google Fonts: Anybody. https://fonts.google.com/specimen/Anybody
4. MDN: prefers-reduced-motion. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion