Cara Membuat Situs WordPress Responsif Seluler Pertama

Kali ini kami akan memandu Anda melalui cara membuat situs WordPress responsif apa pun untuk seluler terlebih dahulu dan mengapa Anda perlu melakukannya.

Dengan pertumbuhan besar-besaran perangkat seluler dan perangkat genggam lainnya, serta game, aplikasi, platform media sosial, dll., desain web responsif telah menjadi sesuatu yang perlu dan bukan kemewahan agar situs Anda menonjol di antara yang lain.

Lewatlah sudah hari-hari ketika desain responsif atau ramah seluler dianggap sebagai kualitas premium yang relevan dengan situs web yang dikembangkan dengan baik dan mahal secara eksklusif.

Saat ini, repositori template WordPress kaya akan tema-tema seperti itu: gratis dan premium. Semua template yang dibuat oleh kami di SKT Themes juga memiliki kualitas yang sama sehingga memungkinkan sisi mana pun yang berdasarkannya untuk ditampilkan secara akurat di berbagai ponsel dan platform.

Jadi, jika desain responsif atau ramah seluler digunakan secara luas dan tampaknya berfungsi dengan lancar, apa gunanya mencoba membuat situs WordPress responsif seluler terlebih dahulu dan apa manfaatnya?

Untuk memperjelas semuanya, mari kita bahas poin-poin tertentu satu demi satu sehingga Anda dapat melihat perbedaan antara kedua pendekatan desain tersebut.

Apa itu desain web responsif?

Singkatnya, desain web responsif adalah teknik modern untuk membuat situs web yang cocok untuk bekerja dengan baik di setiap perangkat dan cocok dengan resolusi layar apa pun. Ini berarti bahwa Anda tidak berkewajiban untuk membuat versi seluler terpisah dari situs Anda untuk memenuhi kebutuhan pengguna seluler Anda saat bepergian atau bepergian. Desain responsif situs Anda akan secara otomatis menyesuaikan dan mengakomodasi perangkat seluler atau perangkat apa pun untuk tampilan dan nuansa situs yang sempurna.
Dengan jutaan orang di seluruh dunia menggunakan Internet seluler dan menghabiskan berjam-jam di sana, memiliki situs web yang responsif dan kompatibel lintas seluler adalah suatu keharusan.

Apa itu desain pertama seluler?

Pada dasarnya, mobile first adalah pendekatan yang digunakan dalam desain web modern dan menyiratkan desain untuk layar ponsel terlebih dahulu, dan kemudian diteruskan ke pengembangan layar, browser, dan resolusi lainnya.

Agar Anda memahami perbedaan antara pendekatan desain responsif dan mobile first, izinkan kami menyatakan bahwa desain responsif dimulai dengan semua jenis kerumitan yang diperlukan untuk kinerja desktop yang sempurna dan kemudian memecahnya untuk ponsel dan perangkat yang lebih kecil.

Sedangkan untuk desain mobile first, disarankan agar desain responsif untuk ponsel dan perangkat yang lebih kecil harus dilakukan terlebih dahulu.

Mengapa Anda perlu membuat situs WordPress responsif apa pun untuk seluler terlebih dahulu?

Ingin tahu mengapa Anda perlu memulai proyek dengan pertimbangan seluler atau membuat situs WordPress responsif apa pun untuk seluler terlebih dahulu? Mari kita lihat statistik untuk konsumsi seluler.

Jika Anda tidak menebak sejauh ini, cukup cari di Internet untuk persentase dan laporan yang tepat yang membuktikan prevalensi pengguna internet seluler yang tidak ada duanya dibandingkan pengguna desktop.

Saat ini, orang menghabiskan lebih banyak waktu menjelajahi Internet untuk mendapatkan informasi yang diperlukan dari ponsel dan perangkat. Dan, tentu saja, peralihan dari penggunaan desktop ke seluler ini akan terus berlanjut dalam waktu dekat.

