Cara Kerja Halaman Web Seluler

Jun 27 2011
Seringkali, situs Web yang Anda lihat di ponsel cerdas Anda sangat berbeda dari versi yang Anda lihat di layar komputer Anda. Bagaimana server Web mengetahui bahwa Anda menggunakan perangkat seluler, dan bagaimana halaman seluler yang disederhanakan dirancang?
Untuk membuat halaman mereka mudah diakses di perangkat seluler, beberapa pengembang Web mengupas konten mereka hingga ke dasar-dasarnya saja.

Apakah Anda ingat Internet sekitar tahun 1997? Halaman dirancang untuk monitor CRT resolusi rendah dan modem lambat. Teks menguasai Web, dan terkadang gambar JPEG dan GIF menghiasi halaman di sana-sini. Sebagian besar waktu kami tidak melihatnya, karena mematikan gambar adalah salah satu cara pasti untuk menambah kecepatan ekstra dari modem dial-up. Lebih dari satu dekade kemudian, seluruh lanskap Internet telah berubah. Internet broadband melalui kabel dan koneksi DSL adalah standar di negara maju, dan halaman Web dapat menggunakan elemen yang lebih kompleks -- berton-ton gambar, efek transparansi, dan bahkan video -- untuk menyampaikan konten. Kami bahkan dapat melakukan streaming seluruh film dari Internet ke komputer kami tanpa menunggu file diunduh!

Sebesar pergeseran ke monitor resolusi lebih tinggi, kecepatan broadband dan pilihan grafis yang mewah, tren kedua memiliki dampak besar pada World Wide Web seperti yang ada saat ini. Karena teknologi telepon telah berkembang lebih maju dan lebih murah, telepon pintar telah menjadi bagian integral dari pengalaman Internet. Perangkat seluler mewakili pintu gerbang utama ke Web untuk jutaan dan jutaan pengguna yang tidak memiliki PC. Misalnya, di India, penggunaan browser Web populer Opera Mini tumbuh 300 persen antara Maret 2010 dan Maret 2011 [sumber: Real Time News ]. Di banyak bagian dunia, jendela ke Internet tidak ada di monitor 23 inci. Itu pada layar ponsel 3 inci. Bahkan ponsel "bodoh" murah tanpa layar sentuh atau perangkat keras yang kuat dapat menjelajahi Web.

Masuk ke situs Web seluler. Karena popularitas penggunaan Internet seluler telah tiba berdampingan dengan layanan Internet berkecepatan tinggi dan perangkat keras komputer yang lebih kuat, pengembang konten online memiliki tantangan unik. Situs web yang dirancang untuk monitor besar, komputer cepat, dan Internet cepat sangat bergantung pada grafik 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 memberikan konten penting sambil mengurangi grafik yang memperlambat pemuatan halaman. Meskipun situs Web seluler sengaja dibuat lebih sederhana daripada situs lengkap, itu tidak berarti mereka mudah dibuat. Situs Web Seluler masih memerlukan perhatian pada desain dan teknologi,

Isi
  1. Desain Situs Web Seluler
  2. Teknologi Situs Web Seluler
  3. Keuntungan dan Kerugian Situs Seluler

Desain Situs Web Seluler

Facebook menggunakan beberapa desain situs seluler, dan menyajikan desain yang paling sesuai dengan perangkat yang mengakses aplikasi sosial populer.

Teknologi dan kecepatan Internet memainkan peran utama dalam membedakan platform seluler dari komputer lengkap, tetapi pada akhirnya semuanya tergantung pada ukuran. Bahkan layar ponsel pintar terbesar yang berukuran lebih dari empat inci (10,2 sentimeter) secara diagonal sangat kecil dibandingkan dengan monitor komputer. Sementara resolusi gambar dari tampilan ini terus bertambah, secara fisik mereka terlalu kecil untuk menampilkan seluruh situs Web secara terbaca. Membacanya membutuhkan zoom in, dan seringkali tata letak multi-kolom situs modern membuat navigasi dan konsumsi konten menjadi sulit. Kegunaan situs Web yang optimal berasal dari pemahaman tentang karakteristik pendefinisian platform. Untuk seluler, itu dimulai dengan ukuran layar.

