Browser modern memudahkan Anda menyesuaikan komponen tertentu, seperti ikon, warna bilah alamat, dan bahkan menambahkan hal-hal seperti petak khusus. Penyesuaian sederhana ini dapat meningkatkan engagement dan membawa pengguna kembali ke situs Anda.
Browser modern memudahkan Anda menyesuaikan komponen tertentu, seperti ikon, warna bilah alamat, dan bahkan menambahkan hal-hal seperti petak khusus. Penyesuaian sederhana ini dapat meningkatkan engagement dan membawa pengguna kembali ke situs Anda.
Berikan ikon dan kartu yang menarik
Ketika pengguna mengunjungi halaman web Anda, browser akan mencoba mengambil ikon dari HTML. Ikon mungkin muncul di banyak tempat, termasuk tab browser, tombol recent app, halaman tab yang baru (atau baru saja dikunjungi), dan lainnya.
Memberikan gambar berkualitas tinggi akan membuat situs Anda lebih mudah dikenali, sehingga memudahkan pengguna menemukan situs Anda.
Untuk mendukung semua browser sepenuhnya, Anda harus menambahkan beberapa tag ke elemen <head>
di setiap halaman.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome dan Opera
Chrome dan Opera menggunakan icon.png, yang diskalakan ke ukuran yang diperlukan oleh
perangkat. Untuk mencegah penskalaan otomatis, Anda juga dapat memberikan ukuran
tambahan dengan menentukan atribut sizes.
Safari
Safari juga menggunakan tag <link> dengan atribut rel: apple-touch-icon untuk
menunjukkan ikon layar utama.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
PNG non-transparan berukuran 180px atau 192px persegi ideal untuk ikon apple-touch.
Sebaiknya jangan menyertakan beberapa versi melalui atribut sizes.
Sebelumnya, Safari untuk iOS akan mempertimbangkan kata kunci -precomposed untuk menghindari
penambahan efek visual, tetapi hal ini tidak diperlukan sejak iOS 7.
Internet Explorer dan Windows Phone
Layar utama baru Windows 8 mendukung empat tata letak berbeda untuk situs yang disematkan, dan memerlukan empat ikon. Anda dapat mengecualikan tag meta yang relevan jika tidak ingin mendukung ukuran tertentu.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Kotak di Internet Explorer
"Situs yang Disematkan" dan "Kartu Live" Microsoft yang berputar jauh melampaui penerapan lain dan berada di luar cakupan panduan ini. Anda dapat mempelajari lebih lanjut cara membuat kartu live MSDN.
Elemen browser berwarna
Dengan menggunakan elemen meta yang berbeda, Anda dapat menyesuaikan browser dan
bahkan elemen platform. Perlu diingat bahwa beberapa hanya dapat berfungsi pada
platform atau browser tertentu, tetapi dapat meningkatkan pengalaman pengguna.
Chrome, Firefox OS, Safari, Internet Explorer, dan Opera Coast memungkinkan Anda untuk menentukan warna elemen browser, dan bahkan platform menggunakan tag meta.
Warna Tema Meta untuk Chrome dan Opera
Untuk menentukan warna tema bagi Chrome di Android, gunakan warna tema meta.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Gaya visual khusus Safari
Safari memungkinkan Anda untuk menata gaya bilah status dan menentukan gambar startup.
Menentukan image startup
Secara default, Safari menampilkan layar kosong selama waktu pemuatan dan setelah beberapa kali pemuatan screenshot status aplikasi sebelumnya. Anda dapat mencegah hal ini dengan memberi tahu Safari untuk menampilkan image startup yang eksplisit, dengan menambahkan tag link, dengan rel=apple-touch-startup-image. Contoh:
<link rel="apple-touch-startup-image" href="icon.png">
Gambar harus berukuran tertentu dari layar perangkat target. Jika tidak, gambar tidak akan digunakan. Lihat Pedoman Konten Web Safari untuk detail lebih lanjut.
Meskipun dokumentasi Apple jarang membahas topik ini, komunitas developer telah menemukan cara untuk menargetkan semua perangkat menggunakan kueri media lanjutan untuk memilih perangkat yang sesuai, lalu menentukan gambar yang benar. Berikut ini solusi yang berfungsi, berkat gist tfausak
Mengubah tampilan status bar
Anda dapat mengubah tampilan status bar default menjadi black atau
black-translucent. Dengan black-translucent, status bar akan mengambang di atas
konten layar penuh, bukan mendorongnya ke bawah. Hal ini memberi tata letak
lebih tinggi, tetapi menghalangi bagian atas. Berikut adalah kode yang diperlukan:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black