Cara Membuat Situs WordPress Anda Ramah Seluler

Bukan rahasia lagi bahwa situs WordPress ramah seluler adalah norma baru, tetapi terlepas dari seberapa umum tampilannya, masih perlu sedikit usaha untuk membuat situs yang indah dan responsif. Panduan ini akan membantu Anda memahami mengapa penting untuk memiliki situs yang ramah seluler, cara membuatnya di WordPress, dan mengenalkan Anda pada alat terbaik untuk membuat situs yang responsif.

Untuk membuat situs WordPress Anda ramah seluler, Anda perlu:

1. Pahami mengapa desain web responsif itu penting
2. Ikuti Tes Ramah Seluler Google
3. Gunakan tema WordPress yang responsif (atau buat sendiri)
4. Pertimbangkan plugin WordPress yang ramah seluler
5. Gunakan keikutsertaan ramah seluler
6. Pikirkan dalam hal media responsif
7. Prioritaskan kinerja situs

Siap? Ayo selami!

1. Mengapa Situs Mobile-Friendly Penting?

Pada Q4 2019, 61% pencarian Google terjadi di perangkat seluler. Itu berarti bahwa lebih dari separuh populasi beralih ke ponsel dan tablet melalui perangkat desktop tradisional, sehingga untuk mengikutinya, situs web Anda harus siap ditampilkan pada ukuran layar apa pun. Desain yang ramah seluler menghasilkan pengalaman pengguna yang positif dan akan membantu pengguna Anda menemukan apa yang mereka cari saat dalam perjalanan.

Selain UX, ada alasan penting lain mengapa situs Anda harus mobile-friendly: Google. Mulai tahun 2015 (tahun “Mobilegeddon”), Google menerapkan perombakan besar-besaran pada algoritme penelusurannya untuk memberi penghargaan pada situs yang dianggap “ramah seluler”. Perubahan tersebut bermuara pada satu titik data penting: apakah situs web Anda responsif atau tidak.

Artinya, jika situs Anda terbaca dengan baik di perangkat seluler, situs tersebut akan berperforma lebih baik di hasil penelusuran daripada situs yang tidak. Itu keuntungan yang cukup manis jika Anda telah melakukan pekerjaan untuk membuat situs yang ramah seluler! Tapi itu juga bisa merusak lalu lintas situs Anda jika tidak cukup untuk ditampilkan di layar yang lebih kecil.

Untungnya, jika situs WordPress Anda belum ramah seluler, ada banyak alat untuk membantu Anda mempercepat dan membuat situs yang berfungsi penuh dan responsif. Langkah pertama? Patokan desain Anda saat ini.

2. Ikuti Tes Ramah Seluler

Situs web Anda mungkin terlihat bagus di satu perangkat seluler (seperti ponsel pribadi Anda), tetapi Anda benar-benar perlu mengujinya di berbagai ukuran layar untuk mengetahui apakah situs web Anda benar-benar responsif. Bahkan jika Anda kebetulan memiliki banyak sekali ponsel lama, itu bisa menjadi proses yang memakan waktu untuk mengujinya di setiap layar.

Untuk mempermudah, Google telah memberi kita semua alat pengujian ramah seluler gratis yang akan memberi tahu Anda apakah situs Anda memenuhi syarat sebagai "ramah seluler" atau tidak. Cukup masukkan URL situs Anda untuk penilaian cepat desain seluler situs Anda. Jika situs web Anda dioptimalkan sepenuhnya untuk perangkat seluler, Anda akan mendapatkan pesan sukses kecil yang antusias seperti ini:

Jika Anda melihat warna merah, Anda harus melakukan sedikit pekerjaan. (Kita akan membahasnya sebentar lagi!)

Alat kecil yang cukup rapi, bukan? Yah, itu menjadi lebih baik.

Untuk Anda semua pengembang di luar sana, Google juga merilis API Uji Ramah Seluler yang memungkinkan Anda menguji URL dengan alat otomatis. Keuntungannya adalah Anda dapat dengan cepat menguji lebih banyak halaman, tetapi Anda juga dapat memantau halaman terpenting di situs Anda tanpa harus selalu membuka alat browser secara manual. Skor!

Setelah Anda menggunakan alat ramah seluler Google untuk menentukan tolok ukur situs Anda, saatnya untuk mulai melakukan perbaikan. Mari kita mulai dengan tema WordPress Anda.

3. Gunakan (Atau Buat) Tema WordPress yang Responsif

Jika Anda baru saja memasang tema WordPress baru, ada kemungkinan Anda baik-baik saja di departemen ini. Namun, jika tema Anda sudah ada cukup lama, mungkin sudah waktunya untuk sedikit pembaruan.

Hal pertama yang pertama: Periksa kembali versi WordPress Anda dan versi tema saat ini. Jika ada pembaruan yang tertunda, mulailah dengan itu. Saya tidak dapat berbicara untuk setiap tema di luar sana, tetapi beberapa pembaruan akan berisi elemen ramah seluler dan mungkin cukup untuk memperbaiki masalah Anda. WordPress 4.4, misalnya, menambahkan beberapa fungsi yang sangat rapi untuk gambar responsif (Anda dapat membaca semuanya di sini).