Desain Web Seluler harus fokus pada tata letak satu kolom yang memadatkan semua konten menjadi satu pengaturan yang ringkas. Ini mungkin memerlukan pengaturan ulang tautan navigasi, menghapus elemen halaman yang kurang penting, dan membuat kolom utama lebih sempit untuk memperhitungkan dimensi ponsel. Meskipun monitor lebih lebar daripada tingginya, sebagian besar layar ponsel dirancang untuk orientasi potret -- Anda selalu dapat membalikkan ponsel untuk menelusuri situs, tetapi tata letak seluler perlu memperhitungkan sempitnya orientasi default tersebut. Tata letak bukan satu-satunya perhatian -- karena perangkat seluler tidak menggunakan mouse seperti PC , "kondisi mouseover" seperti menu tarik-turun harus didesain ulang agar berfungsi dengan input sentuh atau tombol telepon [sumber: Smashing Magazine ].

Poin terakhir itu mengarah ke tantangan lain dari desain situs Web seluler: variasi browser dan perangkat keras. Cukup sulit untuk membangun situs Web lengkap yang memperhitungkan keistimewaan browser seperti Internet Explorer, Mozilla Firefox dan Google Chrome . Di dunia seluler, beberapa orang menjelajahi Web di ponsel "bodoh" dengan layar kecil beresolusi rendah; yang lain menggunakan ponsel pintar dengan tampilan dan layar sentuh beresolusi jauh lebih tinggi! Terkadang satu situs seluler tidak cukup -- masuk akal untuk merancang antarmuka seluler terpisah untuk berbagai perangkat. Facebook, misalnya, menyajikan situs yang disesuaikan untuk pengunjung ponsel pintar dengan mendeteksi kemampuan perangkat yang mereka gunakan [sumber: PC World ]. Kami akan membahas teknologi di balik itu di bagian selanjutnya.

Meskipun desain Web seluler memerlukan antarmuka yang disederhanakan, itu tidak selalu menghasilkan situs Web yang bodoh. Sebaliknya, ponsel pintar menawarkan fitur-fitur canggih yang tidak tersedia di komputer. Kode QR yang dipindai oleh kamera ponsel dapat langsung meluncurkan situs Web atau mengunduh aplikasi. Peta dapat dikaitkan dengan data GPS untuk memberi Anda petunjuk arah atau rekomendasi restoran terdekat. Dibutuhkan penggunaan teknologi yang cerdas di belakang layar untuk membuat situs seluler yang efisien. Mari kita lihat bagaimana teknologi dan desain adalah dua sisi dari mata uang yang sama.

Teknologi Situs Web Seluler

Tombol kecil dan keyboard berbasis perangkat lunak pada ponsel dapat membuat pengisian formulir di situs Web seluler menjadi rumit.

Situs Web seluler mudah dikenali berkat desainnya, tetapi seseorang, di suatu tempat, memasukkan banyak rekayasa cerdas ke dalam produk itu. Desain Web modern biasanya dibangun menggunakan cascading style sheets (CSS). Sesuai dengan namanya, style sheet mengontrol elemen gaya halaman -- font, warna teks, lebar halaman, margin, dan sebagainya. Sementara konten situs Web Anda dapat disimpan dalam database atau dalam file HTML, CSS menentukan bagaimana konten tersebut disajikan. Semua perubahan desain yang disebutkan di bagian sebelumnya dilakukan melalui CSS, dan penyesuaian lainnya dapat dilakukan untuk mengoptimalkan pengalaman menjelajah untuk perangkat seluler. Mengganti latar belakang gambar besar dengan warna solid sederhana, misalnya, akan membuat situs seluler memuat lebih cepat dan menggunakan lebih sedikit bandwidth.

Membangun situs Web seluler adalah langkah pertama. Setelah situs ada, pengunjung harus menggunakannya. Tidak ada cara yang jelas dan tepat untuk mengirimkan situs seluler, tetapi ada beberapa opsi yang layak. Yang paling sederhana adalah memiliki tautan di situs lengkap di suatu tempat yang mengatakan "Lihat situs seluler." Seringkali pengembang menggunakan subdomain -- biasanya m.website.com -- untuk mengarahkan pengguna ke situs Web seluler. Itu mudah dimengerti. Website.com membuka situs lengkap, m.website.com membuka situs seluler. Beberapa situs menggunakan i.website.com sebagai gantinya karena popularitas iPhone, tetapi implementasinya persis sama. Meskipun banyak situs menggunakan sistem untuk secara otomatis mengarahkan browser seluler ke situs seluler (dijelaskan di bawah), terkadang satu-satunya cara untuk membuka situs seluler tersebut adalah dengan mengetikkan alamat m.website.com secara manual. Untuk informasi selengkapnya tentang cara menangani alamat situs Web, lihat artikel kami tentang Cara Kerja Server Nama Domain .