Jadi, Anda tidak ingin mengecewakan sebagian besar pengunjung situs web Anda dan membuat sebagian kecil pengguna desktop merasa nyaman di situs Anda, bukan?

Selain itu, setelah Anda mengadopsi praktik pendekatan mobile first, Anda akan melihat bahwa Anda akan lebih sedikit mengotori tangan Anda dan akan dapat merancang desain web yang lebih akurat dan ringkas yang akan lebih mudah untuk dikembangkan bersama-sama.

Memastikan piksel cocok dengan layar yang lebih kecil terlebih dahulu dan kemudian merawat layar desktop dapat menjadi cara terbaik untuk meningkatkan kinerja seluler situs Anda dan lingkungan pengguna yang lebih baik untuk pelanggan bersenjata seluler Anda.

Bagaimana cara membuat situs WordPress responsif apa pun menjadi seluler terlebih dahulu?

Jika situs Anda sudah responsif dan Anda ingin mengubahnya menjadi seluler terlebih dahulu, ada 2 langkah dasar yang harus diikuti. Pertama-tama, Anda perlu menulis dan membuat gaya default untuk layar kecil.

Kemudian, Anda perlu menambahkan kueri media saat menggunakan min-width dan menyalin gaya default template responsif Anda ke sana.

Berdasarkan tata letak situs Anda, gaya tata letak dapat berupa:

tajuk,
.utama,
catatan kaki {
  lebar: 96%;
  lebar maksimum: 1000 piksel;
  margin: 10px otomatis;
  jelas: keduanya;
}
.isi {
  lebar: 60%;
  margin-kanan: 5%;
  mengapung: kiri;
}
.bilah samping {
  lebar: 35%;
  mengapung: benar;
}

Dan karena situs Anda responsif, gaya ini juga harus menyertakan kueri media untuk layar yang lebih kecil:

@media screen dan ( max-width: 500px ) {

  tajuk,
  .utama,
  catatan kaki,
  .isi,
  .bilah samping {
    lebar: 98%;
  }
  
  .isi,
  .bilah samping {
    mengapung: tidak ada;
    margin: 0 otomatis;
  }

}

Seperti yang Anda lihat, ada dua blok: satu untuk desktop dan satu untuk seluler.
Untuk menggantinya dengan ponsel terlebih dahulu, hapus keduanya dan mulai dengan tata letak yang menentukan untuk layar kecil:

tajuk,
.utama,
catatan kaki {
  margin: 10 piksel 1%;
}

Sekarang, saatnya membuat kueri media menggunakan min-width.

@media screen dan ( min-width: 500px ) {

  tajuk,
  .utama,
  catatan kaki {
    lebar: 96%;
    lebar maksimum: 1000 piksel;
    margin: 10px otomatis;
    jelas: keduanya;
  }
 
  .isi {
    lebar: 60%;
    margin-kanan: 5%;
    mengapung: kiri;
  }
  .bilah samping {
    lebar: 35%;
    mengapung: benar;
  }
  
}

Seperti yang Anda lihat, pada dasarnya adalah gaya yang sama dengan yang Anda miliki di lembar gaya responsif situs Anda. Namun, penulisan ulang dan penataan ulang gaya ini berkaitan dengan kinerja seluler yang lebih baik karena perangkat yang lebih kecil sekarang akan mengabaikannya alih-alih melewatinya dan kemudian menabraknya dengan elemen yang telah ditambahkan ke kueri media responsif.

Secara teoritis, kami selesai dengan beralih ke desain seluler pertama. Dalam kasus tertentu, Anda mungkin memerlukan penyesuaian dan konfigurasi tambahan agar semuanya berjalan lancar.

Namun, seluruh proses menjadikan situs WordPress Anda seluler terlebih dahulu tidak akan menjadi jalan yang tidak dapat dilalui untuk Anda, bahkan jika Anda bukan seorang desainer atau pengembang web berpengalaman.