Hero-osio ilman isoa kuvaa, iso fontti 🔤
- Trendikäs ratkaisu on aloittaa sivu pelkällä liukuväritaustalla (tai animaatiolla, kuten tällä sivustolla) ja isoilla kirjasimilla ja ”levittää” tausta myös valikon taakse.
- Kun taustalla on yksinkertainen liukuväri ja pääviesti nostetaan näyttävästi esiin, huomio keskittyy juuri siihen, mitä haluat kertoa.
- Tämä toimii myös silloin, kun yrityksellä ei ole kuvaa mitä laittaa. Voit avata sivuston aikaisemmin tuottamaan tulosta Googlessa ja kuvan voi lisätä myöhemmin.
Kevyet sivut 🌱 ovat ekologiset
Verkkosivujen toteutuksessa voi huomioida ekologisuuden: kevyt sivurakenne, optimoidut kuvat ja nopea lataus vähentävät energiankulutusta ja tekevät sivuista ympäristöystävällisempiä.
Tämä parantaa myös hakukonenäkyvyyttä, nopeuttaa sivuston käyttöä ja lisää asiakastyytyväisyyttä.
Sisällytä vastuullisuus myös sisältöön
Modernit kotisivut välittävät myös yrityksen arvoja. Lyhyt, tarinallinen kappale vastuullisuudesta lisää luottamusta ja tekee yrityksestä inhimillisemmän. Se voi olla maininta ekologisista ratkaisuista, paikallisuudesta tai pitkäikäisistä tuotteista ja palveluista – pienikin teko voi olla osa isoa tarinaa.
Tumma ja/tai vaalea tausta 🌗
Tumma tausta on nosteessa – monet käyttäjät arvostavat mahdollisuutta valita tumman tai vaalean teeman välillä. Tämä tuo myös suunnitteluun uusia mahdollisuuksia kontrasteilla ja tunnelmalla.
Kokeile, klikkaa alla olevaa ikonia
Ideoita sisältöön tekoälyltä 🤖
Minä en ainakaan häpeä tunnustaa, että käytän tekoälyä. Tätäkin blogia kirjoittaessani, kysyin lisätietoa tekoälyltä ja esimerkiksi koodin tuottamisessa siitä on tullut paras nörttityökaverini!
Tekoäly on erinomainen apuväline, kun tarvitaan
- call-to-action -tekstejä (CTA = toimintokehoitukset)
- iskulauseita
- ideoita sisältöön
- hakukoneoptimointia
On kuitenkin tärkeää, että lopullinen sisältö on yrityksen omaa ”kieltä” – siksi valmiita ehdotuksia kannattaa aina muokata ja viimeistellä omalla tyylillä.
Saavutettavuus
tekee sivuista käyttäjäystävälliset ✅
Saavutettavuus tarkoittaa sitä, että sivusto toimii erilaisilla laitteilla ja apuvälineillä, ja että sisältö on selkeää ja ymmärrettävää kaikille.
Käytännön vinkkejä saavutettavuuteen
- Riittävä kontrasti tekstin ja taustan välillä
- Isot, selkeät fontit ja luettavat kirjasimet
- Kuvat aina alt-teksteillä (kuvan vaihtoehtoinen teksti) varustettuina
- Sivusto toimii myös näppäimistöllä, ei vain hiirellä
- Otsikkotasot (H1, H2, H3) loogisessa järjestyksessä
- Mobiilikäyttö huomioitu kaikilla sivuilla
Lisäksi hakukoneet rakastavat saavutettavia sivustoja!
Tässä pari vinkkiä saavutettavuuden mittaamiseen
- WAVE – Web Accessibility Evaluation Tool
👉 https://wave.webaim.org
Helppo verkkopohjainen testi: liitä sivun osoite ja saat raportin kontrasteista, alt-teksteistä, otsikkorakenteesta jne. - Google Lighthouse (sisäänrakennettuna Chrome DevToolsissa)
👉 Avaa Chrome → F12 → Lighthouse-välilehti → valitse “Accessibility”.
Antaa saavutettavuuspisteet (0–100) ja listaa parannuskohteet.