Teknik lain untuk menyajikan halaman seluler lebih rumit. Banyak situs Web secara otomatis mendeteksi jenis perangkat yang Anda gunakan untuk memutuskan file CSS mana yang akan ditayangkan. Ini dapat dilakukan dengan menanyakan perangkat dan menentukan beberapa faktor pengenal -- misalnya, berapa banyak piksel lebar layar -- atau dengan membaca string agen pengguna, yang menyatakan browser apa yang digunakan untuk memuat halaman Web [sumber: Smashing Majalah]. "Kueri media" adalah baris kode dalam lembar gaya berjenjang yang mereferensikan string agen pengguna untuk memilih salah satu faktor pengidentifikasi tersebut. Jika agen pengguna mengidentifikasi dirinya sebagai browser seluler dengan lebar layar tertentu, informasi tersebut dapat digunakan untuk menentukan jenis halaman Web yang akan dimuat. Metode ini tidak selalu bekerja dengan sempurna -- beberapa browser memungkinkan Anda untuk "menipu" agen pengguna dan string agen pengguna baru selalu keluar dengan browser baru -- tetapi secara umum, server Web akan mengirimkan situs seluler dengan benar ke perangkat seluler dengan asumsi mereka memiliki satu untuk ditawarkan. Metode identifikasi ini dapat dikaitkan dengan opsi lain: Beri pengguna pilihan. Menavigasi ke IMDB.com di perangkat seluler akan secara otomatis memuat situs seluler, tetapi menawarkan pengguna permintaan untuk mengunduh aplikasi seluler yang menawarkan lebih banyak fitur.

Itulah dasar-dasar membangun dan menyajikan situs Web seluler. Tapi ada sedikit lebih dari itu. Karena menggunakan telepon sangat berbeda dengan menggunakan komputer, ada tantangan dalam membawa elemen Web tradisional ke situs seluler. Halaman berikutnya akan membahas kelebihan dan kekurangan browser seluler dan elemen interaktif seperti bidang kata sandi, formulir, dan video Flash yang membentuk Web modern.

Keuntungan dan Kerugian Situs Seluler

Situs Web Seluler pasti bekerja lebih baik daripada situs web lengkap mereka di ponsel pintar karena dibuat khusus untuk perangkat kecil. "Satu ukuran cocok untuk semua" bukanlah solusi terbaik. Meskipun demikian, situs seluler tidak selalu "lebih baik" daripada situs lengkap di perangkat seluler. Karena situs dirancang untuk penjelajahan yang mudah di ponsel, mereka memperhitungkan keterbatasan perangkat tersebut dan sebagai hasilnya menawarkan pengalaman yang terbatas. Navigasi situs seluler, misalnya, tidak akan selalu dapat diakses sebagai navigasi biasa karena tidak ada cukup ruang layar untuk membuatnya tetap terlihat setiap saat.

Berinteraksi dengan situs Web mungkin merupakan bagian tersulit dari pengalaman menjelajah seluler. Dibutuhkan jauh lebih lama untuk menggulir formulir input, memilih bidang individual dan mengetikkannya di telepon daripada di komputer. Masalah ini diperburuk oleh layar sentuh dan keyboard perangkat lunak. Untungnya, browser ponsel dapat menyimpan cookiedan mengingat kata sandi seperti browser desktop, membuat pengalaman seluler sedikit lebih mudah. Beberapa browser yang dibuat untuk ponsel yang setara dengan desktop, seperti Firefox untuk Android dan Opera Mobile, dapat menyinkronkan kata sandi dan data tersimpan lainnya dari pengaturan browser di komputer Anda. Ini adalah cara yang bagus untuk membawa data Anda dan menyederhanakan pengalaman menjelajah di situs seluler dan situs lengkap. Ponsel pintar modern juga memiliki beberapa trik yang membuat navigasi menjadi menyenangkan: Pinch-to-zoom dapat dengan mudah memperbesar area teks, dan sebagian besar browser menggunakan tindakan "tap-to-zoom" yang memperbesar lebar yang tepat dari gugus kalimat.

