Apakah Anda ingat Internet sekitar tahun 1997? Halaman dirancang untuk monitor CRT resolusi rendah dan modem lambat. Teks menguasai Web, dan sesekali gambar JPEG dan GIF menghiasi halaman di sana-sini. Seringkali kami tidak melihatnya, karena mematikan gambar adalah salah satu cara yang pasti untuk menambah kecepatan ekstra dari modem dial-up. Lebih dari satu dekade kemudian, lanskap Internet secara keseluruhan telah berubah. Internet broadband melalui koneksi kabel dan DSL adalah standar di negara maju, dan halaman Web dapat menggunakan elemen yang lebih kompleks — banyak gambar, efek transparansi, dan bahkan video — untuk menyampaikan konten. Kita bahkan dapat melakukan streaming seluruh film dari Internet ke komputer kita tanpa menunggu file diunduh!
Meskipun peralihan ke monitor beresolusi lebih tinggi, kecepatan broadband, dan opsi grafis mewah telah terjadi, tren kedua telah berdampak besar pada World Wide Web seperti yang ada saat ini. Seiring dengan berkembangnya teknologi telepon yang semakin maju dan lebih murah, telepon pintar telah menjadi bagian integral dari pengalaman berinternet. Perangkat seluler mewakili pintu gerbang utama ke Web bagi jutaan pengguna yang tidak memiliki PC. Misalnya, di India, penggunaan browser Web populer Opera Mini tumbuh sebesar 300 persen antara bulan Maret 2010 dan Maret 2011 . Di banyak belahan dunia, jendela Internet tidak terletak pada monitor berukuran 23 inci. Itu ada di layar ponsel 3 inci. Bahkan ponsel “bodoh” yang murah tanpa layar sentuh atau perangkat keras yang kuat pun dapat menjelajahi Web.
Masuk ke situs Web seluler. Karena popularitas penggunaan Internet seluler hadir bersamaan dengan layanan Internet berkecepatan tinggi dan perangkat keras komputer yang lebih canggih, pengembang konten online mempunyai tantangan unik. Situs web yang dirancang untuk monitor besar, komputer cepat, dan Internet cepat sangat bergantung pada grafis dan pemrograman mutakhir yang tidak selalu berfungsi pada layar yang lebih kecil dan jaringan perangkat seluler yang lebih lambat. Solusinya terletak pada situs Web seluler — halaman yang dirancang khusus untuk bekerja pada perangkat yang lebih kecil dan menyampaikan konten penting sekaligus mengurangi grafis yang memperlambat pemuatan halaman. Meskipun situs Web seluler sengaja dibuat lebih sederhana daripada situs lengkap, bukan berarti situs tersebut mudah dibuat. Situs Web Seluler masih memerlukan perhatian terhadap desain dan teknologi, dan keterbatasan perangkat keras seluler yang ketat tidak menjadikan segalanya lebih mudah.
Mengapa Situs Web Seluler Membutuhkan Pertimbangan Desain Khusus
Peralihan dari browser desktop ke browser seluler bukan hanya tentang mengecilkan layar. Ini tentang menghilangkan kebisingan. Saat Anda mendesain situs Web seluler, Anda tidak hanya membuat segalanya menjadi lebih kecil. Anda memikirkan kembali apa yang penting.
Pengguna desktop mengharapkan bakat visual. Mereka memiliki bandwidth dan jumlah piksel untuk menanganinya. Pengguna seluler? Tidak terlalu banyak. Pengguna yang menggunakan koneksi 3G di daerah pedesaan tidak menunggu gambar pahlawan dimuat. Mereka menginginkan teksnya. Mereka menginginkan datanya. Jika Anda memaksakan pengalaman tingkat desktop ke perangkat seluler, Anda tidak inovatif. Anda menjadi penghalang.
Hal ini menimbulkan masalah khusus bagi pengembang. Bagaimana Anda menyeimbangkan kebutuhan akan konten yang kaya dengan realitas sumber daya yang terbatas?
Kendala inti desain web seluler:
- Ruang layar terbatas. Layar 3 inci tidak dapat menampilkan tata letak yang sama dengan monitor 23 inci. Navigasi harus intuitif, tidak luas.
- Kekuatan perangkat keras sangat bervariasi. Meskipun ponsel cerdas semakin canggih, ponsel biasa masih tetap ada. Kode yang berjalan lancar di iPhone mungkin terhenti di perangkat Android entry-level atau ponsel menengah.
- Ketidakstabilan jaringan adalah hal yang biasa, bukan pengecualian. Berbeda dengan koneksi broadband yang stabil di rumah, jaringan seluler berfluktuasi. Aset berat menghabiskan waktu pemuatan.
Ini adalah perjalanan di atas tali. Anda memotong terlalu banyak, dan situs tersebut terlihat rusak. Anda menyimpan terlalu banyak, dan muatannya seperti tahun 1998 lagi.
“Situs Web Seluler sengaja dibuat lebih sederhana daripada situs lengkap, namun bukan berarti situs tersebut mudah dibuat.”
Ini bukan tentang
Layar Real Estat Mendikte Desain
Itu turun ke inci persegi. Atau lebih tepatnya, kekurangannya.
Bahkan layar ponsel pintar terbesar—yang diagonalnya melebihi empat inci (10,2 cm)—terlihat seperti prangko di sebelah monitor desktop. Angka resolusi mungkin meningkat, tetapi fisika tidak berbohong. Jumlah piksel yang tinggi pada layar kecil masih tidak dapat menampilkan seluruh situs web dengan jelas. Anda akhirnya mencubit untuk memperbesar, melawan tata letak multi-kolom yang mengubah navigasi menjadi permainan yang mendera.
Desain web seluler yang baik bukan berarti mengecilkan situs desktop. Ini tentang memulai kembali dengan tata letak satu kolom.
Itu berarti memadatkan segala sesuatu menjadi satu aliran vertikal. Anda mengatur ulang tautan navigasi. Anda membuang sampah dekoratif. Anda mempersempit kolom utama agar sesuai dengan lebar ponsel sebenarnya. Kebanyakan monitor berbentuk persegi panjang lebar. Telepon? Garis-garisnya tinggi. Tentu, Anda dapat memutar perangkat ke mode lanskap, tetapi pengalaman defaultnya adalah potret. Rancang jalur sempit terlebih dahulu.
Lalu ada masalah metode masukan.
Browser desktop mengandalkan mouse. Arahkan kursor ke menu, dan dropdown muncul. Cobalah dengan ibu jari. Itu tidak berhasil. Desain Web Seluler memerlukan pemikiran ulang tentang “status gerakan mouse” ini. Menu perlu diketuk, bukan diarahkan. Tombol harus cukup besar untuk ukuran jari, bukan kursor yang tepat. Jika situs Anda mengandalkan efek hover, situs tersebut sudah rusak di seluler.
Mimpi Buruk Fragmentasi Perangkat
Membangun untuk desktop cukup sulit. Anda mengalami Internet Explorer yang gagal, Firefox melakukan tugasnya, dan Chrome memakan semua RAM. Tapi seluler? Ini adalah binatang yang sama sekali berbeda.
Variasi perangkat kerasnya sangat mencengangkan. Di satu sisi, Anda memiliki ponsel “bodoh” dengan layar kecil beresolusi rendah dan browser dasar. Di sisi lain, Anda memiliki ponsel cerdas dengan layar sentuh beresolusi tinggi dan tajam serta prosesor bertenaga.
Satu ukuran tidak cocok untuk semua. Terkadang, Anda memerlukan antarmuka terpisah.
Lihat Facebook. Itu tidak hanya menyajikan HTML yang sama untuk semua orang. Ini mendeteksi perangkat apa yang Anda gunakan. Jika Anda menggunakan iPhone atau Android, Anda mendapatkan pengalaman khusus yang dioptimalkan untuk kemampuan layar dan browser tertentu. Jika Anda menggunakan ponsel berfitur, Anda mendapatkan versi yang lebih ringan.
Satu situs seluler tidak cukup. Anda harus mendesain untuk perangkatnya, bukan hanya browsernya.
Logika deteksi ini adalah jembatan antara pengguna dan antarmuka yang tepat. Teknologilah yang membuat desain menjadi mungkin.
Lebih Cerdas, Bukan Lebih Sederhana
Menyederhanakan antarmuka tidak berarti mengurangi pengalaman. Faktanya, seluler bisa lebih canggih daripada desktop untuk tugas tertentu.
Ponsel pintar memiliki perangkat keras yang tidak dimiliki PC. Kamera. GPS. Akselerometer.
Kode QR adalah contoh sempurna. Arahkan kamera Anda ke sebuah kode, dan kode itu akan langsung meluncurkan situs web atau mengunduh aplikasi. Tidak ada URL pengetikan. Tidak ada pencarian. Cukup pindai dan pergi.
Peta dikaitkan dengan data GPS untuk memberi Anda petunjuk arah atau rekomendasi restoran secara real-time berdasarkan lokasi persis Anda. Ini bukan sekadar “situs web yang lebih kecil”. Ini adalah utilitas yang berbeda.
Membuat situs seluler yang efisien memerlukan penggunaan teknologi backend ini secara cerdas. Ini bukan hanya tentang CSS dan HTML. Ini tentang memanfaatkan perangkat itu sendiri. Desain dan teknologi adalah dua sisi dari mata uang yang sama. Anda tidak dapat memiliki yang satu tanpa yang lain.
Mari kita lihat lebih dekat bagaimana pendeteksian tersebut terjadi. Bagaimana Facebook mengetahui bahwa Anda menggunakan iPhone dan bukan Nokia lama?
Melayani Pengalaman Seluler: Deteksi, Subdomain, dan Pilihan Pengguna
Anda melihat garis yang bersih dan teks yang dapat dibaca. Kelihatannya sederhana. Di balik terpal itu terdapat kekacauan rekayasa yang cerdas. Desain web modern mengandalkan Cascading Style Sheets atau CSS. Kode ini menentukan font, warna, margin, dan lebar halaman. Kontennya ada di database atau file HTML. CSS memutuskan bagaimana konten itu terlihat.
Setiap perubahan desain yang disebutkan sebelumnya terjadi di sini. Untuk mempercepat situs seluler, Anda menukar gambar latar belakang yang tebal dengan warna solid. Ini menghemat bandwidth. Itu membuat halaman dimuat lebih cepat.
Membangun situs adalah langkah pertama. Membuat orang menggunakannya adalah langkah kedua. Tidak ada satu cara yang tepat untuk menghadirkan situs seluler. Ada beberapa pilihan.
Metode paling sederhana adalah tautan. Anda menaruhnya di situs lengkap. Dikatakan “Lihat situs seluler”. Seringkali pengembang menggunakan subdomain seperti m.website.com. Ini mudah untuk diurai. Website.com menuju ke versi desktop. m.website.com menuju ke versi seluler. Beberapa situs menggunakan i.website.com karena iPhone. Kode ini bekerja dengan cara yang sama.
Beberapa pengguna harus mengetik m.website.com secara manual. Sebagian besar situs mengotomatiskan proses ini.
Bagaimana Situs Web Seluler Mendeteksi Perangkat Anda
Teknik lain lebih kompleks. Banyak situs mendeteksi jenis perangkat Anda secara otomatis. Mereka memutuskan file CSS mana yang akan disajikan berdasarkan perangkat keras Anda.
Hal ini terjadi dengan menanyakan perangkat. Server memeriksa faktor pengidentifikasi seperti lebar layar dalam piksel. Bunyinya string agen pengguna. String ini menyatakan browser apa yang memuat halaman.
Kueri media adalah baris kode CSS. Mereka mereferensikan string agen pengguna. Mereka memilih faktor pengidentifikasi tertentu. Jika agen pengguna mengidentifikasi sebagai browser seluler dengan layar sempit, server akan memuat halaman seluler.
Metode ini mempunyai kelemahan. Beberapa browser memungkinkan Anda memalsukan agen pengguna. Browser baru terus-menerus merilis string baru. Server umumnya mengirimkan situs yang tepat ke perangkat yang tepat. Tapi itu tidak sempurna.
Sistem identifikasi ini terkait dengan opsi lain. Beri pengguna pilihan. Navigasikan ke IMDB.com di ponsel. Ini memuat situs seluler secara otomatis. Ini juga meminta Anda untuk mengunduh aplikasi seluler. Aplikasi ini menawarkan lebih banyak fitur.
Kelebihan dan Kekurangan Browser Seluler
Situs seluler biasanya bekerja lebih baik daripada situs lengkap di ponsel cerdas. Mereka dibuat khusus untuk layar kecil. “Satu ukuran cocok untuk semua” jarang berhasil.
Tapi “lebih baik” itu relatif. Situs seluler menawarkan pengalaman terbatas. Mereka memperhitungkan keterbatasan perangkat. Navigasi sering kali hilang. Ruang layar tidak cukup untuk membuat menu tetap terlihat setiap saat.
Berinteraksi dengan suatu situs adalah bagian tersulit dalam penjelajahan seluler. Menggulir formulir masukan membutuhkan waktu. Memilih bidang itu membosankan. Mengetik di ponsel lebih lambat dibandingkan di komputer. Layar sentuh dan keyboard perangkat lunak memperburuk keadaan.
Browser ponsel dapat menyimpan cookie. Mereka mengingat kata sandi seperti yang dilakukan browser desktop. Ini membantu. Browser dengan desktop yang setara seperti Firefox untuk Android dan Opera Mobile dapat menyinkronkan data. Anda membawa data yang disimpan dari komputer Anda. Ini menyederhanakan penjelajahan di kedua platform.
Ponsel juga punya trik. Pinch-to-zoom memperbesar teks. Ketuk untuk memperbesar ukuran menyesuaikan satu paragraf dengan lebar layar.
Mengapa Video Flash Gagal di Perangkat Seluler
Video flash memasuki setiap diskusi tentang penelusuran seluler. Ini menuntut prosesor. Ini menghabiskan masa pakai baterai. Ini telah membaik selama bertahun-tahun. Ini berfungsi di banyak perangkat.
Ini tidak berfungsi pada perangkat Apple mana pun.
Apple memblokir video Flash di iOS. Mereka mendukung video HTML5 sebagai gantinya. YouTube menggunakan video HTML5. Banyak situs lain juga melakukannya.
Anda dapat menyematkan video Flash di halaman web seluler. Ini bertentangan dengan prinsip desain seluler. Kesederhanaan adalah kekuatan terbesar situs seluler. Mereka memuat dengan cepat karena menggunakan teks dan gambar kecil. Flash memecahkan ini.
Menempatkan Flash di situs Anda membatasi pengguna iPhone. Mereka tidak dapat berinteraksi dengan halaman tersebut. Anda kehilangan sebagian besar audiens Anda.
Belanja Seluler: Apakah Sebenarnya Lebih Aman Dibandingkan Desktop?
Ini sebuah perubahan. Ponsel Anda mungkin merupakan tempat yang lebih aman untuk meletakkan kartu kredit Anda.
Kebanyakan virus web menargetkan Windows. Mereka tidak berjalan di iOS atau Android. Anda pada dasarnya tidak terlihat oleh sejumlah besar malware hanya karena Anda tidak menggunakan PC. Ponsel modern mendukung enkripsi HTTPS dan SSL seperti halnya laptop Anda.
Tapi jangan sombong.
Anda masih perlu memperhatikan bilah URL. Cari ikon gembok. Tetap berpegang pada situs yang memiliki reputasi baik. Jika sebuah situs terlihat samar di desktop, situs tersebut juga terlihat samar di ponsel. Hanya lebih kecil. Lanskap ancaman berubah, namun prinsipnya tetap ada. Berhati-hati lebih baik daripada menyesal.
Desain Laman Seluler Dijelaskan
Apa itu desain halaman seluler?
Ini bukan hanya situs web yang diperkecil. Ini adalah pengoptimalan khusus untuk layar sentuh dan area pandang sempit. Berpikirlah lebih kecil. Lebih sederhana. Tidak ada kekacauan.
Situs desktop mengandalkan gerakan mouse dan klik yang tepat. Ponsel mengandalkan jempol. Itu mengubah segalanya. Tombol menjadi lebih besar. Menu disembunyikan. Konten diprioritaskan. Jika Anda mencoba membaca paragraf padat di layar 6 inci, Anda melawan perangkat. Desain seluler yang bagus menghentikan pertarungan itu sebelum dimulai.
Situs Web Seluler vs. Situs Tradisional
Orang-orang selalu mengacaukan istilah-istilah ini. Mari kita pisahkan.
Situs web standar dibuat untuk desktop. papan ketik. Tikus. Monitor besar. Ini mengasumsikan Anda memiliki bandwidth dan kesabaran.
Situs web seluler dibuat untuk ponsel cerdas dan tablet. Ini menghilangkan lemaknya. Fitur yang tidak berfungsi pada layar sentuh akan terpotong. Kompres gambar. Skrip menjadi lebih ringan.
Perbedaan itu penting.
Mengapa? Karena situs seluler memuat lebih cepat. Mereka menggunakan lebih sedikit data. Ini bukan hanya kenyamanan bagi pengguna Apple di Manhattan. Ini merupakan kebutuhan bagi masyarakat di negara-negara berkembang di mana internet berkecepatan tinggi merupakan sebuah kemewahan, bukan sebuah utilitas. Jika situs Anda berat, mereka tidak dapat memuatnya. Periode.
Mengapa Desain Seluler Penting
Hal ini disebabkan oleh gesekan.
Penjelajahan desktop efisien. Penjelajahan seluler itu nyaman. Anda memiliki internet di saku Anda. Namun mengetik di layar kaca itu membosankan.
Desain ponsel yang bagus membuat rasa bosan itu hilang. Itu menghormati waktu Anda. Itu menghormati paket data Anda. Ini menghormati fakta bahwa Anda mungkin berjalan sambil menggunakannya.
Periklanan juga berfungsi di sini. Tapi pop-up raksasa? Tidak. Itu dilarang oleh sebagian besar browser seluler. Google AdSense sesuai dengan kebutuhan Anda. Kecil. Tidak mengganggu. Relevan.
Web seluler bukanlah versi yang lebih rendah dari web desktop. Itu binatang yang berbeda. Perlakukan seperti itu.
