Situs versi seluler: bagaimana melakukannya? Desain adaptif

Daftar Isi:

Situs versi seluler: bagaimana melakukannya? Desain adaptif
Situs versi seluler: bagaimana melakukannya? Desain adaptif
Anonim

Saat ini, kebanyakan orang online melalui gadget seluler - tablet, ponsel, dalam hal ini, pengoptimalan situs web juga mencapai tingkat yang baru. Jika pengguna masuk dan melihat bahwa situs tersebut tidak dioptimalkan untuk perangkat seluler: gambar tidak dapat dilihat, tombol telah dipindahkan, fontnya kecil dan tidak dapat dibaca, desainnya miring - 99 dari 100% dia akan keluar dan mulai mencari yang lain yang lebih nyaman. Dan robot pencarian akan mencentang kotak bahwa sumber daya tidak relevan, yaitu tidak cocok dengan permintaan pencarian. Oleh karena itu, desain halaman harus disesuaikan dengan berbagai perangkat seluler. Apa itu versi mobile dari situs tersebut, bagaimana cara membuatnya, dan bagaimana cara terbaik untuk menerapkannya? Baca selengkapnya di artikel ini.

Jadi, ada empat cara utama untuk membuat situs Anda ramah seluler.

cara membuat situs versi seluler
cara membuat situs versi seluler

Metode Satu - Desain Responsif

Templat responsif mengubah gambar situs tergantung pada ukuran layar. Sebagai aturan, mereka diatur ke standar 1600, 1500, 1280, 1100, 1024 dan 980 piksel. Untuk implementasi, Kueri Media CSS3 digunakan. Desain situs itu sendiri tidak berubah.

Kelebihan metode ini antara lain:

  • pengembangan yang nyaman,karena struktur itu sendiri menyesuaikan dengan parameter layar, dan pembaruan apa pun tidak memerlukan pengembangan desain dari awal, cukup dengan mengubah CSS dan HTML;
  • satu URL – pengguna tidak perlu mengingat beberapa nama, tidak perlu redirect (pengalihan dari satu alamat ke alamat lain), yang dapat mempersulit pekerjaan seorang webmaster, dan lebih mudah untuk pencarian mesin untuk mengurutkan dan memberi peringkat sumber daya dengan satu alamat.

Tentu saja, template adaptif memiliki kekurangan, yang lebih dari sekadar kelebihan. Namun demikian, banyak pengembang yang menganut konsep ini, misalnya, Google Corporation, yang versi seluler situsnya memiliki desain adaptif. Jadi, kerugiannya:

  • Desain responsif tidak mendukung tugas yang sama di ponsel seperti di PC. Jika ini, misalnya, versi seluler dari situs web bank, di mana informasi tentang nilai tukar atau ATM terdekat lebih mungkin penting bagi pengguna, maka desain ini sudah cukup. Tetapi jika ini adalah sumber daya terstruktur yang kompleks dengan banyak bagian dan subbagian, maka pengunjung tidak akan menyukai tata letak adaptif.
  • Pemuatan lambat mengubah situs favorit menjadi situs penuh kebencian. Hal ini terutama berlaku untuk sumber daya di mana animasi, video, pop-up, dan elemen aktif lainnya berlimpah. Karena bobotnya yang tinggi, halaman hanya akan “melambat”, pengguna akan marah dan pergi, dan posisi pencarian situs akan turun.
  • Ketidakmampuan untuk mematikan versi seluler adalah kelemahan signifikan lainnya. Jika beberapa elemen disembunyikan oleh tata letak seperti itu, Andatidak ada yang dapat Anda lakukan untuk membukanya, tidak seperti situs di mana Anda dapat mematikannya dan beralih ke domain biasa.

Namun, versi situs seluler dengan cepat, tanpa keahlian dan biaya khusus, memungkinkan Anda untuk menyesuaikan sumber daya dengan gadget apa pun. Namun, mengingat kekurangan yang terdaftar, itu akan sesuai dengan sumber daya yang kecil dan sederhana dengan informasi dan multimedia yang minimal, tanpa navigasi dan animasi yang rumit. Untuk situs yang kompleks, 2 metode lain cocok.

desain situs
desain situs

Metode kedua - versi situs yang terpisah

Metode ini sangat umum dan sering berhasil membuat situs lebih mudah dibaca di perangkat seluler. Esensinya adalah membuat versi halaman yang terpisah, digambar untuk aplikasi dan terletak di URL atau subdomain yang terpisah, misalnya, m.vk.com. Pada saat yang sama, fungsi utama dipertahankan, desain situs hanya terlihat berbeda. Keuntungan dari metode ini jelas:

  • antarmuka yang ramah pengguna;
  • mudah diubah dan diedit karena versinya terpisah dari sumber utama;
  • karena bobotnya yang ringan, versi situs yang terpisah bekerja jauh lebih cepat daripada template adaptif;
  • paling sering dimungkinkan untuk membuka versi utama halaman dari ponsel.

Tapi ada beberapa kekurangan di sini juga:

  • Beberapa alamat - situs versi desktop dan seluler. Bagaimana membuat pengguna mengingat dua opsi? Master web sering meresepkan pengalihan (redirect) dari versi desktop ke versi seluler, tetapi pada saat yang sama, jika halaman ini ada di selulerversi tidak ada, pengguna akan menerima kesalahan. Di sini, kesulitan muncul dengan mesin pencari, yang sulit untuk menentukan peringkat 2 sumber daya yang identik, dan ini secara langsung mempengaruhi promosi.
  • Versi situs seluler dari komputer, jika pengguna mengunjunginya secara tidak sengaja, akan terlihat konyol, yang juga dapat memengaruhi lalu lintas.
  • Versi ini sering sangat dibatasi, desktop, sehingga pengguna akan mendapatkan fungsionalitas yang sangat terbatas. Tetapi pada saat yang sama, jika ada sesuatu yang hilang, pengunjung dapat membuka halaman versi lengkap.

Secara umum, situs seluler terpisah membenarkan dirinya sendiri dan merupakan cara paling umum untuk mengadaptasi sumber daya untuk perangkat seluler. Ini populer di toko online besar seperti Amazon.

template ada-t.webp
template ada-t.webp

Cara Ketiga - desain RESS

Mesin pencari Google secara aktif mendukung arah desain seluler ini. Ini adalah metode yang paling rumit, mahal, tetapi efektif untuk menyesuaikan situs dengan ponsel atau tablet. Ini disebut RES. Ini menargetkan sumber daya ke dalam aplikasi seluler yang dapat diunduh untuk setiap perangkat secara terpisah. Untuk android - dengan GooglePlay, dan untuk Apple - dengan iTunes.

Aplikasi tersebut cepat, gratis, nyaman, memiliki kemampuan untuk menampung berbagai jenis informasi, sementara memori ponsel dan lalu lintas Internet tidak habis dimakan seperti saat mengunjungi situs melalui browser. Mereka mudah diakses, karena tautannya akan selalu ada di layar, dan tidak perlu memasukkan nama yang rumit di bilah alamat browser.

Tentu saja ada di sini dankekurangannya, seperti kerumitan dalam pengembangan, tingginya biaya tenaga kerja dari sejumlah besar programmer, kebutuhan untuk membuat beberapa opsi tata letak. Terkadang perangkat seluler tidak dikenali oleh aplikasi. Dukungan teknis reguler, koreksi kekurangan diperlukan. Namun demikian, opsi ini dianggap yang terbaik dari tiga yang diusulkan karena operasinya yang produktif dan tidak terputus.

situs web seluler google
situs web seluler google

Cara termurah untuk membuat situs web seluler

Semua metode di atas melibatkan, meskipun tidak selalu panjang dan sulit, tetapi tetap dibayar oleh seorang webmaster. Jika Anda tidak melihat kebutuhan mendesak untuk pengembangan seperti itu, versi seluler situs yang sederhana dan gratis akan cocok untuk Anda. Apa cara termudah untuk membuatnya?

Unduh templat (plugin) khusus untuk desain responsif. Misalnya WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile dan lain-lain. Mereka akan membantu menampilkan situs dengan lebih benar di telepon, sementara Anda akan menerima beberapa tip tentang apa yang harus diperbaiki untuk menyesuaikan halaman dengan versi seluler dengan lebih baik.

Tentu saja, metode ini hampir tidak cocok untuk sumber daya yang serius. Sebaliknya, fitur gratis ini ditujukan untuk situs kecil dan sederhana, blog, umpan berita. Jangan lupa bahwa mesin pencari Google, serta Yandex, hari ini membuat tuntutan serius pada versi seluler, jadi ada peluang besar untuk menurunkan posisi Anda menggunakan metode ini.