Ketika penjelajahan Web seluler adalah topik yang dibahas, Flash mau tidak mau masuk ke dalam diskusi. Video flash menuntut prosesor dan masa pakai baterai tetapi telah meningkat selama bertahun-tahun dan sekarang berfungsi di banyak perangkat seluler -- tetapi tidak pada perangkat apa pun yang diproduksi oleh Apple. Apple tidak mengizinkan video Flash untuk diputar di iOS dan sebaliknya mendukung video HTML5, yang sudah digunakan oleh banyak situs video seperti YouTube. Meskipun video Flash dapat disematkan di halaman Web seluler, praktik itu bertentangan dengan kekuatan terbesar desain seluler: kesederhanaan. Situs seluler yang ringan dimuat dengan cepat karena sebagian besar berupa teks dan gambar kecil. Selain itu, menempatkan Flash di situs seluler Anda berarti membatasi bagaimana pengguna iPhone dapat berinteraksi dengan halaman Web Anda.

Meskipun desainer Web harus membuat pilihan yang cermat tentang konten apa yang mereka tampilkan dan bagaimana mereka mengatur halaman seluler, pengalaman Web seluler sebenarnya tidak jauh berbeda dari yang sebenarnya. Iklan juga berfungsi di situs Web seluler, meskipun jelas sistem seperti Google AdSense lebih cocok untuk situs kecil daripada iklan pop-up raksasa. Browsing di ponsel pintar tidak akan pernah seefisien menggunakan mouse, keyboard, dan monitor besar, tetapi mereka selalu dekat. Desain seluler yang baik membuat pengalaman menjadi senyaman mungkin.

Apakah aman berbelanja online dari ponsel Anda?

Dalam beberapa hal, penelusuran telepon sebenarnya lebih aman daripada penelusuran desktop -- sebagian besar virus di Web menargetkan Windows dan tidak akan berfungsi pada sistem operasi seluler. Ponsel pintar modern mendukung teknologi penjelajahan aman seperti HTTPS dan SSL, tetapi Anda harus berhati-hati saat berbelanja di ponsel seperti halnya di komputer lain. Berbelanja di situs terkemuka dan perhatikan bilah URL untuk memastikan protokol enkripsi tersedia untuk menjaga informasi pribadi dan data kartu kredit Anda tetap aman!

Banyak Informasi Lebih Lanjut

Artikel Terkait

  • Cara Kerja Halaman Web
  • Bagaimana Sistem Operasi Web Bekerja
  • Cara Kerja iPhone
  • Cara Kerja Broadband Seluler

Sumber

  • Gube, Yakub. "8 Alat Untuk Membuat Situs Web Anda Versi Seluler dengan Mudah." 16 Desember 2010. (13 Juni 2010). http://mashable.com/2010/12/16/create-mobile-site-tools/
  • HSWSolutions.com. "Keuntungan Pengoptimalan Situs Web Seluler." (16 Juni 2011) http://www.hswsolutions.com/services/mobile-web-development/advantages/
  • Ionescu, Daniel. "Facebook Menggabungkan Situs Seluler untuk Semua Ponsel." 1 April 2011. (13 Juni 2011)
  • http://www.pcworld.com/article/223997/facebook_merges_mobile_sites_for_all_phones.html
  • MobiForge.com. "Iklan seluler: cara memonetisasi situs seluler Anda." Juni 2007. "16 Juni 2011) http://mobiforge.com/running/story/mobile-advertising-how-monetize-your-mobile-site
  • Raasch, Jon. "Cara Membuat Situs Seluler." 3 November 2010. (13 Juni 2011) http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
  • Thomas, Trisha. "Penggunaan web seluler India empat kali lipat dalam satu tahun: Opera." 21 April 2011. (13 Juni 2011) http://rtn.asia/256_india-mobile-web-usage-quadruples-one-year-opera
  • Webcredible.co.uk. "7 pedoman kegunaan untuk situs web di perangkat seluler." Maret 2011. (13 Juni 2011) http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml