Cara Membuat Situs WordPress Mobile Responsif

Situs web responsif sekarang menjadi standar industri, karena banyaknya pengguna yang menjelajah terutama di perangkat seluler. Untuk mengilustrasikan seberapa dalam dampak ini, raksasa industri seperti Google sekarang menghargai situs ramah seluler di peringkat pencarian, untuk membantu mendorong lebih banyak situs agar melayani perangkat non-desktop.

Singkatnya, situs web responsif menggunakan kode situs yang sama di semua platform, tetapi menawarkan pengoptimalan untuk setiap pengalaman, apa pun media tampilannya. Akibatnya, menyiapkan situs yang responsif mungkin berarti membangun kembali seluruh desain Anda, atau hanya membuat beberapa penyesuaian pada yang sudah ada.

Pada artikel ini, Anda akan mempelajari bagaimana situs WordPress dapat dibuat mobile-friendly menggunakan desain responsif. Kami juga akan menjelaskan pentingnya daya tanggap untuk Search Engine Optimization (SEO). Mari kita mulai!

Apakah WordPress Ramah Seluler?

WordPress adalah Sistem Manajemen Konten (CMS) yang memungkinkan Anda merancang ujung depan situs Anda untuk memenuhi persyaratan yang tepat. Ini berarti dapat dengan mudah dibuat mobile-friendly.

Tema default responsif telah tersedia sejak 2011. Banyak tema pihak ketiga sekarang juga menawarkan desain responsif out-of-the-box. Mereka yang tidak sering ketinggalan zaman di banyak daerah lain.

Apa itu Desain Responsif?

Mari kita bahas bagaimana desain responsif akan diterapkan ke situs WordPress Anda. Desain responsif adalah cara mengatur konten di situs web Anda sehingga dapat secara dinamis merespons ukuran layar yang ditampilkan. Ini berarti pengalaman pengguna di smartphone sama bagusnya dengan di laptop.

Untuk mencapai pengalaman luar biasa ini di seluruh perangkat, desainer akan membuat kisi konten yang lancar dan fleksibilitas kode ke dalam gambar melalui CSS situs untuk mengatur ulang HTML sebagai respons langsung terhadap ukuran dan resolusi layar.

Jika Anda menginginkan contoh yang bagus, buka Mashable.com di jendela baru (dengan asumsi Anda belum menggunakan perangkat seluler). Setelah Anda berada di sana, ubah ukuran jendela browser Anda untuk membuatnya semakin kecil dan perhatikan bagaimana situs web mengatur ulang dirinya sendiri

Saat Anda mengecilkan jendela, blok gambar dan konten berlomba untuk masuk ke jendela yang semakin kecil dan semakin kecil sesuai dengan kisi-kisi cairan yang dibuat oleh perancang. Paling kecil, Anda akan melihat seperti apa situs Mashable di iPhone. Itu indah, dan mudah dibaca. Embiggen jendela lagi, dan mereka merespons dengan kembali ke konfigurasi "desktop" mereka.

Situs mengatur ulang sendiri karena ada kueri media CSS yang menerapkan aturan berbeda pada halaman, bergantung pada ukuran perangkat (dalam hal ini, jendela browser) yang melihat situs. HTML tetap sama, hanya diatur ulang oleh CSS. Aturan CSS dapat diterapkan untuk mengatur ulang semua yang ada di situs, termasuk menyajikan berbagai ukuran gambar sesuai dengan resolusi perangkat. Ini sangat keren ketika Anda ingin melakukan hal-hal seperti menyajikan gambar yang disempurnakan retina ke perangkat iOS secara khusus.

Aplikasi Seluler vs. Situs Responsif

Memilih Aplikasi versus situs responsif tergantung pada tujuan situs. Sebagian besar situs web akan baik-baik saja dengan desain responsif yang dapat beradaptasi dengan perangkat. Aplikasi seluler berperan saat pengguna Anda menginginkan fungsionalitas yang sangat spesifik pada perangkat seluler mereka yang berbeda dari yang disediakan situs lengkap. Bank Anda mungkin menawarkan aplikasi seluler sehingga Anda dapat dengan cepat memeriksa saldo Anda di Starbucks. Facebook dan Twitter juga menyesuaikan fungsionalitasnya di aplikasi mereka agar sesuai dengan penggunaan seluler.