Dengan metode ini, kemungkinan besar iklan dan pop-up akan terputusspanduk, tetapi halaman akan dimuat dengan cepat dan tanpa “lag”.

versi seluler dari situs android
versi seluler dari situs android

Prinsip untuk membuat versi seluler

Tidak masalah jika versi seluler situs dibuat secara gratis atau dengan bantuan staf webmaster, itu dibuat di sistem RESS atau menggunakan templat adaptif. Yang paling penting, untuk operasinya yang efektif, diperlukan untuk mematuhi beberapa prinsip yang sangat penting. Jadi, apa yang seharusnya menjadi versi seluler dari situs tersebut? Bagaimana membuatnya produktif, efisien dan produktif?

versi seluler situs dari komputer
versi seluler situs dari komputer

Hapus semua yang tidak perlu

Minimalisme adalah apa yang harus diperjuangkan oleh pengembang situs versi seluler. Bayangkan betapa sulitnya memahami informasi yang penuh dengan warna, tombol, spanduk, dan yang harus Anda gulir tanpa henti untuk mencari materi yang tepat. Desain ponsel harus sederhana dan bersih. Pilih 2-3 warna untuk membagi ruang (misalnya, bermerek). Lebih baik jika salah satunya berwarna putih. Bagilah ruang layar kecil menjadi zona yang dapat dimengerti dan dibaca. Kunci virtual harus terlihat sehingga pengguna dengan jelas tahu di mana harus menekan dan melihat - ini produknya, ini formulir pengisian datanya, ini informasi pengiriman dan pembayarannya.

Semua opsi tambahan yang akan berguna dalam versi desktop dan membuat hidup lebih mudah bagi pengguna hanya akan membawa kesulitan di sini. Tinggalkan hanya elemen yang paling penting. Animasi, spanduk iklan, multimedia, kemungkinan besar, hanya akan memperlambat kerja situs atau aplikasi dan mengalihkan perhatian dariutama.

Perataan

Masalah keselarasan tidak kalah akut, karena jika dilakukan dengan tidak benar, pengguna hanya akan mendapatkan akhiran kata-kata penting. Rata kiri dan perataan vertikal diterima secara umum. Bayangkan diri Anda menggulir feed berita di ponsel Anda. Lakukan dari atas ke bawah, bukan ke kiri atau ke kanan.

Unifikasi

Jika tidak ada kemungkinan rantai transisi yang panjang, coba gabungkan beberapa langkah menjadi satu. Misalnya, situs memerlukan entri data dalam beberapa tahap - nama, lalu alamat, di mana di setiap sel individu terdapat rumah, jalan, apartemen, dll yang terpisah. Agar tidak memaksa pengguna untuk mencoba memukul banyak sel kecil, minta dia untuk mengisi hanya 2 - nama dan alamat.

Dan pemutusan

Terkadang, sebaliknya, diperlukan untuk memisahkan terlalu banyak informasi. Misalnya, di menu tarik-turun Anda memiliki daftar lebih dari 80 kota tempat pengiriman dilakukan. Kelompokkan mereka berdasarkan wilayah sehingga pengguna tidak perlu menggulir daftar besar ini. Saat dia mengarahkan kursor ke pusat atau wilayah regional, daftar kota lain akan keluar.

Daftar

Omong-omong, tentang daftar. Ada dua di antaranya - tetap dalam urutan abjad atau lainnya dan dengan substitusi. Pilihan mereka tergantung pada apa yang akan dicantumkan.

Fixed berguna jika pengguna tahu persis apa yang mereka cari. Misalnya, kota, nomor atau tanggal. Opsi kedua cocok untuk nama kompleks yang panjang atau untuk kasus di mana ada banyak variasi satu dan samanama yang sama, dan setiap daftar tarik-turun membawa pengguna selangkah lebih dekat ke tujuan. Opsi substitusi otomatis lebih sering digunakan saat pengunjung membutuhkan bantuan. Misalnya, situs rajut menawarkan untuk membeli jarum rajut. Pengguna memasukkan permintaan pencarian "Jarum rajut logam", dan di tooltip ia melihat "Jarum rajut 5 mm", "Jarum rajut 4,5 mm", dll.

IsiOtomatis

Item ini sangat relevan untuk situs yang menjual sesuatu secara online, dan Anda harus mengisi formulir standar untuk pembayaran, pengiriman, dll. Jika seseorang melakukan pembelian dari telepon, kemungkinan besar dia tidak punya waktu untuk mendapatkan komputer, yang berarti proses pembelian harus dilakukan secepat dan senyaman mungkin.

