Desain situs web seluler rumit, karena satu versi situs seluler mungkin tidak kompatibel dengan setiap perangkat. Para desainer harus menyadari praktik desain terbaik untuk menjadikan kehadiran ponsel Anda bermakna dan bermanfaat.
Ada perdebatan berkelanjutan di antara pengembang Web tentang cara membuat situs web yang dioptimalkan untuk seluler yang terbaik. Ada tiga metode utama untuk mengembangkan situs web seluler.
Ini adalah:
- Desain web responsif.
- Situs web seluler khusus.
- RESS: Pemrograman sisi server membuat CSS dan HTML, tergantung pada jenis perangkat.
Setiap metode memiliki pro dan kontra. Pengembang Web harus mengetahui setiap teknik untuk menerapkan yang terbaik untuk situasi tersebut.
3 Cara Merancang Situs Web Seluler
Desain Web Responsif (RWD)
RWD bergantung pada permintaan media CSS3 untuk menyelaraskan tata letak halaman web dengan ukuran area tampilan perangkat. Kode HTML yang sama digunakan untuk menyajikan tata letak halaman web yang berbeda untuk tablet, perangkat seluler, desktop, dan gadget lainnya.
Manfaat:
- Situs web Anda akan memiliki konten dan mark-up HTML yang serupa, sehingga pengunjung seluler akan memiliki pengalaman yang sama, apa pun jenis perangkat yang mereka gunakan.
- Satu URL memudahkan pengguna untuk menautkan dan berbagi konten. (Jika halaman web tersedia di lebih dari satu alamat URL, pengguna dapat menjadi bingung.)
Kekurangan:
Tidak mungkin mengoptimalkan konten seluler secara terpisah. Karenanya, perancang yang menggunakan RWD tidak dapat menyesuaikan konten secara terpisah untuk pengguna seluler.
Menurut data Januari 2013 dari arsip HTTP, laman web rata-rata sekitar 1,3 MB. Namun, sebagian besar situs RWD relatif lebih besar. Ukuran yang lebih besar ini mengurangi kinerja situs seluler, membuatnya lebih lambat.
Pengguna seluler lebih terbiasa dengan pola desain antarmuka pengguna khusus seluler. Selain itu, pengguna ponsel terbiasa dengan multi-tasking. Kecuali jika struktur navigasi disesuaikan untuk perangkat tertentu, pengguna dapat menghadapi masalah saat mencoba menyelesaikan beberapa tugas secara bersamaan.
Situs Seluler Khusus
Metode ini meningkatkan pengalaman pengguna ponsel dengan membuat situs web yang sepenuhnya terpisah.
Manfaat:
- Kesederhanaan manajemen: Diperlukan perubahan terpisah untuk situs seluler dan desktop. Perubahan yang dibuat terbatas pada setiap versi masing-masing. Ini berarti perubahan yang dimaksudkan untuk platform seluler tidak dapat diakses dari desktop.
- Saat Anda mengembangkan situs web khusus seluler, menjadi lebih mudah untuk merampingkan dan mengoptimalkannya secara khusus untuk pemirsa itu.
- Konten dan struktur navigasi dapat disesuaikan untuk pengguna seluler.
Kekurangan:
Berbagi halaman web melalui media sosial menjadi lebih sulit, karena dengan situs seluler khusus ada beberapa URL untuk halaman. Ketika pengguna desktop mengklik URL seluler yang dibagikan di platform media sosial, mereka mungkin secara tidak sengaja menerima versi seluler situs daripada versi desktop.
Untuk menghindari masalah duplikat konten, pengembang Web harus menggunakan tag meta rel = "alternative" dan rel = "canonical". Jika pengguna seluler mencari Google dan mengeklik URL desktop, pengguna akan melihat versi desktop atau akan diarahkan ke versi seluler laman web. Jika versi seluler tidak ada, pengguna akan menerima pesan kesalahan.
Membuat situs web yang sama sekali berbeda untuk pengguna seluler berarti bahwa situs tersebut akan dirancang khusus untuk pengguna seluler. Namun, untuk memenuhi tujuan itu, pengembang Web harus memotong fungsionalitas dan konten, yang ternyata menjadi mimpi buruk bagi mereka.
Desain Web Responsif+ Komponen Sisi Server (RESS)
Metode ini tergantung pada pemrograman sisi server untuk menyediakan HTML dan CSS khusus untuk berbagai perangkat. Kode untuk pengguna seluler akan berbeda dari pengguna desktop.
Tujuan utama di balik implementasi ini adalah untuk meningkatkan kinerja situs web. Metode ini bekerja dengan baik ketika dikombinasikan dengan desain Web yang responsif. Oleh karena itu, implementasi ini dapat disebut sebagai komponen sisi server (RESS) Desain Web Responsif +.
Manfaat:
- Struktur navigasi dapat disesuaikan untuk berbagai tugas yang dilakukan oleh pengguna desktop dan seluler.
- Pengembang dapat menghapus elemen halaman dari HTML dan CSS untuk mencapai tampilan yang diinginkan.
- Dimungkinkan untuk menghapus JavaScript yang tidak perlu dari HTML, yang membebaskan sumber daya CPU, memori, dan cache perangkat seluler.
Kekurangan:
- Dynamic HTML meningkatkan beban di server.
- Deteksi perangkat tidak dapat diandalkan.
- HTML dan CSS dioptimalkan untuk kinerja seluler. Versi desktop menggunakan lebih banyak permintaan HTTP dan Java Script.
Metode yang Dipilih?
Keputusan untuk merancang situs yang dioptimalkan untuk seluler bergantung pada produk yang Anda jual, audiens target Anda, investasi yang dibutuhkan, pesaing Anda, tingkat konversi, dll. Metode desain yang akan bekerja paling baik sangat tergantung pada format layar, sistem operasi, browser dan resolusi.
Sebagian besar situs web desain responsif tidak diimplementasikan secara optimal dan akibatnya, situs-situs ini membutuhkan lebih banyak waktu untuk memuat. Karena persaingan sangat ketat, Anda dapat kehilangan pelanggan jika situs Anda berkinerja lebih lambat. Seorang pengguna hanya akan beralih ke situs web lain yang membutuhkan waktu lebih sedikit untuk membuka. Meskipun dimungkinkan untuk membuat situs web dengan waktu pemuatan yang lebih pendek dengan situs seluler khusus, ada berbagai kelemahan yang terkait dengan penerapan ini juga.
RESS memberikan manfaat RWD mengatasi dua kelemahan utamanya. Kerugian utama RESS adalah deteksi perangkat tidak dapat diandalkan. Anda harus sering menguji perangkat baru untuk memastikan bahwa proses terus bekerja dengan baik.
Ada layanan seperti DeviceAtlas, WURFL dan lainnya yang dapat mendeteksi perangkat baru. Ini akan sangat membantu untuk memperbarui perangkat baru di basis data Anda.
Desain Web seluler hanya berhasil bila situs web ditampilkan dengan benar di perangkat seluler. Meskipun ini merupakan tugas yang menakutkan bagi para desainer untuk mewakili semua bagian penting dari situs desktop dalam jendela seluler kecil, setiap hari muncul teknik baru untuk menjadikan situs web seluler lebih baik, lebih cepat, dan lebih berfitur lengkap.
Foto Situs Web Seluler melalui Shutterstock
15 Komentar ▼
