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 memerlukan perhatian jika Anda ingin pengunjung tetap berada di situs Anda saat menjelajah di perangkat seluler.

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

• Perubahan yang Dibuat Tidak Ditampilkan di ^(Are)Seluler^(Mobile)
• Navigasi Tidak Ramah
• Tata Letak Responsif^{(Responsive Layout)} 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^{(Mobile Friendly Website Updates Not Showing Up)}

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 berbagai perangkat seluler.
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^{(Unfriendly Navigation)}

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^(Below) 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^{( use a plugin)} .)

Tata Letak Responsif Berhenti Bekerja Tiba-tiba^{(Responsive Layout Stops Working Suddenly)}

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^(Code) 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 ponsel.

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^{(Images Are Taking Too Long to Load)}

Mengoptimalkan gambar dan mengurangi ukuran file gambar^{(reducing image file size)} 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^(WordPress) versi terbaru , tetapi situs Anda masih belum memuat cukup cepat, Anda dapat:

• Instal plugin seperti Smush Image Optimization, Compression, dan Lazy Load^{( Smush Image Optimization, Compression, and 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^{(Most Important Content Isn’t Obvious)}

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^(Make) 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^{(Too Much Information)}

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^{(Data For Small Screens)}

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

Sebuah plugin seperti WP Responsive Table dapat membuat ini mudah dilakukan.

Seperti tabel harga di atas, jika 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 kisi untuk menghindari kebutuhan pengguliran horizontal.
• Membalik meja di sisinya agar lebih pas di layar yang lebih kecil.
• Mengganti tabel yang lebih besar dengan yang lebih kecil yang menautkan 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^(Enhance) pengalaman pengguna tanpa mengorbankan fungsionalitas dengan mengikuti langkah-langkah di atas.

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

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having a great-looking desktoр wеbsite and a mobile ѕite that doesn’t work correctly.

Most design fixes are simple but do require attention if you want visitors to stay on your site while browsing on a mobile device.

This article will highlight seven mobile friendly website issues and fixes for them.

• Changes Made Are Not Showing on Mobile
• Unfriendly Navigation
• Responsive Layout Stops Working Suddenly
• Images Are Taking Too Long to Load
• Most Important Content Isn’t Obvious
• Too Much Information
• Data for Small Screens

Mobile Friendly Website Updates Not Showing Up

You have just spent a lot of time making updates to your website. They look great on your desktop but don’t show up on your mobile device.

One of the most common reasons is caching. Your mobile browser could be showing an old version of your site which you previously downloaded. Another reason can be that your website is holding onto the old version of your page and not showing your changes.

If this is the problem, you will need to clear the cache to download the revised version. A caching plugin such as WP Super Cache, W3 Total Cache, or WP Fastest Cache can help solve this problem.

Below are four steps to help you flush your website cache and browser to enable the new version to show on your mobile friendly site.

1. Refresh your browser several times on your desktop and mobile device.
2. Test your website on different mobile devices.
3. Clear your site with a caching plugin.
4. Check with your hosting company to see if there is another caching system on your server that needs to be cleared.

Unfriendly Navigation

It can be challenging to create a navigation menu that works well on mobile devices. If your website navigation has many items and submenus, it is even more tricky to squeeze everything on a smaller screen.

For example, if you only have three or four items in your website navigation, it should look fine on mobile. However, if you have more items and submenus, they will stack up on top of each other and look crowded.

Below are a few ways to fix this problem for a mobile friendly website:

• Turn your navigation into a dropdown menu for mobile devices.
• Display your navigation menu as block elements, so they appear vertically.
• Use a menu icon that can be toggled to take up less space.
• Create a mobile navigation menu using jQuery.
• Use the Hamburger menu (Many themes include this as an option or you can use a plugin.)

Responsive Layout Stops Working Suddenly

If your mobile friendly site suddenly stops working, it could be due to a plugin on your site.

Installing a new plugin or an update to an existing plugin could be causing a conflict with others that affects your responsive layout.

Start by deactivating each plugin one at a time to see if it is the cause. Don’t deactivate them all at once or you won’t know which plugin could be the culprit.

Code changes are another possible cause. If you have modified any code accidentally or intentionally, restore the original codebase and see if your responsive website starts working again.

When checking your site for mobile responsiveness, you should always test it on a mobile device. 

Sometimes it appears to work when resizing the browser window on your desktop but doesn’t display correctly on mobile.

If one line of code is missing from an HTML header file, it can break the responsive design. This single line of missing code will cause your mobile device to assume the site you are viewing is a full-sized website.

The site rendered will be the size of the viewport (the size of the area of the web page that is visible to the user).

To fix your mobile friendly site, add the following line of code to the header section:

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

Sometimes when a theme is updated, this code can disappear.

Images Are Taking Too Long to Load

Optimizing images and reducing image file size makes sense. Large images that are not optimized can slow down the loading speed of your webpages. This can be frustrating to mobile users.

WordPress version 4.4 and above automatically serves up the smallest version of an image on your server.

If you are already running the latest version of WordPress, but your site is still not loading fast enough, you can:

• Install a plugin such as Smush Image Optimization, Compression, and Lazy Load to resize and optimize your images
• Use a compression and optimization tool before uploading images to your site such as TinyPNG, Compress JPEG, or Online Image Optimizer.

Most Important Content Isn’t Obvious

Some websites are loaded with a lot of unnecessary content to fill the empty space when opened on a desktop.

Websites developed without being conscious of mobile users generally fall under this category. These sites take more time and bandwidth to load.

If the pages aren’t designed appropriately for mobile devices, then part of the content may not appear on mobile without a lot of scrolling.

Most of the time, an element on your webpage will look one way on a computer and completely different on a mobile device.

For example, a pricing page with three columns will show them side by side on a computer.

However, on a mobile device, the columns are stacked on top of each other because the screen size is smaller. This behavior is to be expected.

Make sure your pricing table is in a top position on your webpage so that it will appear first when viewed on mobile. If you have a lot of text over your table, mobile users will have to scroll down to see it and might not.

For the most optimal mobile user experience, put the most critical pieces of content towards the top of the page. If a user needs to scroll a lot before they can view your content, they probably won’t.

Too Much Information

Sites with complicated user-interface elements such as tables, multi-step forms, and advanced search features can produce a poor mobile user experience.

These elements contain too much information that can crowd a mobile screen and interfere with a user finding the information they want.

One approach is to remove or hide some content from mobile users. However, this is not an ideal solution for visitors who want to have access to these elements.

To avoid this problem, optimize your mobile friendly site as much as possible. Also, remove any unnecessary elements while focusing on the core structure of your website.

Data For Small Screens

Complex tables with many rows and columns can be a problem when viewed on small mobile screens. The best fix is to use responsive tables.

A plugin such as WP Responsive Table can make this easy to accomplish.

As with the pricing table above, when viewed on a mobile device, the columns will be stacked to fit the smaller screen.

Other ways to show data on mobile devices include:

• Creating a smaller table without the grid layout to avoid the need for horizontal scrolling.
• Flipping a table on its side to fit better on a smaller screen.
• Replacing larger tables with smaller ones that link to the full version.
• Converting tables into pie charts.

As mobile usage is growing exponentially, it is imperative that business websites are optimized with mobile friendly versions. Enhance user experience without sacrificing functionality by following the steps above.

You should also always monitor your site’s performance and make tweaks when necessary to improve performance and user experience.

Related posts

• Cara Mengatur Situs Web Seperti Twitter Anda Sendiri Menggunakan Tema P2 WordPress

• 10 Plugin WordPress Penting Untuk Situs Web Bisnis Kecil

• Cara Membuat WordPress Site Secure

• Ulasan Buku: Buat Situs Web Anda Sendiri: Panduan Komik Untuk HTML, CSS, dan Wordpress

• Wix Vs WordPress: Mana yang Terbaik untuk Membuat Situs Web Anda?

• Change Quick Chat Voice pada PUBG Mobile

• Access Mobile Website Using Desktop Browser (PC)

• Tips untuk membeli Mobile Phones dan Laptops

• Cara Melindungi Halaman dengan Kata Sandi di Situs WordPress Anda

• 10 Tempat Teratas untuk Menemukan Gambar dan Video HD Gratis untuk Situs Web Anda

• 3 Ways untuk menghapus Slideshow From Any Website

• Bagaimana menjalankan blazingly cepat WordPress di Microsoft Azure

• Cara Meningkatkan Situs WordPress Anda Dengan Desain Kerangka Kejadian

• Cara mengambil Screenshot pada Netflix (Desktop & Mobile)

• Cara Menghapus Notifikasi Facebook di Ponsel dan Desktop

• Cara Memantau Saat Situs Web Diperbarui

• Cara menggunakan torrent pada perangkat Apple Mobile

• Cara Melacak Perubahan di Word (Online, Mobile, dan Desktop)

• Pantau Situs Web Tersembunyi dan Koneksi Internet

• Periksa Usia Situs Web