Cara membuat situs WordPress Anda ramah seluler

Bukan rahasia lagi bahwa situs WordPress yang ramah seluler adalah norma baru, tetapi meskipun kelihatannya umum, 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 memperkenalkan Anda pada alat terbaik untuk membuat situs yang responsif.

Untuk membuat situs WordPress Anda mobile-friendly, Anda perlu:

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

Siap? Mari selami!

1. Mengapa situs mobile-friendly itu penting?

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

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

Artinya, jika situs Anda terbaca dengan baik di perangkat seluler, kinerjanya akan lebih baik di hasil penelusuran daripada situs yang tidak. Itu adalah keuntungan yang cukup manis jika Anda telah melakukan pekerjaan untuk membuat situs yang mobile-friendly! Tapi itu juga dapat merusak lalu lintas situs Anda jika tidak cukup untuk menampilkan tugas di layar yang lebih kecil.

Untungnya, jika situs WordPress Anda belum mobile-friendly, ada banyak alat untuk membantu Anda mempercepat dan membangun situs yang berfungsi penuh dan responsif. Langkah pertama? Tolok ukur desain Anda saat ini.

2. Ikuti tes ramah seluler

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

Untuk menyederhanakan banyak hal, 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 sepenuhnya dioptimalkan untuk perangkat seluler, Anda akan mendapatkan pesan sukses kecil yang antusias yang terlihat seperti ini:

Jika Anda melihat warna merah, Anda memiliki sedikit pekerjaan yang harus dilakukan. (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. Manfaatnya adalah Anda dapat dengan cepat menguji lebih banyak halaman, tetapi Anda juga dapat memantau halaman terpenting di situs Anda tanpa harus selalu beralih ke alat browser secara manual. Skor!

Setelah Anda menggunakan alat ramah seluler Google untuk membandingkan situs Anda, inilah saatnya untuk mulai melakukan peningkatan. Mari kita mulai dengan tema WordPress Anda.

3. Gunakan (atau buat) tema WordPress yang responsif

Jika Anda baru saja menginstal tema WordPress baru, ada kemungkinan Anda baik-baik saja di departemen ini. Jika tema Anda telah ada untuk sementara waktu, 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 inilah saatnya untuk mencari tema baru atau mempertimbangkan untuk membuat tema Anda sendiri. Mari kita jelajahi kedua opsi tersebut.

Tema WordPress ramah seluler terbaik

Secara realistis, banyak tema WordPress saat ini yang responsif – mungkin lebih jarang sebuah tema tidak ramah seluler. Karena itu, sebelum membeli tema, periksa kembali apakah tema 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 nyata.

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

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

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

Cara membuat tema WordPress responsif Anda sendiri

Jika Anda lebih suka menggunakan rute DIY untuk membuat situs ramah seluler, pastikan untuk memulai dari awal atau dalam lingkungan pengujian – Anda tidak boleh membuat perubahan drastis seperti itu di situs langsung 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 merusak situs Anda saat ini (yang penting ketika akan melalui desain ulang). Anda bahkan dapat mengimpor situs Anda 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 untuk mengirimkannya ke klien atau menariknya ke 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 papan tulis yang benar-benar kosong dan membuat tema Anda sendiri, pastikan untuk menggunakan kueri media untuk menetapkan batasan desain, dan pikirkan elemen satu per satu.

Tanyakan pada diri Anda bagaimana gambar harus diskalakan, 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 tips praktik terbaik untuk desain web responsif
• Bekerja dengan gambar responsif di WordPress

4. Gunakan plugin responsif

Plugin menambahkan fungsionalitas ke situs WordPress Anda, sehingga mereka tidak selalu menambahkan apa pun secara visual ke front-end. Tetapi jika mereka menambahkan elemen fisik ke situs Anda (seperti widget atau tombol CTA) pastikan skalanya baik di semua ukuran layar, atau setidaknya memberi Anda opsi untuk menonaktifkannya pada ukuran layar yang lebih kecil.

Misalnya, widget bilah sisi adalah tambahan yang bagus untuk situs desktop, tetapi jika itu mendominasi desain seluler atau tidak diperkecil, itu tidak akan memberikan pengalaman pengguna yang luar biasa.

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 memastikan skalanya benar di seluruh ukuran layar.

Selama Anda memiliki tema dan plugin responsif yang berperilaku 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 rasa Anda memiliki berbagai pilihan di situs Anda. Sebagian besar formulir keikutsertaan email berfungsi dengan baik di perangkat seluler (dengan asumsi mereka berskala dan mudah digunakan).

Pop-up, bagaimanapun, adalah binatang yang berbeda. Google telah mulai menghukum situs dengan interstisial 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 diabaikan pengguna sebelum mengakses konten di halaman. Anda dapat membaca semua tentang sikap Google tentang masalah ini di sini.

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

6. Strategi untuk media yang responsif

Baik 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 skala.

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 membawa pengguna ke konten yang paling penting 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 sering kali merupakan yang terbesar di situs web, yang menjadikannya 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 desktop!)

7. Prioritaskan kinerja situs

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

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

Ketika datang ke kode Anda, pertimbangkan tindakan seperti minifikasi (terutama jika bekerja dengan tema khusus). Catat semua plugin yang terpasang di situs Anda, dan nonaktifkan serta copot pemasangan yang tidak diperlukan lagi. Pada dasarnya, semakin terorganisir Anda menjaga elemen-elemen yang mendukung situs Anda, semakin baik Anda.

Untuk host WordPress Anda, pastikan Anda menggunakan mitra berkualitas yang mencakup layanan seperti teknologi caching, CDN, dan infrastruktur yang didukung oleh penyedia andal seperti Google Cloud Platform. Jika Anda menghosting situs Anda di Flywheel, Anda sudah mengatur semua area ini. Selain itu, kami bahkan menawarkan Add-on Performance Insights kami yang akan membantu Anda melangkah lebih jauh dalam pemecahan masalah untuk memastikan situs Anda berkinerja terbaik di setiap perangkat.

Karena semakin banyak orang menggunakan ponsel cerdas atau tablet mereka untuk mengakses internet, perancang situs harus menyesuaikan 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 responsif? Bagikan pengalaman Anda di komentar!

Dapatkan akses ke 30+ tema StudioPress premium (dan ramah seluler!)

Hemat waktu Anda (dan uang!) dengan hosting dengan Flywheel dan mendapatkan akses ke tema StudioPress dan Genesis Framework. Tema sepenuhnya responsif dan mudah disesuaikan, menghemat waktu Anda saat mencoba membangun situs yang ramah seluler. Ditambah platform kuat Flywheel akan menjaga kinerja situs Anda tetap tinggi, membantu kecepatan halaman tersebut tetap cepat dan peringkat situs Anda baik.

Artikel ini awalnya diterbitkan pada 22-17-2017. Itu terakhir diperbarui 10-2-2020.