Hanya jika pengguna Anda memerlukan serangkaian fungsi tertentu dari ponsel mereka, berbeda dari yang mereka butuhkan dari situs web utama Anda, aplikasi asli adalah sesuatu yang perlu dipertimbangkan.

Pertimbangan Performa untuk Situs yang Responsif

Desain yang responsif akan memengaruhi kinerja situs Anda secara keseluruhan. Memuat banyak CSS dan berbagai ukuran gambar untuk merespons ukuran perangkat bisa mahal dari perspektif pemrosesan backend. Sebagai bagian dari evaluasi desain responsif, penting untuk memprioritaskan performa sebagai fitur. Pengguna masih berharap situs seluler menjadi sedikit lebih lambat, tetapi mereka tidak akan memaafkan jika mereka mencoba membuka situs Anda untuk menunjukkan kepada teman atau teman kencan mereka, dan mereka harus menunggu lebih dari beberapa detik.

Dari sudut pandang teknis, saat mengirimkan situs Anda ke perangkat seluler yang menggunakan data seluler akan menghambat Anda selama 0,5 detik dari awal. Misalnya, untuk mengambil 40KB di 4G membutuhkan waktu 700ms dalam kondisi optimal. Latensi jaringan dan variasi situasional hanya akan menambah waktu muat Anda juga. Anda tidak dapat mengontrol variabel jaringan seluler, jadi sangat penting bagi Anda untuk membangun situs responsif dengan performa sebagai fitur sejak awal.

Pastikan Anda telah melakukan hal berikut untuk memastikan situs Anda dioptimalkan untuk seluler.

• Optimalkan gambar Anda: Secara otomatis mendeteksi ukuran layar perangkat untuk membuat, membuat cache, dan mengirimkan ukuran gambar yang tepat.
• Kurangi permintaan HTTP Anda: Minimalkan jumlah CSS dan JavaScript yang perlu Anda gunakan, lalu simpan cache yang lainnya.
• Memuat Aset Secara Bersyarat: Tombol media sosial yang besar, gambar, dan sejenisnya bagus untuk perangkat yang lebih besar, tetapi tidak akan memengaruhi pengalaman pengguna untuk perangkat yang lebih kecil. Rencanakan desain Anda hanya memuat apa yang benar-benar diperlukan.
• Lazy Loading: Jika Anda dapat memuat aset tertentu, khususnya JavaScript, setelah elemen halaman yang paling penting, lakukanlah. Pada saat pengguna Anda telah menggunakan konten yang mereka inginkan, aset lain tersebut akan dimuat.

Apakah Situs WordPress Anda Perlu Responsif?

Semakin banyak, jawaban default untuk pertanyaan ini adalah ya, terutama dengan ketersediaan tema WordPress responsif yang luas. Jika situs Anda siap untuk didesain ulang, atau sedang dalam proses didesain, penting untuk menawarkan pengalaman berkualitas kepada pengguna Anda di perangkat apa pun yang mereka gunakan.

Dengan mengingat hal itu, saya akan mengakhiri dengan beberapa pertanyaan untuk Anda dan tim Anda untuk mengevaluasi apakah WordPress Anda harus dirancang secara responsif.

• Apa kasus penggunaan untuk situs Anda? Akankah konsumsi seluler menjadi penting? Kemungkinan besar, jawabannya adalah "ya, dan semakin meningkat setiap tahun." Akan ada pengecualian, tapi tidak banyak.
• Siapa pengguna Anda? Semakin teknis mereka, semakin mutakhir, semakin besar kemungkinan mereka akan mengharapkan situs yang responsif untuk setiap merek yang mereka kaitkan.
• Apakah Anda memiliki anggaran? Ini yang besar. Situs responsif sedikit lebih mahal untuk dibangun pada awalnya, tetapi lebih murah untuk membangun satu situs responsif daripada berencana membangun dua versi terpisah dari situs Anda, dan kemudian mengelola pemeliharaan untuk keduanya.
• Apakah Anda siap mempelajari jenis desain baru? Desain responsif memperkenalkan banyak konsep dan cara baru untuk memahami konten digital. penting untuk bekerja dengan tim desain yang tidak hanya dapat mendesain sesuatu yang indah, tetapi juga mendidik Anda sepanjang jalan.