Untuk ini, formulir mungkin berisi data yang sudah diisi, Anda dapat menggunakan jawaban yang paling populer. Misalnya, masukkan tanggal hari ini, metode pembayaran tunai, kota jika Anda bekerja di wilayah yang sama. Mereka dapat diubah, tetapi jika Anda mencapai target, waktu pengguna akan dihemat.

Semuanya dibaca, semuanya dilihat

Saat mendesain versi seluler situs, ingatlah bahwa ponsel setiap orang berbeda, begitu juga penglihatan mereka. Mungkin situs Anda akan dilihat dari layar kecil, jadi fontnya harus sederhana dan mudah dibaca, tombolnya harus cukup besar sehingga bisa diklik tanpa dibawa ke halaman lain, dan gambarnya harus dibuka secara terpisah, besar, terutama saat itu datang ke Internet. store.

Beberapa statistik

Berbicara tentang adaptasi situs ke perangkat seluler, orang tidak bisa tidak menggunakan statistik untuk memahami betapa pentingnya proses ini untukpromosi online.

Angka-angkanya adalah sebagai berikut. Saat ini, gadget digunakan oleh 87% populasi, tampaknya, kecuali untuk anak-anak terkecil dan beberapa orang tua. Para ekonom memperkirakan perdagangan seluler akan tumbuh 100 kali lipat selama 5 tahun ke depan. Pada saat yang sama, hanya 21% situs yang diadaptasi untuk bekerja dengan perangkat seluler. Ini berarti hanya sebagian kecil dari lalu lintas Internet dan pasar e-niaga yang ditempati.

Pikirkan angka-angka ini. Apakah masuk akal untuk menyesuaikan sumber daya Anda? Tentu saja ya. Selain itu, meskipun ada begitu banyak ruang di pasar ini, Anda dapat mengukir segmen Anda sendiri di dalamnya.

versi seluler dari situs ini secara gratis
versi seluler dari situs ini secara gratis

Di mana Anda memerlukan versi seluler

Menggunakan versi seluler masuk akal untuk platform apa pun yang bertujuan untuk mendapatkan peringkat tinggi. Bagaimanapun, ini berdampak langsung pada pengguna, menciptakan kondisi yang nyaman baginya untuk tetap berada di situs Anda.

Tidak dapat eksis tanpa versi seluler:

  • portal berita, karena kebanyakan dilihat dari ponsel dalam perjalanan ke kantor atau sekolah;
  • jejaring sosial - untuk alasan yang sama, ditambah ada faktor komunikasi online, yang berarti bahwa obrolan yang nyaman dan dapat dimengerti harus dibuat untuk ini;
  • referensi, situs navigasi, dll., tempat orang pergi saat mencari sesuatu;
  • toko online - kesempatan untuk menarik pelanggan yang tidak membuang waktu berbelanja, tetapi membeli semuanya melalui Internet seluler.

Alih-alih kesimpulan

Saat ini, teknologi seluler ada dipertumbuhan dan perkembangan aktif, oleh karena itu, berjuang untuk kepemimpinan di pasar, setiap perusahaan harus memastikan bahwa sumber daya Internetnya memenuhi persyaratan. Karena meningkatnya permintaan pengguna, situs harus terus ditingkatkan dan disesuaikan dengan perangkat yang berbeda. Jelas bahwa jika seseorang tidak nyaman berada di sumber daya tertentu, dia tidak bisa mendapatkan informasi tentang produk atau harga di sana, memesan, mencari tahu tentang pengiriman, maka dia akan menemukan situs di mana semua ini akan menjadi mungkin. Oleh karena itu, untuk memenangkan persaingan, penting untuk memiliki sumber daya yang fleksibel, nyaman, fungsional, dan menarik.

Versi seluler situs web Android atau iOS akan membantu melakukan ini. Untuk melakukan ini, Anda harus memilih salah satu metode desain ulang di atas - templat adaptif, membuat situs baru di subdomain dan mengalihkannya, menggunakan templat gratis, atau membuat aplikasi seluler yang akan memudahkan pengguna untuk masuk dan berada di halaman.

Pendekatan ini tidak hanya akan membantu menjaga loyalitas pelanggan yang sudah ada, tetapi juga akan memberikan peluang untuk menarik pengunjung baru.

Direkomendasikan: