Bukan rahasia lagi bahwa semakin banyak orang mengakses Internet menggunakan perangkat seluler mereka sebagai tambahan atau bukannya komputer desktop. Bahkan, ada hampir 7 miliar pengguna seluler di seluruh dunia. (Sebagai referensi, populasi dunia saat ini adalah 7,7 miliar. Itu banyak aktivitas bergerak.)
Tetapi apa yang mereka lakukan pada perangkat seluler itu bahkan lebih menarik bagi pemasar seperti kita.
40% konsumen menggunakan perangkat seluler mereka untuk melakukan penelitian sebelum melakukan pembelian secara langsung. Lebih dari setengah berbelanja secara teratur dengan smartphone mereka, dan 55% pembeli melakukan pembelian ponsel setelah menemukan produk di media sosial.
Akibatnya, perusahaan yang memiliki situs web responsif menghasilkan lebih banyak arahan dan mempertahankan keunggulan kompetitif yang meningkat dibandingkan perusahaan yang tidak.
Tapi apa sebenarnya desain situs web responsif, bagaimana cara kerjanya, dan mengapa Anda harus melakukan perubahan? Panduan ini bertujuan untuk menjawab pertanyaan-pertanyaan itu, menawarkan beberapa statistik yang menarik, dan mengajari Anda fitur-fitur utama dari desain responsif yang harus diketahui oleh setiap pemasar. Mari kita mulai.
Desain web yang responsif tidak lagi merupakan saran: ini adalah investasi penting untuk meningkatkan kesadaran merek, mendiversifikasi pengalaman pengguna Anda (UX), dan mengonversi lebih banyak pengunjung situs.
Ini juga menghemat waktu berharga perusahaan Anda. Anda mungkin tidak dapat mendesain situs web terpisah untuk setiap perangkat potensial yang mungkin digunakan pengunjung Anda, belum lagi teknologi masa depan. Desain web responsif memastikan bahwa situs web Anda kompatibel dengan semua perangkat dan tampilan untuk memastikan pengalaman yang menyenangkan … baik modern maupun perangkat yang belum ditemukan.
Mari kita menggali lebih dalam kenapa Desain responsif sangat penting saat ini.
Mengapa desain web responsif itu penting
Desain responsif memungkinkan Anda menjangkau audiens yang lebih luas dan lebih aktif di mana pun dan bagaimanapun mereka lebih suka bernavigasi.
Lebih penting lagi, kurangnya desain web responsif dapat melakukan yang sebaliknya: Ini dapat mengasingkan situs web Anda dari pelanggan yang mencari pengalaman seluler yang menarik. Faktanya, penelitian menunjukkan bahwa Anda bisa kehilangan hingga 90% prospek Anda karena pengalaman buruk yang dioptimalkan untuk perangkat seluler.
Ada banyak klien dan penghasilan.
Mari kita buka tiga manfaat utama desain web responsif.
1. Desain web responsif membantu konsumen menemukan situs web Anda.
Banyak orang mengakses Google di perangkat seluler mereka, pada kenyataannya, 63%. Google juga menghukum situs web yang tidak menawarkan desain responsif. Pengindeksan seluler Anda terlebih dahulu dapat benar-benar memengaruhi peringkat situs web Anda dan dapat menyebabkannya menyusut pada halaman hasil mesin pencari (SERP) yang mendukung situs web yang menawarkan desain ramah-seluler kepada konsumen.
Jadi, jika mayoritas audiens Anda mencari di smartphone mereka (seperti yang dikatakan statistik di atas), dan situs web mereka tidak menampilkan desain responsif, pelanggan mungkin tidak menemukan situs web Anda sama sekali.
2. Desain web responsif membuat pembeli di situs web Anda lebih lama.
Tingkat pentalan situs web pada ponsel cerdas hampir 40% (dibandingkan dengan hanya 27% untuk tablet). Selain itu, halaman web yang dimuat dalam lima detik atau kurang menjamin 70% lebih banyak sesi menonton.
Pengguna perangkat seluler mengharapkan pengalaman situs web yang cepat dan berkualitas tinggi (seperti Google), harapan bahwa desain situs web responsif dapat bertemu.
3. Desain web yang responsif menghasilkan pengakuan merek yang positif dan kepercayaan dengan konsumen.
Akhirnya, 57% konsumen mengatakan mereka tidak akan merekomendasikan perusahaan dengan situs web seluler yang dirancang buruk. Laporan yang sama menunjukkan bahwa lebih dari setengah pembeli online yang kecewa dengan kehadiran online perusahaan cenderung berpikir negatif tentang perusahaan itu sendiri.
Desain situs web responsif menyenangkan pembeli online, mendorong mereka untuk merekomendasikan bisnis Anda, dan membuat mereka membeli lebih banyak.
Cara membuat desain web yang responsif
Itu adalah memungkinkan untuk membuat situs web Anda sendiri responsif menggunakan CSS dan HTML. Tapi ini seperti mengambil jalan panjang ketika jalan bebas hambatan tersedia. Dalam hal ini, jalan raya akan menjadi sistem manajemen konten (CMS) atau pembangun situs web.
CMS adalah perangkat lunak yang memungkinkan Anda membuat situs web tanpa mengetahui cara membuat kode, dan itu termasuk mengetahui cara membuat kode untuk desain responsif. Pembangun situs adalah alat yang serupa, tetapi mereka mengabaikan beberapa fungsionalitas yang ditawarkan CMS dengan imbalan kemudahan penggunaan dan harga yang lebih rendah.
Desain web responsif dapat dicapai menggunakan CMS atau pembangun situs yang memfasilitasi desain responsif. Berikut ini beberapa opsi umum.
1. Hub CMS
CMS Hub adalah CMS yang sepenuhnya dihosting dan terintegrasi penuh. Ini terhubung ke alat HubSpot Anda yang lain sehingga Anda dapat menyajikan pengalaman pemasaran, penjualan, layanan, dan navigasi situs terpadu untuk pengunjung, pelanggan, dan karyawan Anda.
Dalam hal pengalaman membangun situs Anda, CMS Hub menawarkan tema situs web yang dibuat sebelumnya yang juga dioptimalkan untuk perangkat seluler untuk memuaskan pengunjung dan pelanggan Anda di mana pun, di mana pun mereka menjelajah.
Sumber
2. WordPress
WordPress adalah CMS paling populer di dunia dan mempertahankan superlatif ini dengan menawarkan salah satu pembuat situs web paling langsung: editor Gutenberg.
WordPress menawarkan ribuan tema dan templat untuk Anda mulai, termasuk banyak templat dengan desain responsif.
Sumber
Catatan: Setelah Anda mengatur tema untuk situs web WordPress Anda, libatkan dan konversi pengunjung Anda dengan formulir gratis, obrolan langsung, pemasaran email, dan analitik dengan menambahkan plugin HubSpot WordPress.
3. Squarespace
Squarespace adalah pembuat situs populer yang menawarkan tata letak situs dan alat kreatif yang hebat.
Squarespace menawarkan 60 templat yang dioptimalkan untuk seluler tempat Anda dapat memilih untuk dengan cepat membangun situs Anda. Di dalam editor Squarespace, Anda juga dapat bertransisi dari tampilan desktop ke tablet ke seluler untuk memastikan desain Anda merespons dengan mulus berbagai perangkat.
Sumber
4. Wix
Wix adalah pembuat situs lain yang menawarkan langganan situs web gratis dan berbayar. Ini menyediakan fitur drag and drop editor, hosting gratis, dan fitur keamanan yang mudah digunakan.
Semua templat Wix memberikan pengalaman yang dioptimalkan untuk seluler bagi pengunjung. Seperti Squarespace, editor Wix memungkinkan Anda melihat seperti apa situs web Anda di banyak perangkat.
Sumber
Selain membuat desain web responsif menggunakan salah satu alat CMS atau pembuat situs di atas, baca posting blog ini untuk mempelajari caranya mengoptimalkan situs web mereka untuk penggunaan seluler juga.
Praktik terbaik desain web responsif
Dengan CMS atau pembuat situs yang intuitif, desain responsif mudah. Tetapi bahkan jika Anda menggunakan CMS terbaik, Anda tidak dapat mengkompensasi konten dan media yang dioptimalkan untuk seluler; bagian itu terserah Anda. Mari kita bicara tentang beberapa praktik terbaik desain web responsif untuk membantu Anda menciptakan pengalaman web yang paling ramah seluler untuk pengunjung dan pelanggan Anda.
1. Jangan abaikan tombol Anda.
Apa yang Anda ingin pengunjung lakukan ketika mereka tiba di situs web Anda? Ambil tindakan, bukan? Ini bisa dengan mengklik ajakan bertindak (CTA) seperti Pelajari lebih lanjut, Unduhatau bahkan Untuk membeli.
Bagaimana pengunjung situs berinteraksi dengan tombol-tombol ini ketika mereka ada di situs desktop Anda? Jika CTA ini muncul, gulir, atau berada di bagian bawah situs web Anda, Anda mungkin perlu mengevaluasi kembali bagaimana pengunjung seluler dapat mengaksesnya.
Misalnya, anggap Anda menawarkan sejenis CTA utama Dapatkan HubSpot gratis di bagian atas situs desktop Anda di mana pengunjung dapat melihat jika dari setiap halaman.
Namun, ketika Anda melihat situs seluler Anda, itu tidak cocok di header. Alih-alih menghapus seluruhnya, pertimbangkan untuk memindahkan tombol atau memasukkannya ke dalam menu burger Anda (tiga baris di sudut atas) di mana pengunjung masih dapat melihat dan mengkliknya.
Juga, pertimbangkan ukuran area yang dapat diklik di situs seluler Anda. Tidak seperti desktop, di mana pengunjung dapat menggunakan kursor mouse untuk mengklik tombol dan tautan, mereka menggunakan jari mereka untuk menavigasi situs web mereka di smartphone atau tablet mereka.
Disarankan bahwa barang yang dapat diklik pada perangkat seluler setidaknya memiliki tinggi 48 piksel. Ini termasuk tombol, bidang formulir, tautan online, dan navigasi menu.
2. Gunakan grafik vektor yang dapat diskalakan.
Jika situs web Anda menyertakan ilustrasi atau ikon, ikon tersebut harus diformat sebagai Scalable Vector Graphics (SVG).
Sumber
SVG dapat diskalakan tanpa batas, tidak seperti format media lain seperti JPG dan PNG. Ini memastikan bahwa situs web Anda menawarkan pengalaman penelusuran berkualitas tinggi untuk pengguna di perangkat apa pun. Mereka juga membantu memuat situs Anda lebih cepat, yang telah kita bahas adalah hal yang baik untuk pengalaman pengguna dan peringkat SERP.
3. Pastikan skala gambar Anda.
Ilustrasi dan ikon bukan satu-satunya jenis media yang mengubah ukuran pada perangkat yang berbeda. Gambar Anda juga harus diukur.
Misalnya, situs web desktop mungkin memerlukan gambar pada 1.200 piksel, sedangkan situs web seluler mungkin memerlukan gambar pada 400 piksel. Menggunakan resolusi yang lebih tinggi pada semua perangkat dapat mengurangi kecepatan halaman, sehingga pendekatan ini tidak disarankan.
Sumber
Sebagai gantinya, pertimbangkan memuat resolusi gambar yang berbeda dan menentukan gambar mana yang ingin Anda tampilkan pada setiap perangkat. Ini biasanya dilakukan dengan menetapkan tag "multimedia" yang berbeda untuk objek "sumber" tertentu (misalnya tablet atau perangkat seluler) dalam kode situs web Anda.
Catatan: HubSpot memungkinkan pengubahan ukuran gambar dalam konten secara otomatis, alasan lain untuk membangun situs web responsif Anda di CMS Hub!
4. Pertimbangkan tipografi Anda.
Sebuah font yang terlihat cantik di situs desktop Anda mungkin tidak terbaca juga di perangkat seluler yang ukurannya seperempat. Jika pengunjung tidak dapat membaca situs web Anda, mereka pasti tidak akan mengklik atau membeli apa pun.
Sumber
Atau, menggabungkan font situs web Anda dengan pengalaman seluler dapat membuat pengguna desktop Anda dengan kata-kata buruk yang terlalu besar dan bertabrakan dengan merek Anda.
Berikut adalah tips utama kami untuk tipografi desain web responsif:
-
Tipe tubuh 16 titik adalah aturan praktis untuk konten web desktop dan seluler.
-
Hindari font super tipis yang memudar di layar yang lebih kecil.
-
Pastikan semua judul jelas lebih besar dari isi dan subtitle.
-
Gunakan warna yang kontras untuk tipografi Anda sehingga tidak memudar menjadi warna latar belakang situs web Anda.
5. Manfaatkan fitur perangkat.
Sementara prospek dan pelanggan tidak dapat menghubungi Anda di komputer mereka, mereka pasti bisa di smartphone mereka. Pertimbangkan untuk mengubah CTA Anda dan memasukkan nomor telepon perusahaan Anda alih-alih email.
Juga, jika perusahaan Anda memiliki aplikasi seluler, minta pengunjung situs untuk membuka aplikasi Anda dari situs web mereka, sesuatu yang mungkin tidak dapat mereka lakukan di komputer mereka.
6. Sering-seringlah menguji situs web Anda.
Seperti biasa, uji situs web responsif Anda di berbagai perangkat dan browser. Periksa alat pengujian perangkat seluler Google untuk melihat cara kerja situs Anda.
Alat Matt Kersley yang praktis ini juga akan memberikan tampilan situs web Anda pada perangkat dengan ukuran berbeda. Tentu saja, Anda juga dapat menggunakan perangkat seluler Anda sendiri.
Templat desain web yang responsif
Cara terbaik untuk memastikan bahwa situs web Anda responsif dalam desain adalah memulai dengan template desain web responsif. Di bawah ini adalah lima templat indah yang tersedia di HubSpot Asset Marketplace yang akan memberi pengunjung situs Anda pengalaman menjelajah yang ramah seluler.
1. Template Desain Responsif DjanGo
Harga: $ 200
Templat DjanGo adalah templat situs yang sepenuhnya dapat disesuaikan dan responsif. Desainnya yang modern dan minimalis memungkinkan pengunjung untuk fokus pada konten situs Anda dan informasi produk.
2. Templat Desain Responsif Prodigy
Harga: Gratis
Templat Prodigy adalah templat situs web bersih yang menjangkau audiens Anda dengan media yang cemerlang dan beberapa CTA. Konversi desain Anda secara otomatis agar sesuai dengan perangkat apa pun yang digunakan oleh pengunjung situs Anda.
3. Templat desain responsif kuantum
Harga: $ 75
Templat Quantum adalah tema multiguna yang menangkap audiens Anda dengan judul tebal dan latar belakang video. Personalisasi situs Anda dengan berbagai tata letak halaman dan modul khusus.
4. Template Desain Responsif Kalahari
Harga: $ 199
Template Kalahari adalah tema responsif yang menawarkan navigasi dinamis dan kustomisasi tingkat halaman. Gunakan templat ini untuk mengonversi audiensi Anda dengan CTA yang cemerlang dan luar biasa.
5. Template desain bingkai startup yang responsif
Harga: Gratis
Templat Kerangka Kerja Startup adalah templat situs web unik dengan jenis huruf tebal dan grafik brilian. Bangun secara asli di editor konten HubSpot dan pilih dari ribuan ikon dan puluhan modul khusus.
Tanggapi audiens Anda dengan desain responsif
Dengan begitu banyak konsumen berbelanja dan menjelajah di perangkat seluler mereka, desain responsif adalah suatu keharusan. Tanpanya, Anda bisa kehilangan prospek, pelanggan, dan pendapatan.
Gunakan alat ini, templat, dan praktik terbaik untuk memulai dengan desain web responsif hari ini.