Membuat Desain Web WordPress yang Responsif

Desain statis yang ada seringkali dapat diubah menjadi tema responsif. Berikut adalah beberapa elemen yang perlu dipertimbangkan selama proses konversi:

• Zoom browser bawaan
• Lebar dan tinggi elemen fluida
• Pengoptimalan gambar
• Breakpoint khusus desain
• Pisahkan menu responsif untuk perangkat seluler

Anda juga harus menguji desain yang diperbarui di beberapa perangkat, dan mempertimbangkan elemen tambahan seperti tabel responsif dalam pengujian Anda. Namun, cara termudah untuk membuat WordPress responsif adalah dengan memilih tema responsif bawaan sejak awal.

Memilih Tema WordPress yang Tepat

Sebelum Anda mulai mencari melalui lebih dari 10.000 tema WordPress yang tersedia saat ini, ada baiknya Anda membuat daftar fitur yang Anda inginkan untuk situs Anda dan menggunakan daftar itu sebagai titik awal.

Jika Anda tidak yakin tentang jenis fitur yang harus dicari, ada beberapa garis dasar yang dapat Anda tekankan untuk membantu mempersempit segalanya: pengoptimalan mesin telusur (SEO) dan waktu pemuatan halaman yang cepat (apa pun perangkatnya) adalah dua hal yang harus dimiliki tema apa pun.

Meskipun ada banyak tema WordPress yang tidak memiliki fungsi bawaan ini, menggunakan tema yang memiliki kedua fitur ini akan memberikan pengalaman pengguna akhir yang jauh lebih baik di situs Anda.

Rangkaian Tema WordPress Premium WP Engine, misalnya, semuanya dioptimalkan oleh mesin pencari dan responsif seluler, artinya semuanya dimuat dengan cepat di perangkat apa pun. Tema-tema yang tampak hebat ini telah dibuat untuk berbagai kasus penggunaan, dan bisnis dari segala bentuk dan ukuran menggunakannya untuk mendorong keberadaan online mereka.

Akses ke tema-tema ini juga disertakan dengan setiap paket WP Engine, yang berarti pelanggan WP Engine dapat menggunakan semuanya tanpa biaya tambahan.

Plugin WordPress Seluler

Ponsel membuka banyak potensi untuk fitur-fitur seperti pemberitahuan push dan pemuatan terus-menerus melalui koneksi yang lambat. Namun, meskipun ada solusi untuk membantu mengubah situs web Anda menjadi aplikasi web seluler dan membawa konsep ramah seluler ke tingkat selanjutnya, banyak yang masih dalam tahap pengembangan dan pengujian.

Ini berarti bahwa beberapa fungsi yang Anda harapkan mungkin kurang. Namun, ada sejumlah plugin WordPress seluler yang dapat membantu Anda meningkatkan situs Anda dengan berbagai cara.

1.JetPack

Meskipun ada banyak solusi yang tersedia, plugin Jetpack adalah opsi yang sangat populer. Anda akan menemukannya di Direktori Plugin, tetapi juga memiliki opsi untuk membuat tema seluler sederhana di situs Anda.

Salah satu hal terbaik tentang Jetpack adalah perawatannya yang baik. Ini berarti akan sering ada pembaruan untuk memastikan keamanan dan fungsinya. Itu juga salah satu alat paling penuh fitur yang dapat Anda temukan. Plugin dasar gratis dan dilengkapi dengan banyak pilihan. Sisi negatifnya adalah ada begitu banyak fitur, antarmuka mungkin tampak membingungkan pada awalnya.

Selain itu, Jika Anda menginginkan pencadangan harian, tema khusus, dan alat SEO, Anda harus berinvestasi di Jetpack versi premium. Bergantung pada kebutuhan Anda, Anda bisa mendapatkan plugin premium untuk penggunaan pribadi seharga $39 per tahun, dengan tingkat teratas masuk $299 per tahun.

