Web Development

Trik Sederhana Untuk Mempercantik Website Pada Tampilan Mobile.

Pinterest LinkedIn Tumblr

Pernahkah kamu membuka web app seperti Tokopedia atau Shopee pada browser handphone? jika ya, apakah kamu memperhatikan salah satu hal yang unik pada tampilan browser handphonemu ketika membuka website tersebut, yaitu menu warna bar browser yang memiliki warna senada dengan tampilan warna utama website tersebut.

Trik Sederhana Untuk Mempercantik Website Pada Tampilan Mobile.
Tampilan web app Tokopedia dan Shopee pada handphone (2020)

Tampilan menu bar yang selaras dengan skema warna webiste dapat memberikan user experience tersendiri bagi para pengujung website yang dapat menjadi pembeda dan membuat tampilan webite lebih stand out dari webite pada umumnya.

<meta name="theme-color" content="#f48120"/>

Hal tersebut dapat kamu implementasikan juga pada halaman website pribadimu dengan menambahkan properti tag HTML Meta Theme Color. Dengan menambahkan meta theme color tersebut tampilan webitemu akan terlihat lebih elegan dan juga meningkatkan pengalaman positif bagi pengunjung website.

Menurut dokumentasi Google Developers, properti meta theme color di rilis pada browser Chrome untuk android versi 39 pada November 2014, dan berikut beberapa contoh website yang terdapat pada index Alexa yang menggunakan meta theme color pada halaman mobilenya seperti Facebook Mobile, Yahoo mobile, Instagram mobile, Whatsapp, Trip Advisor, dll.

Website Alexa
Data top UK website pada website Alexa

Menurut ranking pada Alexa top 50 United Kingdom, ada sekitar 22 top-ranking website yang mengimplementasikan meta theme color pada halaman websitenya, dan masih banyak lagi website lainnya yang menerapkan hal serupa.

Adapun beberapa alasan lain mengapa sebuah webite tidak mengimplementasikan meta theme color dan hal tersebut lebih bersifat subjektif seperti untuk membuat tampilan websitenya lebih general maupun untuk menjaga konsistensi ketika user berpindah tab antara satu website ke website lainnya pada handphone mereka.

Namun tidak ada salahnya untuk menerapkan meta theme color pada halaman website karena hal tersebut cukup simpel dalam penerapannya dan dapat memeberikan dampak positif lebih banyak kepada user atau pengunjung website. Menambahkan meta theme color juga tidak akan membebani performa website, karena hanya memuat sekitar 43 byte saja untuk satu baris tag meta theme color.

Faktanya kebanyak website saat ini cenderung memilih aksen Progressive Web App experience, yang mana website tampil seperti sebuah app pada handphone user.

Data pengguna mobile web
Statistik pengguna mobile web pada 7 tahun terakhir

Data pengguna mobile browser menurut artikel yang ditulis broadbandsearch.net menunjukan bahwa pengguna mobile browser sendiri sudah melebihi angka 50% pada tahun 2019 dan terus meningkat seiring tren yang terjadi saat ini.

Bagaimana mengimplementasikan tag Meta Theme Color pada WordPress

Pada dasarnya ada dua cara yang dapat dilakukan untuk mengimplementasikan Meta Theme Color pada website. Cara yang pertama dan yang paling direkomendasikan ialah dengan menambah meta theme color pada tag diantara theme WordPress pada file header.php, dan kamu harus menempatkannya sebelum tag </head>, karena disitu merupakan posisi yang tepat untuk meletakkan meta tag.

Penempatan meta theme color diantara tag head juga berlaku untuk penulisan dokumen HTML biasa.

Plugin Meta Theme Color Colour
Plugin WordPress meta Theme Color Colour

Cara yang lainnya ialah dengan menggunakan plugin meta theme color dan kamu tinggal memilih warna yang akan kamu gunakan lalu klik ‘Safe Changes‘. Namun cara kedua ini tidak disarankan kecuali dalam kasus tertentu semisal kamu tidak bisa mengedit theme WordPress dikarenakan tidak ada akses untuk mengedit file themes yang kamu gunakan.

Sebagai catatan meta theme color tidak mendukung nilai dengan code hex yang memiliki nilai alpha (rgb, hsla, atau rgba), jadi sangat disarankan untuk selalu menggunakan enam/tiga digit kode warna hex pada tag meta theme color.


Kesimpulan

Dengan menggunakan meta theme color kamu dapat meningkatkan User Interface pada sebuah website untuk tampilan mobile, terlebih secara statistik pengguna mobile web juga cukup mendominasi dan hal ini akan memberikan nilai lebih pada sebuah website di mata user.

Hallo kawan-kawan semua nama saya Dwi Priyatmoko, content creator sekaligus co-founder blog BackslashID. Saya seorang Web Designer yang juga menyukai ilmu seputar User Experience. Diluar kegiatan ngoding dan desain, saya hobi melakukan olahraga outdor taril run dan juga bermain game mobile. Kebetulan saat ini juga tertarik pada custom mechanical keyboard.

Write A Comment