Näin tein tämän sivuston
Tässä on, miten tein tämän sivuston alusta loppuun. Teen asiakkaiden sivut samalla tavalla.
20 vaihettaTavoite
Ammattitason suunnittelu yhtä helposti kuin ostaisit uudet vaatteet.
Pienyrittäjällä ei ole aikaa palavereihin. Halusin, että sivut voi tilata yhtä nopeasti kuin vaatteet netistä, ja hinnan näkee heti.
Tunnelma
Otin tunnelman omista valokuvistani. Kuvaan yleensä hämärässä, ja kuvissa on pieni kohde ja paljon tyhjää ympärillä. Halusin sivuille saman fiiliksen.
Värit ja kirjaimet
Tausta on täysin musta ja teksti melkein valkoista. Vaaleanpunaista käytän vain siinä, minkä olet valinnut, ja napeissa, joista pääsee eteenpäin. Tarkistin, että harmaakin teksti erottuu mustalta hyvin. Koko sivulla on yksi fontti, Instrument Sans.
- Pohja
#000000 - Teksti
#F2F0F118,5 : 1 - Toissijainen
#8A878B5,9 : 1 - Valittu ja eteenpäin
#E45F9B6,4 : 1 - Merkki
#E98FAE9,0 : 1
Instrument Sans
Merkki
Mrrp-kissan m on 3D-malli, joka on tehty yhdeksästä palasta. Kun viet hiiren sivuun, palat aukeavat ja niiden välistä näkyy, mitä teen.
Kauppa
Yleensä kotisivuista pyydetään tarjous ja sitten odotetaan. Tein tilaamisesta kaupan, jossa vastataan muutamaan kysymykseen ja hinta näkyy koko ajan. Ulkoasusta ei kysytä mitään, koska sen suunnittelen minä.
Rakenne
Ennen värejä tein jokaisesta ruudusta rautalankamallin. Ruudukossa on 12 saraketta, ja kysymys on joka ruudulla eri kohdassa, ettei vierittäminen tunnu samalta joka kerta. Kuvissa on kaupan oikeat ruudut ilman tekstejä.
Asiallinen vai villi?
En kysy värejä tai fontteja, koska harva haluaa valita niitä itse. Kysyn vain, saako sivu olla rohkea. Mitä villimmän valitset, sitä enemmän kulman m aukeaa ja kallistuu.
Hinnat selkokielellä
Jokaisen lisäosan kohdalla lukee lyhyesti, mitä se tekee ja paljonko se maksaa. Alareunassa näkyy koko ajan, että esikatselu on ilmainen ja mitä sivut maksaisivat.
Tarkat värit
Jos yrityksellä on jo omat värit, ne pitää saada tarkkoina koodeina. Siksi kysyn hex-, rgb- tai Pantone-koodia enkä tarjoa värivalitsinta.
Lupaus
Kassalla sanaa Loput voi klikata. Siitä aukeaa koko prosessi pyynnöstä ylläpitoon aikatauluineen, ja siinä lukee, mitä sinä teet ja mitä minä.
Polku
Laskin, montako asiaa pyyntöön oikeasti tarvitaan. Yksi valinta, viisi kenttää ja nappi riittävät, ja kaikki muu on valmiiksi valittu. Kokeilin myös, että pyynnön saa lähetettyä pelkällä näppäimistöllä.
- valinta
- 1
- kenttää
- 5
- nappi
- 1
- sivunlatausta
- 0
Kokeiltu 17.10.2026.
Valokuvat
Minusta kertova sivu on tehty valokuvasarjoistani. Lumimyräkkäsarjassa lato näkyy ensin pienestä ikkunasta, ja kun vierität, kuva loittonee koko sarjaksi.
Liike sinun vastauksistasi
Sivulla on kaksi kohtaa, joissa vieritys pysähtyy hetkeksi. Ensimmäisessä yrityksesi nimi pienenee isosta logon kokoiseksi. Ennen kassaa vastauksesi liukuvat ohi yhtenä pitkänä rivinä.
Tarkoituksella rikotut säännöt
Rikoin muutamaa suunnittelusääntöä tahallaan. Yksi kysymys on porrastettu, ja ruutujen numerot ovat niin isoja, että ne menevät reunan yli. Hinnan ja napit pidin silti selkeinä.
Kaksi kieltä
Kauppa toimii suomeksi ja englanniksi. Molemmat hakevat hinnat samasta paikasta, joten ne täsmäävät aina laskuun asti.
Puhelimessa
Puhelimella kauppa toimii samoin. Asteikko kääntyy pystyyn, ja esikatselunappi pysyy alareunassa, jossa peukalo yltää siihen.
Kokeiltu käytössä
Kävin sivut läpi 4K-näytöllä ja puhelimella ja korjasin kaiken, mikä tuntui oudolta. Tässä osa niistä.
| Havainto | Korjaus |
|---|---|
| Pehmennetty vieritys tuntui liukumiselta jäällä. | Vaihdoin tavalliseen vieritykseen, joka napsahtaa kevyesti kohdalleen. |
| Nimen kutistuminen nyki ja vaati monta vieritystä. | Nyt vain koko muuttuu, ja matka on lyhyempi. |
| Ilman nimeä ruudulla välähti tyhjä paikka. | Jos nimeä ei ole, kohta jätetään pois. |
| Sivun päivitys välähdytti merkin hetkeksi. | Merkki piirretään vasta, kun sivu on latautunut paikalleen. |
| Iso hinta kassalla vei huomion esikatselulta. | Poistin ison hinnan. Hinta näkyy pienenä, ja ilmainen esikatselu on ensimmäisenä. |
| Kielivalinta kulmassa rikkoi sisäänkäynnin symmetrian. | Siirsin sen keskelle pääpainikkeen alle. |
| Lighthouse: ruudunlukijalta puuttui sivun pääalue. | Lisäsin merkinnän, ja saavutettavuus nousi 100:aan. |
Tekniikka
Rakensin sivun ilman sivustorakentajaa tai valmista teemaa. Tässä on, mitä sen alla on ja miksi.
| Osa | Mitä käytin |
|---|---|
| Sivut | Itse kirjoittamani Node-skripti tekee jokaisesta sivusta valmiin HTML-tiedoston. Kehystä ei ole, joten selaimelle ei lähetetä mitään turhaa. |
| Ulkoasu | Tavallista CSS:ää ja yksi fontti, Instrument Sans, joka ladataan omalta palvelimelta eikä Googlelta. |
| JavaScript | Vain siellä, missä jotain liikkuu tai lasketaan, kuten hinta. Lomake on tavallinen HTML-lomake, joten näppäimistö ja ruudunlukija toimivat sen kanssa suoraan. |
| 3D-merkki | three.js, paketoitu esbuildilla. Jos laite ei tue 3D:tä, tilalla näkyy tavallinen logo. |
| Palvelin | Cloudflare Workers. Sivut tulevat kävijää lähimmältä Cloudflaren palvelimelta, ja sama Worker hoitaa tilaukset, hinnat ja tilaussivut. |
| Tilaukset | Tallentuvat Cloudflaren Durable Objects -tietokantaan, ja uudesta tilauksesta tulee minulle sähköposti. Hinnat lasketaan palvelimella samasta hinnastosta kuin kaupassa. |
| Tietoturva | HTTPS kaikkialla ja tiukka sisältöpolitiikka (CSP), jonka takia sivu ajaa vain koodia, jonka olen erikseen sallinut. |
| Hakukoneet | Kielet on linkitetty toisiinsa (hreflang), ja mukana on sivukartta ja rakenteinen data. IndexNow kertoo Bingille ja muille muutoksista heti julkaisun jälkeen. Sivu on Googlen ja Bingin hakukonetyökaluissa. |
| Tilastot | Cloudflare Web Analytics laskee käynnit ilman evästeitä, joten evästeilmoitusta ei tarvita. |
| Julkaisu | Koodi on Gitissä ja GitHubissa. Kun testit menevät läpi ja julkaisen, Cloudflare päivittää sivut itse noin minuutissa. |
Mitattu
Mittasin sivun Googlen Lighthouse-työkalulla. Lisäksi 80 automaattista testiä tarkistaa tilaukset, hinnat ja molemmat kielet aina ennen kuin julkaisen muutoksia.
- suorituskyky
- 92
- saavutettavuus
- 100
- parhaat käytännöt
- 100
- hakukoneet
- 100
- koko sivu
- 222 kt
- asettelun hyppyä
- 0
- testiä joka julkaisulla
- 80
- näyttöä: 390, 1440 ja 2560 px
- 3
Lighthouse 13, puhelimen asetukset, oikea näytönohjain, 17.10.2026.
Valmis
Kassalla näet vielä kaiken, mitä valitsit, ja mitä se maksaa, jos tilaat. Esikatselu on ilmainen.
Haluatko omat sivut?
Esikatselu on ilmainen, ja maksat vain, jos tilaat.
Pyydä maksuton esikatselu