2.WPtouch

Selain itu, Anda dapat menjelajahi WPtouch, plugin populer yang dapat membuat situs web seluler dari situs Anda yang sudah ada. Salah satu manfaat utama menggunakan plugin ini adalah Anda dapat menyesuaikan versi seluler tanpa mengganggu atau mengubah situs web asli Anda.

Versi gratisnya juga memiliki fungsionalitas yang cukup kuat. Namun, jika Anda mencari tampilan dan nuansa yang berbeda, Anda harus membeli versi pro. Paket harga pro mulai dari $79 per tahun, dan berkisar hingga $359 per tahun untuk lisensi tingkat perusahaan.

3. Paket Seluler WordPress

Meskipun WordPress Mobile Pack belum diuji dengan versi terbaru WordPress, ini adalah plugin populer untuk membuat Aplikasi Web Progresif (PWA) dari situs web Anda yang sudah ada. Ini berarti pengguna situs Anda akan mendapatkan pengalaman 'mirip aplikasi', tanpa mengharuskan Anda menggunakan sumber daya untuk memprogram aplikasi yang dapat diunduh untuk toko aplikasi.

Dengan plugin ini, Anda dapat mendorong pesan spanduk ke pengguna, mengingatkan mereka tentang opsi untuk menambahkan situs web Anda ke layar beranda mereka. Halaman Anda kemudian akan di-cache dan dimuat dengan sangat cepat. Fungsi dasar plugin ini gratis, tetapi Anda harus membeli versi pro untuk mendapatkan akses ke lebih banyak tema, opsi penyesuaian, dan kemampuan untuk menyinkronkan konten tertentu.
Versi pro plugin memiliki tiga tingkatan untuk dipilih. Paket Freelancer mulai dari $99 per tahun, dan dapat digunakan di tiga domain. Tingkat harga teratas dengan opsi VIP, $499 per tahun untuk sepuluh lisensi domain.

Gambar Responsif

WordPress telah menawarkan gambar responsif unggulan secara default sejak versi 4.4. Namun, khususnya untuk situs yang menggunakan kode lama, ada cuplikan sederhana yang dapat Anda tambahkan ke lembar gaya untuk memastikan gambar tidak terlihat terlalu besar di perangkat kecil:

img {
max-width: 100%;
height: auto;
}

Meskipun ada banyak cara untuk memastikan performa gambar responsif yang optimal, cuplikan ini memastikan bahwa semua gambar Anda responsif sebagai dasarnya.

Terakhir, sebagian besar gambar cocok untuk disertakan di situs responsif, meskipun skalabilitas harus menjadi faktor. Misalnya, jika Anda menyertakan gambar dengan banyak teks, mungkin tidak mudah dibaca di perangkat seluler. Dalam hal ini, Anda mungkin lebih baik memilih gambar yang berbeda, atau menyediakan cara agar teks dapat dibaca secara terpisah dari gambar.

Menu Responsif

Ada dua aliran pemikiran dasar tentang pembuatan menu responsif:

1. Buat satu menu yang berfungsi di semua ukuran.
2. Buat dua menu: satu untuk layar besar dan satu lagi untuk pengalaman layar kecil. Hanya satu yang akan ditampilkan pada satu waktu, tergantung ukuran layar yang digunakan.

Pendekatan satu ukuran cocok untuk semua berfungsi paling baik untuk menu yang lebih kecil, karena pengoptimalan CSS untuk keterbacaan seluler hanya memerlukan beberapa penyesuaian sederhana. Dalam situasi tersebut, menu selalu terlihat oleh pengguna berapa pun ukuran perangkatnya.

Namun, jika menu terlalu besar untuk dikecilkan dengan mudah untuk perangkat seluler, Anda mungkin memerlukan versi kedua yang didedikasikan untuk layar yang lebih kecil. Dalam hal ini, menu besar hanya terlihat di layar besar, dan ikon menu seluler ada di layar yang lebih kecil.

Contoh tipikal dari pendekatan ini adalah ikon menu hamburger, yang menampilkan menu seluler lengkap saat diklik. Anda juga dapat menggunakan beragam pilihan plugin WordPress untuk membantu pembuatan menu responsif Anda. Mari kita lihat tiga opsi.

1.UberMenu

Salah satu opsi yang bisa Anda coba adalah UberMenu. Dengan $25, Anda akan memiliki akses ke pembaruan di masa mendatang dan dukungan selama enam bulan. UberMenu dapat membantu Anda membuat menu yang sepenuhnya responsif dan ramah sentuhan. Sayangnya, kecuali tema Anda khusus UberMenu, Anda mungkin harus membuat beberapa perubahan manual agar tema Anda berfungsi dengan baik.

2.Menu Max Mega

Pilihan lainnya adalah plugin Max Mega Menu. Alat ini memiliki opsi gratis di Direktori Plugin WordPress, dan berfungsi dengan menu yang ada untuk mengubahnya menjadi menu 'mega':

Versi gratisnya juga memiliki banyak fitur menu seluler, seperti dukungan asli untuk layar sentuh. Untuk mendapatkan akses ke lebih banyak font dan opsi sakelar seluler, Anda harus memeriksa salah satu dari tiga tingkatan harga. Versi premium plugin mulai dari $29 per tahun, dan berkisar hingga $99 per tahun untuk beberapa lisensi situs.

3. Menu Responsif

Plugin lain yang berperingkat baik dan populer yang dapat Anda periksa untuk menjadikan menu Anda ramah seluler adalah plugin Menu Responsif. Solusi ini memiliki lebih dari 150 opsi penyesuaian yang berbeda, semuanya dalam antarmuka yang mudah digunakan.

Anda akan memiliki fleksibilitas untuk mengubah hampir setiap aspek menu Anda dari halaman pengaturan plugin Anda. Namun, jika Anda mencari animasi dan lebih banyak font, Anda harus memeriksa pemutakhiran plugin Menu Responsif.

Versi gratis dari plugin dapat menghadirkan fitur yang Anda butuhkan, karena daftar opsinya cukup luas. Jika Anda memutakhirkan, Anda bisa mendapatkan satu lisensi situs seharga $29, atau mendapatkan lisensi tak terbatas seharga $99. Biaya plugin adalah biaya satu kali, dan Anda akan menerima pembaruan gratis seumur hidup.

Tabel Responsif

Secara default, tabel menggunakan ruang sebanyak kontennya (atau lebih). Hal ini dapat menyebabkan tabel ekstra lebar merusak tata letak seluler.

Sayangnya, tabel yang berisi konten menjadi sulit dibaca saat diperkecil agar sesuai dengan lebar halaman seluler. Desain responsif bukan hanya tentang memasukkan data ke dalam layar kecil. Alih-alih, ini tentang membuat semuanya ramah pengguna apa pun perangkatnya.

Untuk solusi cepat dan kotor, Anda dapat menambahkan daya tanggap dasar ke tabel Anda dengan cuplikan CSS ini:

table {
width: 100%;
border-collapse: collapse;
}

Namun, Anda tidak harus berhenti di situ. Kecuali Anda memiliki tabel kecil, sebaiknya optimalkan masing-masing tabel berdasarkan jenis konten yang disajikan. Bergantung pada data dalam tabel Anda, ada sejumlah opsi responsif yang dapat Anda pilih untuk keterbacaan terbaik.

Namun, jika Anda mencari solusi plugin untuk tabel responsif, Anda beruntung! Ada beberapa opsi, tetapi kami akan merekomendasikan tiga secara khusus.

1. Tekan Meja

Pertama, plugin TablePress adalah opsi yang populer, terpelihara dengan baik, dan berperingkat tinggi. Anda akan dapat membuat dan menyematkan tabel yang indah dengan kode pendek. Namun, untuk mencapai tabel yang benar-benar responsif, Anda harus menginstal ekstensi TablePress. Meskipun ini juga gratis, Anda disarankan untuk memberikan donasi kepada pengembang.

2. Pembuat Tabel WP

Jika Anda mencari opsi pembuat tabel seret dan lepas bintang lima, WP Table Builder mungkin cocok untuk Anda. Plugin yang agak baru namun diterima dengan baik, antarmuka drag-and-drop membuatnya mudah untuk membuat tabel responsif untuk situs web Anda.

Ini adalah plugin yang sepenuhnya gratis juga. Satu-satunya kelemahan nyata dari opsi ini adalah hanya ada lima opsi data saat ini. Anda agak terbatas pada teks, gambar, tombol, daftar, dan peringkat bintang.

3. wpDataTables

Plugin ketiga yang kami sarankan untuk dicoba adalah wpDataTables. Dengan alat ini, Anda dapat dengan cepat membuat tabel dan bagan dari Excel, CSV, PHP, atau data lain yang ada. Ini berarti Anda dapat mengambil kumpulan data besar dan membuatnya dapat diakses di situs web Anda.

Plugin ini juga siap untuk Gutenberg, membuatnya mudah untuk menambahkan tabel ke halaman dan posting situs Anda setelah Anda menyesuaikannya di pengaturan plugin. Anda akan agak dibatasi oleh versi gratis dari plugin ini.
Misalnya, Anda tidak akan dapat membuat tabel berbasis kueri MSQL atau menarik informasi dari Google Spreadsheets kecuali jika Anda mengupgrade. Versi premium mulai dari $59 per tahun untuk tingkat harga dasar, dan mencapai $249 per tahun untuk paket pengembang.

Menambahkan Kemampuan Multibahasa

Karena adopsi WordPress terus meningkat di seluruh dunia, hal itu memicu meningkatnya kebutuhan akan fungsionalitas multibahasa, yang memungkinkan situs diterjemahkan ke dalam bahasa lokal berdasarkan lokasi pengguna.

Jenis fungsionalitas ini sangat besar untuk bisnis dengan pelanggan di banyak negara, dan dengan WordPress, menambahkannya ke situs Anda tidak sesulit yang Anda kira. Bahkan, itu bisa dilakukan dengan memasang plugin seperti Weglot, yang memungkinkan Anda membuat situs web multibahasa dalam hitungan menit – tanpa perlu kode.

Weglot juga kompatibel dengan semua tema dan plugin WordPress, artinya Weglot akan berfungsi pada tema apa pun yang Anda gunakan, dan tidak akan menimbulkan masalah dengan plugin Anda yang lain. Saat ditambahkan ke salah satu Tema WordPress Premium WP Engine, Weglot membantu pemilik situs membangun situs responsif seluler yang ramah SEO yang dapat diakses dalam bahasa apa pun.

Lihat panduan ini untuk mengetahui lebih lanjut, dan kunjungi WP Engine untuk mempelajari berbagai paket kami serta fitur dan fungsi lain yang disertakan dengan Platform Pengalaman Digital untuk WordPress kami.

Daya Tanggap Seluler untuk SEO

Sederhananya, situs web ramah seluler dihargai oleh Google dalam hasil penelusuran organik. Antara 2015 dan 2016, sejumlah pembaruan ditambahkan ke algoritme peringkat untuk mendukung situs web yang responsif. Penting untuk dicatat bahwa karena kecepatan memainkan peran besar dalam keramahan pengguna untuk pengguna seluler, ini juga berkontribusi pada peringkat mesin pencari yang lebih baik.

Tentu saja, situs web responsif yang memuat cepat mengandalkan hosting bintang untuk berhasil. Saat Anda memilih perusahaan hosting yang berkualitas seperti WP Engine (kami menawarkan PHP 7 sebagai standar dan Jaringan Pengiriman Konten gratis pada paket tingkat yang lebih tinggi), Anda akan melihat waktu pemuatan yang lebih cepat dan pengoperasian yang lebih lancar.

Bangun Secara Responsif Dengan WP Engine

Bekerja menuju situs web yang responsif harus menjadi prioritas di dunia kita yang bergantung pada seluler. Ada banyak hal yang harus diperhatikan, tetapi di WP Engine kami dapat membantu mengarahkan Anda ke sumber daya pengembang WordPress terbaik dan tema yang sangat responsif untuk pengguna seluler.

Selain itu, kami memiliki berbagai paket dan solusi untuk situs web Anda. Kami akan membantu Anda membangun secara responsif di platform pengalaman digital kami, dan Anda tidak perlu khawatir kehilangan pengunjung karena ukuran layar!