7 Tips WordPress Untuk Situs Web yang Ramah Seluler

7 Tips WordPress Untuk Situs Web yang Ramah Seluler

7 Tips WordPress Untuk Situs Web yang Ramah Seluler.

 7 Tips WordPress Untuk Situs Web yang Ramah Seluler



Tidak ada yang lebih buruk daripada memiliki situs web desktop yang tampak hebat dan situs seluler yang tidak berfungsi dengan benar.


Sebagian besar perbaikan desain sederhana tetapi membutuhkan perhatian jika Anda ingin pengunjung tetap berada di situs Anda saat menjelajah di perangkat seluler.

Daftar isi


Artikel ini akan menyoroti tujuh masalah situs web ramah seluler dan perbaikannya.

  * Perubahan yang Dibuat Tidak Ditampilkan di Seluler

  * Navigasi Tidak Ramah

  * Tata Letak Responsif Berhenti Bekerja Tiba-tiba

  * Gambar Terlalu Lama untuk Dimuat

  * Konten Paling Penting Tidak Jelas

  * Terlalu banyak informasi

  * Data untuk Layar Kecil


Pembaruan Situs Web Ramah Seluler Tidak Muncul


Anda baru saja menghabiskan banyak waktu untuk memperbarui situs web Anda. Mereka tampak hebat di desktop Anda tetapi tidak muncul di perangkat seluler Anda.


Salah satu alasan paling umum adalah caching. Browser seluler Anda mungkin menampilkan versi lama situs Anda yang sebelumnya Anda unduh. Alasan lain mungkin karena situs web Anda mempertahankan versi lama halaman Anda dan tidak menunjukkan perubahan Anda.


Jika ini masalahnya, Anda perlu mengosongkan cache untuk mengunduh versi yang direvisi. Plugin caching seperti WP Super Cache, W3 Total Cache, atau WP Fastest Cache dapat membantu mengatasi masalah ini.


Berikut adalah empat langkah untuk membantu Anda membersihkan cache dan browser situs web Anda untuk mengaktifkan versi baru agar ditampilkan di situs ramah seluler Anda.

 1. Segarkan browser Anda beberapa kali di desktop dan perangkat seluler Anda.

 2. Uji situs web Anda di perangkat seluler yang berbeda.

3. Bersihkan situs Anda dengan plugin caching.

 4. Periksa dengan perusahaan hosting Anda untuk melihat apakah ada sistem caching lain di server Anda yang perlu dibersihkan.


Navigasi Tidak Ramah


Mungkin sulit untuk membuat menu navigasi yang berfungsi dengan baik di perangkat seluler. Jika navigasi situs web Anda memiliki banyak item dan submenu, bahkan lebih sulit untuk memeras semuanya di layar yang lebih kecil.


Misalnya, jika Anda hanya memiliki tiga atau empat item di navigasi situs web Anda, itu akan terlihat bagus di seluler. Namun, jika Anda memiliki lebih banyak item dan submenu, mereka akan menumpuk satu sama lain dan terlihat ramai.


Berikut adalah beberapa cara untuk memperbaiki masalah ini untuk situs web yang ramah seluler:

  * Ubah navigasi Anda menjadi menu tarik-turun untuk perangkat seluler.

  * Tampilkan menu navigasi Anda sebagai elemen blok, sehingga muncul secara vertikal.

  * Gunakan ikon menu yang dapat diubah untuk menggunakan lebih sedikit ruang.

  * Buat menu navigasi seluler menggunakan jQuery.

  * Gunakan menu Hamburger (Banyak tema menyertakan ini sebagai opsi atau Anda dapat menggunakan plugin.)


Tata Letak Responsif Berhenti Bekerja Tiba-tiba


Jika situs mobile friendly Anda tiba-tiba berhenti bekerja, bisa jadi karena plugin di situs Anda.


Memasang plugin baru atau memperbarui plugin yang sudah ada dapat menyebabkan konflik dengan plugin lain yang memengaruhi tata letak responsif Anda.


Mulailah dengan menonaktifkan setiap plugin satu per satu untuk melihat apakah itu penyebabnya. Jangan nonaktifkan semuanya sekaligus atau Anda tidak akan tahu plugin mana yang menjadi penyebabnya.


Perubahan kode adalah kemungkinan penyebab lainnya. Jika Anda telah mengubah kode apa pun secara tidak sengaja atau sengaja, pulihkan basis kode asli dan lihat apakah situs web responsif Anda mulai berfungsi kembali.


Saat memeriksa situs Anda untuk respons seluler, Anda harus selalu mengujinya di perangkat seluler.


Terkadang tampaknya berfungsi saat mengubah ukuran jendela browser di desktop Anda tetapi tidak ditampilkan dengan benar di seluler.

Jika satu baris kode hilang dari file header HTML, itu dapat merusak desain responsif. Satu baris kode yang hilang ini akan menyebabkan perangkat seluler Anda menganggap situs yang Anda lihat adalah situs web berukuran penuh.


Situs yang dirender akan menjadi ukuran viewport (ukuran area halaman web yang terlihat oleh pengguna).