Jika pembaruan tidak berhasil, mungkin sudah waktunya untuk mencari tema baru atau mempertimbangkan untuk membuatnya sendiri. Mari jelajahi kedua opsi.

Tema WordPress Ramah Seluler Terbaik

Secara realistis, banyak tema WordPress saat ini yang responsif – mungkin jarang ada tema yang tidak mobile-friendly. Karena itu, sebelum membeli tema, periksa kembali apakah itu ditampilkan dengan baik pada ukuran layar apa pun. Uji situs demo, skala jendela browser Anda, dan baca ulasan apa pun yang dapat Anda temukan untuk mencari pengalaman dari pengguna sebenarnya.

Jika Anda senang dengan apa yang Anda lihat, lakukanlah! Tetapi jika ada sesuatu yang tidak beres, jauhi. Bahkan jika Anda berpikir itu adalah pasangan yang sempurna, ada begitu banyak tema WordPress untuk dipilih yang saya jamin Anda akan menemukan tema lain yang sesuai untuk situs Anda.

Jika Anda mencari tema gratis, pastikan untuk melihat tampilannya dengan konten Anda sendiri – seperti yang saya yakin Anda tahu, semuanya tidak selalu terlihat sama, jadi pastikan itu menampilkan konten Anda di cara yang Anda inginkan di ponsel.

Tidak yakin harus mulai dari mana? Saat Anda menghosting situs WordPress di WP Engine, Anda akan mendapatkan akses ke tema StudioPress (termasuk Genesis Framework!) gratis dengan paket Anda. Tema-tema ini sepenuhnya responsif sehingga akan terlihat bagus di perangkat apa pun, plus Anda dapat dengan mudah bertukar di antara tema-tema tersebut (alih-alih merasa terjebak dengan tema premium "satu-satunya" yang Anda putuskan untuk dibeli).

Cara Membuat Tema WordPress Responsif Anda Sendiri

Jika Anda lebih memilih cara DIY untuk membuat situs ramah seluler, pastikan untuk memulai dari awal atau di lingkungan pengujian – Anda tidak boleh membuat perubahan drastis seperti itu di situs aktif Anda.

Saya akan merekomendasikan menggunakan Lokal untuk memutar situs WordPress lokal langsung di mesin Anda. Aplikasi gratis ini akan memungkinkan Anda untuk bereksperimen dengan isi hati Anda tanpa pernah merusak situs Anda saat ini (yang penting saat melalui desain ulang). Anda bahkan dapat mengimpor situs yang ada ke Lokal, jadi Anda hanya perlu memulai dari awal jika mau.

Ada juga fitur yang disebut Tautan Langsung, yang menghasilkan URL yang dapat dibagikan ke situs lokal. Ini memungkinkan Anda mengirimkannya ke klien atau menariknya di ponsel Anda, sehingga Anda dapat dengan mudah menguji tampilan situs di perangkat seluler.

Jika Anda membuat tema anak berdasarkan tema induk yang responsif, Anda akan berada dalam kondisi yang cukup baik. Jika Anda memulai dari awal yang benar-benar kosong dan membuat tema Anda sendiri, pastikan untuk menggunakan kueri media untuk menetapkan batasan desain, dan memikirkan elemen satu per satu.

Tanyakan pada diri Anda sendiri bagaimana skala gambar, seperti apa tampilan navigasinya, dan apakah ada konten yang akan disembunyikan di perangkat seluler. Berikut adalah beberapa tutorial yang dapat membantu Anda:

• Cara membuat menu navigasi responsif di WordPress
• 7 tip praktik terbaik untuk desain web responsif
• Bekerja dengan gambar responsif di WordPress

4. Gunakan Plugin Responsif

Plugin menambahkan fungsionalitas ke situs WordPress Anda, jadi mereka tidak selalu menambahkan apapun secara visual ke front-end. Namun jika mereka menambahkan elemen fisik ke situs Anda (seperti widget atau tombol CTA), pastikan elemen tersebut menskala dengan baik di semua ukuran layar, atau setidaknya memberi Anda opsi untuk menonaktifkannya di ukuran layar yang lebih kecil.

Misalnya, widget sidebar adalah tambahan yang bagus untuk situs desktop, tetapi jika itu mendominasi desain seluler atau tidak diperkecil, itu tidak akan memberikan pengalaman pengguna yang sangat baik.

Seperti tema, cukup perhatikan fitur plugin, dan coba baca ulasan atau temukan demo sebelum membelinya. Dan setiap kali Anda mengaktifkan plugin baru, ingatlah untuk melakukan pemeriksaan kualitas cepat pada situs Anda untuk memastikannya diskalakan dengan benar di seluruh ukuran layar.

Selama Anda memiliki tema dan plugin responsif yang berfungsi dengan baik di seluler, situs Anda akan berada dalam kondisi yang sangat baik untuk ditampilkan di layar yang lebih kecil.

5. Hindari menambahkan pop-up di perangkat seluler

Jika Anda mencoba membuat daftar email dengan situs WordPress Anda, saya kira Anda memiliki berbagai pilihan di situs Anda. Sebagian besar formulir keikutsertaan email berfungsi dengan baik di perangkat seluler (dengan asumsi formulir tersebut berskala dan mudah digunakan).

Pop-up, bagaimanapun, adalah binatang yang berbeda. Google telah mulai menghukum situs dengan pengantara yang mengganggu, alias keikutsertaan yang mencakup konten situs. Ini termasuk pop-up (apakah muncul segera atau setelah pengguna berada di situs selama beberapa waktu) dan jenis keikutsertaan lainnya yang harus ditutup pengguna sebelum mengakses konten di halaman. Anda dapat membaca semua tentang sikap Google tentang masalah ini di sini.

Agar situs WordPress Anda ramah seluler dan mengikuti praktik terbaik, hindari pop-up di desain seluler Anda. Bagaimana Anda melakukannya tergantung pada layanan yang mendukung keikutsertaan Anda, tetapi sebagian besar penyedia harus memiliki opsi untuk menonaktifkan pop-up yang mengganggu di perangkat seluler.

6. Strategi Media Responsif

Apakah Anda bekerja dengan situs portofolio, blog harian, atau situs eCommerce, bagian penting dari teka-teki responsif adalah mempertimbangkan media di situs Anda. Gambar latar belakang yang besar di beranda Anda mungkin terlihat bagus di mesin desktop, tetapi jika tidak diskalakan dengan benar, itu bisa kehilangan semua konteks dan menyebabkan pengalaman menonton yang sulit di ponsel. Jadi aturan nomor satu untuk media yang responsif? Pikirkan tentang bagaimana hal-hal berskala.

Jika penskalaan sebenarnya bukan solusi terbaik untuk situs Anda, Anda juga dapat mempertimbangkan untuk menyembunyikan elemen tertentu saat situs Anda dimuat di perangkat seluler. Ini akan membantu menyederhanakan pengalaman dan mengarahkan pengguna ke konten yang paling penting dengan lebih cepat.

Terakhir, Anda juga perlu mengingat ukuran file media yang Anda sertakan di situs Anda. Ini tidak hanya akan meningkatkan pengalaman seluler, tetapi juga waktu muat desktop! File media seringkali merupakan yang terbesar di situs web, yang membuatnya menjadi penyebab bilah pemuatan dan waktu tunggu yang lama. Untuk membantu merampingkan situs Anda dan meningkatkan kinerja seluler, coba optimalkan gambar Anda dengan menggunakan ukuran file terkecil yang Anda bisa sambil tetap mempertahankan kualitas yang Anda butuhkan. (Misalnya, mungkin situs seluler Anda memuat versi gambar yang lebih kecil daripada versi desktop!)

7. Prioritaskan Kinerja Situs

Kecepatan halaman telah lama menjadi penting dalam hal bagaimana peringkat situs Anda dalam pencarian desktop Google, tetapi mulai Juli 2018, hal itu juga berlaku untuk peringkat seluler. Pasangkan dengan stat dari atas bahwa lebih dari 60% pencarian internet menggunakan perangkat seluler, dan kinerja situs Anda (di setiap perangkat) sekarang menjadi lebih penting dari sebelumnya.

Gambar adalah bagian besar dari persamaan kinerja, tetapi kode dan host WordPress Anda juga memainkan peran besar.

Mengenai kode Anda, pertimbangkan tindakan seperti minifikasi (terutama jika bekerja dengan tema khusus). Catat semua plugin yang dipasang di situs Anda, dan nonaktifkan dan copot semua yang tidak diperlukan lagi. Pada dasarnya, semakin terorganisir Anda mempertahankan elemen-elemen yang menggerakkan situs Anda, semakin baik Anda jadinya.

Untuk host WordPress Anda, pastikan Anda menggunakan mitra berkualitas yang menyertakan layanan seperti teknologi caching, CDN, dan infrastruktur yang didukung oleh penyedia andal seperti Google Cloud Platform. Jika Anda menghosting situs Anda di WP Engine, Anda sudah mengatur di semua area ini.

Karena semakin banyak orang menggunakan smartphone atau tablet mereka untuk mengakses internet, perancang situs harus menyesuaikan diri untuk mengatasi pola penggunaan tersebut. Jadi, apakah situs Anda siap untuk pengunjung seluler Anda? Aspek apa dari situs Anda yang harus Anda ubah? Alat apa yang Anda gunakan untuk membuat desain yang responsif? Bagikan pengalaman Anda di komentar!

Dapatkan Akses ke 30+ Tema Premium (Dan Ramah Seluler!)

Hemat waktu (dan uang!) Anda sendiri dengan hosting WordPress oleh WP Engine dan dapatkan akses ke tema StudioPress dan Genesis Framework. Temanya sepenuhnya responsif dan mudah disesuaikan, menghemat waktu Anda saat mencoba membangun situs yang ramah seluler. Plus platform WP Engine yang kuat akan menjaga kinerja situs Anda tetap optimal, membantu kecepatan halaman tersebut tetap cepat dan peringkat situs Anda dengan baik.