Tutorial Desain Web Responsif Untuk Pemula

Oleh:   Unknown Unknown   |   September 17, 2017
Membangun situs yang responsif sangat penting untuk sukses secara online di dunia digital saat ini. Sejak tahun 2015, perangkat seluler digunakan untuk mengakses Internet lebih sering daripada unit desktop. Akibatnya, situs harus bisa mengakomodasi ukuran layar yang lebih kecil dan mengurangi daya bandwidth. Ini berarti sebuah website harus cepat dan efisien.
Tutorial Desain Web Responsif Untuk Pemula

Untungnya, tidak sulit untuk membuat situs web yang responsif, terutama jika pengembang menggunakan hosting WordPress . Platform ini secara otomatis menyesuaikan gambar situs untuk teknologi seluler tanpa tambahan pekerjaan. Namun, dibutuhkan lebih dari sekedar penampilan responsif agar terlihat bagus pada perangkat mobile.

Berikut adalah lima langkah untuk membuat situs web yang mobile-friendly untuk melibatkan pemirsa terlepas dari perangkat apa yang mereka gunakan.

Langkah 1: Memilih Penyedia Hosting WordPress yang Tepat

Meskipun hosting tidak memainkan peran yang terlalu dramatis dalam desain responsif , namun tetap penting saat mempertimbangkan kecepatan. Salah satu masalah terbesar yang dimiliki pemilik situs adalah kurangnya daya dalam hal akses mobile. Misalnya, penelitian menunjukkan bahwa kebanyakan orang meninggalkan situs web jika membutuhkan waktu lebih lama dari beberapa detik untuk dimuat.

Ini semua tentang kepuasan instan.

Sementara desain situs itu sendiri membutuhkan tata letak yang responsif, kemampuan server yang tersimpan di dalamnya akan menjadi penting. Beberapa hal yang perlu dipertimbangkan meliputi:

  • Host web yang mendukung jaringan pengiriman konten.
  • Server yang dioptimalkan untuk kecepatan dan efisiensi.
  • Spesifikasi perangkat keras terbaru di pusat data.
  • Perangkat lunak yang diperbarui seperti PHP untuk efisiensi.

Perlu diingat juga bahwa beberapa rencana hosting bisa meningkatkan kecepatan dan performa juga. Misalnya, server bersama memiliki potensi untuk menjadi jauh lebih lambat daripada VPS atau platform khusus. Sayangnya, ini juga lebih mahal untuk dipelihara. Semuanya bermuara pada seberapa banyak pemilik situs ingin berinvestasi di situs web.

Langkah 2: Menggunakan WordPress untuk Power the Site

WordPress adalah platform yang sangat baik ketika harus membangun sebuah website dengan cepat. Yang membuatnya begitu penting untuk desain responsif adalah sistem secara otomatis akan menyesuaikan gambar untuk teknologi mobile. Intinya, ia tahu kapan seseorang menggunakan smartphone atau monitor layar lebar 22 inci.

Respons otomatis ini merupakan fitur yang relatif baru yang bekerja dengan sangat baik. Bahkan jika grafisnya tidak dioptimalkan untuk penggunaan mobile, WordPress akan mengakomodasi.

Sebagian besar penyedia web hosting memiliki sistem otomatis yang bisa menginstal WordPress secara otomatis. Sebagai contoh, cPanel adalah salah satu platform yang paling banyak digunakan untuk web hosting. Bisa juga alat rumah tangga seperti Softaculous dan Quick Install. Kedua aplikasi ini mampu dengan cepat menginstal WordPress.

Jika tidak satu pun dari aplikasi ini adalah pilihan, pengembang dapat mendownload WordPress secara gratis dan mengunggahnya ke server hosting. Meskipun butuh sedikit usaha untuk menginstal dengan cara ini, WordPress menawarkan antarmuka yang mudah digunakan yang dapat digunakan siapa saja.

Langkah 3: Menemukan Tema yang Tepat

