Cara Mengaktifkan Kemampuan Smartphone di Situs Web

Penggunaan internet melalui perangkat seluler telah meningkat sejak peluncuran Apple iPhone. Karena ukuran layar yang berbeda dari perangkat seluler dan antarmuka layar sentuh, situs web tidak muncul atau berfungsi pada perangkat seluler dengan cara yang sama seperti yang muncul atau berfungsi pada layar komputer. Untuk mempertahankan jumlah pembaca, buat versi smartphone situs web Anda menggunakan lembar gaya berjenjang.

Keterbatasan Penjelajahan Smartphone

Penjelajahan smartphone berbeda dari penjelajahan berbasis komputer dalam dua cara signifikan. Pertama, ukuran layar yang tersedia pada smartphone jauh lebih kecil daripada di komputer, yang berarti bahwa beberapa situs web akan tampak berantakan atau dalam beberapa kasus tidak dapat dibaca pada smartphone. Pengguna ponsel cerdas harus menggulir ke bawah atau memperbesar situs web yang dioptimalkan untuk dilihat oleh komputer. Kedua, smartphone merespons klik sentuh alih-alih gerakan kursor, dan elemen situs web yang berubah berdasarkan pergerakan kursor mungkin bermasalah pada smartphone. Misalnya, elemen yang berubah ketika kursor berada di atasnya tidak akan berperilaku seperti yang diinginkan pada smartphone karena melayang tidak melakukan apa-apa pada smartphone. Selain itu, menu drop-down mungkin bermasalah untuk beberapa pengguna ponsel cerdas.

Ukuran Relatif CSS

Jika Anda mengubah ukuran elemen tertentu di situs web Anda, Anda hanya perlu mengubah file CSS untuk situs Anda. Untuk keterbacaan smartphone, ubah dimensi CSS dan ukuran font Anda menjadi unit relatif, bukan unit absolut. Misalnya, lebar dan tinggi elemen tertentu harus diberikan dalam persentase, bukan piksel. Ini akan mengukur elemen berdasarkan persentase jendela browser atau elemen induk. Untuk ukuran font, gunakan ems bukan piksel. Satu em sama dengan ukuran font saat ini dalam piksel. Oleh karena itu, dua ems adalah dua kali ukuran font saat ini, dan seterusnya. Perubahan ini harus disimpan dalam file CSS yang terpisah.

Properti Tampilan CSS

Untuk sepenuhnya menyembunyikan elemen dari situs Anda, tambahkan properti "display: none" ke gaya CSS elemen itu. Properti "display: none" akan menyembunyikan elemen sepenuhnya sehingga tidak memakan ruang di jendela. Gunakan ini pada elemen seperti menu drop-down atau gambar yang mengambil terlalu banyak ruang layar. Ini akan memungkinkan elemen-elemen lain dari situs web Anda untuk mengatur di jendela seolah-olah elemen tersembunyi belum pernah ada. Jika Anda menggunakan modifikasi ini, pastikan bahwa informasi penting dari elemen tersembunyi terlihat di tempat lain di halaman Anda.

Mengarahkan Browser

Ketika perangkat mengakses situs web, ia membaca bagian dokumen HTML terlebih dahulu. Anda dapat menautkan ke beberapa style sheet CSS di bagian dokumen. Jika perangkat seluler memuat situs web Anda, browser kemudian akan memuat lembar gaya yang diidentifikasi oleh atribut media = "handheld" alih-alih lembar gaya default. Anda juga dapat mengarahkan browser ke berbagai style sheet berdasarkan ukuran layar. Ini dapat berguna jika Anda ingin menata situs web Anda secara berbeda untuk perangkat seluler yang berbeda. Lihat Sumberdaya untuk daftar dimensi layar smartphone umum.

HTML alternatif

Jika Anda secara drastis mengubah organisasi dan tata letak situs Anda di luar file CSS baru, Anda mungkin ingin membuat file HTML baru dengan perubahan yang diinginkan. Jika Anda membuat file HTML yang berbeda, Anda harus mengarahkan browser ke file HTML baru jika pengguna melihat situs pada smartphone. Selain mendeteksi browser seluler, Anda harus memodifikasi skrip untuk mengarahkan ulang ke halaman HTML alternatif Anda. Lihat Sumberdaya untuk tautan ke skrip untuk mendeteksi peramban seluler.