Mobiili-Chromen teemaväreillä persoonallisempaa ilmettä kotisivulle

Googlen Android 5.0 Lollipop -mobiilikäyttöjärjestelmä ja yhtiön Chrome 39 -verkkoselain toivat  mukanaan ominaisuuden, jonka avulla omaa sivustoa on helppo personoida muuttamalla selaimen yläpalkin väritystä. Tämä onnistuu erittäin helposti lisäämällä verkkosivuston head-elementin (<head></head>) sisään  uusi ”theme-color” -meta-tagi. Uusi meta-tagi kannattaa ehdottomasti ottaa käyttöön, sillä se on yksinkertainen tapa antaa esimerkiksi omalle blogille omaleimainen väritys sekä tukea näin Googlen Lollipop-käyttöjärjestelmän Material Design -suunnittelufilosofiaa, jossa kerrokset ja värit näyttelevät tärkeää roolia.

Google Chrome theme-tag colors

Kaikessa yksinkertaisuudessaan voit ottaa ominaisuuden käyttöön seuraavasti:

<meta name="theme-color" content="#2067a4">

Yllä oleva esimerkki muuttaa selaimen yläpalkin värityksen siniseksi. Muuttamalla content-määreen arvoa saat vaihdettu ilmeen itsellesi mieluisaan väriin. Kun sopiva väri on löytynyt, lisää meta-tagi head-elementin sisään, kuten alussa jo opastin. Sitten vain puhelin käteen ja testailemaan, miltä väritys näyttää käytännössä.

Värin lisääminen ei ole pelkästään visuaalinen kikka, mutta siitä on aidosti myös hyötyä. Tämä tulee esille Lollipopin moniajovalikossa, joka käsittelee selaimen välilehtiä tavallisten sovellusten tavoin. Toisin sanoen jokainen välilehti ilmestyy moniajovalikkoon omana ”korttinaan”. Väritys auttaa sivustoa erottautumaan muista avoinna olevista sovelluksista ja verkkosivustoista.


Aiheeseen liittyen kannattaa lukaista kesällä julkaisemani artikkeli, jossa neuvotaan Android-laitteita tukevan kuvakkeen lisääminen omalle verkkosivustolle: Lisää kotisivullesi Android-laitteita tukeva ikoni.

Vastaa