Meskipun WordPress melakukan pekerjaan yang baik dengan citra responsif otomatis, tema yang tepat bisa berjalan jauh. Semakin efisien website ini secara keseluruhan, semakin baik performanya di search engine. Tema yang tepat dapat membuat semua perbedaan saat melibatkan pemirsa pada perangkat apa pun.

Untuk menemukan tema yang bagus:

  • Pergi ke area tampilan dashboard WordPress.
  • Tema harus menjadi hal pertama yang muncul. Jika tidak, klik alat "Tema" di bawah tampilan.
  • Klik tombol "Add New" di bagian atas dan cari tema baru. Menggunakan istilah seperti "responsif" dalam pencarian akan menarik sejumlah besar tata letak untuk dipilih.

CATATAN: Lebih aman mengasumsikan bahwa tema yang baru ditambahkan akan dirancang untuk responsif.

  • Pasang dan aktifkan tema.
  • Klik "Customize" untuk melakukan perubahan. WordPress sekarang menyertakan contoh preview seperti apa situs ini di berbagai perangkat. Gunakan ini untuk melihat apakah tata letak sesuai dengan tujuan situs.
  • Setelah perubahan dilakukan, klik tombol "Save" di kiri atas dan kemudian klik "X" di pojok atas untuk kembali ke panel admin.

Langkah 4: Plugin untuk Mempercepat Situs

Tema responsif bukanlah satu-satunya cara sebuah situs web efisien untuk semua perangkat. Menambahkan plugin adalah salah satu fitur terbaik WordPress, dan ada banyak alat untuk meningkatkan kecepatan. Menambahkan salah satu dari ini berpotensi untuk sangat meningkatkan daya tarik situs dari manusia dan mesin pencari.

W3 Total Cache
W3 Total Cache adalah cara terbaik untuk meningkatkan kecepatan komputer tradisional dan perangkat seluler. Ini juga bekerja dengan baik dengan jaringan pengiriman konten, yang mungkin sangat meningkatkan kinerja.

a3 malas beban
Pembebanan malas adalah proses di mana gambar diimpor ke browser hanya saat dibutuhkan. Ini dapat secara drastis mengurangi waktu akses sebuah situs web. Plugin az Lazy Load mungkin merupakan salah satu pilihan yang lebih baik untuk komputer dan perangkat mobile untuk proses ini.

Menu Responsif
Banyak situs memiliki menu yang luas yang tidak terlihat menarik di smartphone dan tablet. Plugin Menu Responsif mengecilkan semua perintah tersebut menjadi tombol yang mudah digunakan untuk situs web.

Langkah 5: Optimalkan Gambar Anda

Meskipun versi WordPress yang lebih baru akan secara otomatis menambahkan elemen responsif ke citra, mengoptimalkannya secara manual juga akan membuat perbedaan besar dalam aksesibilitas. Misalnya, tidak ada kebutuhan untuk gambar piksel lebar 3000 saat akan digunakan pada 300.

Bahkan jika gambar diubah ukurannya, browser masih mendownloadnya secara keseluruhan. Itu berarti seluruh lebar gambar 3000 piksel sedang diakses meski menyusut hingga 30 piksel.

Untungnya, WordPress secara otomatis akan membuat gambar yang dioptimalkan saat ada yang ditambahkan sebagai fitur. Namun, ini tidak mempengaruhi grafis lain yang ditambahkan di tengah konten.

Menggunakan editor gambar seperti Pixlr untuk mengubah ukuran grafis sebelum menambahkannya ke situs mengurangi waktu yang dibutuhkan sistem untuk dirender. Ini meningkatkan kecepatan untuk semua perangkat yang menggunakan Internet dan akan mempengaruhi SEO.

Kesimpulannya…
WordPress hosting memungkinkan pemilik situs web untuk membangun tata letak yang responsif tanpa berinvestasi di pemrogram atau menyiapkan situs sekunder untuk perangkat seluler. Ini adalah cara untuk menyederhanakan proses dan memberikan pengalaman yang sangat baik terlepas dari teknologi yang digunakan pengunjung. Jelajahi potensi WordPress dan lihat apa yang bisa dilakukan untuk melibatkan pengunjung.

Tampilkan Komentar