Untuk memperbaiki situs ramah seluler Anda, tambahkan baris kode berikut ke bagian header:


<meta name="viewport" content="width=device-width">


Terkadang ketika sebuah tema diperbarui, kode ini bisa hilang.


Gambar Terlalu Lama untuk Dimuat


Mengoptimalkan gambar dan mengurangi ukuran file gambar masuk akal. Gambar besar yang tidak dioptimalkan dapat memperlambat kecepatan pemuatan halaman web Anda. Ini bisa membuat frustasi bagi pengguna ponsel.


WordPress versi 4.4 dan di atasnya secara otomatis menyajikan versi gambar terkecil di server Anda.


Jika Anda sudah menjalankan WordPress versi terbaru, tetapi situs Anda masih belum memuat cukup cepat, Anda dapat:

  * Instal plugin seperti Smush Image Optimization, Compression, dan Lazy Load untuk mengubah ukuran dan mengoptimalkan gambar Anda

  * Gunakan alat kompresi dan pengoptimalan sebelum mengunggah gambar ke situs Anda seperti TinyPNG, Compress JPEG, atau Online Image Optimizer.


Konten Paling Penting Tidak Jelas


Beberapa situs web dimuat dengan banyak konten yang tidak perlu untuk mengisi ruang kosong saat dibuka di desktop.


Situs web yang dikembangkan tanpa disadari oleh pengguna seluler umumnya termasuk dalam kategori ini. Situs-situs ini membutuhkan lebih banyak waktu dan bandwidth untuk dimuat.


Jika halaman tidak dirancang dengan tepat untuk perangkat seluler, maka sebagian konten mungkin tidak muncul di seluler tanpa banyak menggulir.


Sering kali, sebuah elemen di halaman web Anda akan terlihat satu arah di komputer dan sama sekali berbeda di perangkat seluler.


Misalnya, halaman harga dengan tiga kolom akan menampilkannya berdampingan di komputer.


Namun, pada perangkat seluler, kolom ditumpuk satu sama lain karena ukuran layar lebih kecil. Perilaku ini diharapkan.


Pastikan tabel harga Anda berada di posisi teratas di halaman web Anda sehingga akan muncul pertama kali saat dilihat di seluler. Jika Anda memiliki banyak teks di atas meja Anda, pengguna seluler harus menggulir ke bawah untuk melihatnya dan mungkin tidak.


Untuk pengalaman pengguna seluler yang paling optimal, letakkan konten paling penting di bagian atas halaman. Jika pengguna perlu banyak menggulir sebelum mereka dapat melihat konten Anda, mereka mungkin tidak akan melakukannya.


Terlalu banyak informasi


Situs dengan elemen antarmuka pengguna yang rumit seperti tabel, formulir multi-langkah, dan fitur penelusuran lanjutan dapat menghasilkan pengalaman pengguna seluler yang buruk.


Elemen-elemen ini mengandung terlalu banyak informasi yang dapat memadati layar ponsel dan mengganggu pengguna dalam menemukan informasi yang mereka inginkan.


Salah satu pendekatannya adalah menghapus atau menyembunyikan beberapa konten dari pengguna seluler. Namun, ini bukan solusi ideal bagi pengunjung yang ingin memiliki akses ke elemen ini.


Untuk menghindari masalah ini, optimalkan situs ramah seluler Anda sebanyak mungkin. Juga, hapus elemen yang tidak perlu sambil berfokus pada struktur inti situs web Anda.


Data Untuk Layar Kecil


Tabel kompleks dengan banyak baris dan kolom dapat menjadi masalah jika dilihat di layar ponsel kecil. Perbaikan terbaik adalah menggunakan tabel responsif.


Plugin seperti WP Responsive Table dapat membuat ini mudah dilakukan.


Seperti tabel harga di atas, bila dilihat di perangkat seluler, kolom akan ditumpuk agar sesuai dengan layar yang lebih kecil.


Cara lain untuk menampilkan data di perangkat seluler meliputi:

  * Membuat tabel yang lebih kecil tanpa tata letak grid untuk menghindari kebutuhan untuk pengguliran horizontal.

  * Membalik meja di sisinya agar lebih pas di layar yang lebih kecil.

  * Mengganti tabel yang lebih besar dengan yang lebih kecil yang terhubung ke versi lengkap.

  * Mengubah tabel menjadi diagram lingkaran.


Karena penggunaan seluler tumbuh secara eksponensial, sangat penting bahwa situs web bisnis dioptimalkan dengan versi ramah seluler. Tingkatkan pengalaman pengguna tanpa mengorbankan fungsionalitas dengan mengikuti langkah-langkah di atas.


Anda juga harus selalu memantau kinerja situs Anda dan melakukan penyesuaian bila perlu untuk meningkatkan kinerja dan pengalaman pengguna.


Sekian artikel tentang 7 Tips WordPress Untuk Situs Web yang Ramah Seluler. Baca juga artikel mengenai 7 Wallpaper Animasi Menakjubkan untuk Windows 10 untuk Mengubah Desktop Anda yang mungkin perlu Sobat ketahui.

Lebih baru Lebih lama