RWD: WordPress boleh melakukan lebih daripada sekadar reka bentuk

Sebagai pembangun web, hampir setiap pelanggan yang bekerjasama dengan kami mahu tapak web mereka mempunyai versi mudah alih tapak web mereka. Memandangkan saiz dan resolusi skrin semakin berubah-ubah, adalah mustahil atau sekurang-kurangnya tidak praktikal untuk mereka bentuk tapak web untuk setiap peranti dan resolusi skrin di luar sana.

Dalam siaran ini, kami akan bermula pada tahap asas dengan terlebih dahulu mentakrifkan apa itu reka bentuk web responsif, mengapa ia penting, dan beberapa pertimbangan ringkas yang mesti diambil kira semasa sumbang saran tapak web WordPress responsif.

Apakah reka bentuk web responsif?

Wikipedia mentakrifkan RWD sebagai:

Pendekatan reka bentuk web bertujuan untuk mencipta tapak web yang memberikan pengalaman tontonan terbaik pada pelbagai peranti, daripada telefon mudah alih ke monitor komputer meja, dan mudah dibaca dan dinavigasi dengan saiz semula, panning dan penatalan yang minimum.

Reka bentuk web responsif melibatkan aplikasi pertanyaan media CSS dan gabungan grid dan reka letak yang fleksibel. Saya pasti anda pernah mendengar tentang rangka kerja CSS seperti Bootstrap, Foundation, dsb. Mereka semua menggunakan pertanyaan media untuk susun atur bercampur untuk memaparkan halaman berdasarkan saiz skrin, platform dan orientasi.

Sebagai contoh, apabila menggunakan Bootstrap, anda boleh menjadikan projek anda responsif dengan hanya memasukkan baris kod berikut pada teg 标记上插入以下代码行即可使您的项目具有响应能力

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

在 Bootstrap 中，媒体查询允许基于多种条件（比率、宽度、显示类型）自定义 CSS，但通常侧重于 min-width 和 max-width rrreee

Dalam Bootstrap, pertanyaan media membenarkan menyesuaikan CSS berdasarkan pelbagai keadaan (nisbah, lebar, jenis paparan), tetapi biasanya menumpukan pada min-width dan lebar maks kepada

Ubah saiz tajuk dan teks kepada peranti yang lebih muat
Timbunan elemen dan bukannya terapung apabila perlu
Ubah suai lebar grid

Berhati-hati dengan keseluruhan siri praktikal yang didedikasikan untuk mengajar cara membina reka bentuk web responsif menggunakan rangka kerja khusus ini

Mengapa RWD penting?

Setakat ini dalam perbincangan kami, kami telah menetapkan bahawa ciri penting tapak web responsif ialah keupayaan tapak web untuk menyesuaikan diri dengan mana-mana saiz atau orientasi skrin apabila pengguna melihatnya. Selain itu, terdapat sebab hebat lain mengapa anda perlu beralih kepada tapak web responsif

Penggunaan peranti mudah alih meningkat

Pada masa kini, agak ramai orang mempunyai akses kepada telefon bimbit. Ini bermakna ramai daripada mereka mengakses internet melalui telefon mereka. Statistik menunjukkan bahawa hampir 20% carian Google hari ini datang daripada telefon mudah alih - yang sepatutnya memberitahu anda betapa pentingnya bagi pengguna untuk dapat mengakses dan berinteraksi dengan mudah dengan tapak web anda.

Dengan penggunaan internet mudah alih yang mengatasi statistik penggunaan desktop, kami perlu memastikan bahawa pengguna boleh mengenal pasti tapak web kami tidak kira apa peranti yang mereka gunakan tanpa berasa seperti mereka mengakses versi tapak web utama yang berbeza atau terhad.

Meningkatkan kadar penukaran dengan ketara

Kadar penukaran ialah salah satu istilah yang paling biasa digunakan dalam kalangan tapak web e-dagang dan merujuk kepada seberapa baik anda menukar pelawat web biasa kepada pelanggan yang membayar. Dalam kes klasik penyelesaian e-dagang, fikirkan tentang bilangan orang yang membeli-belah menggunakan telefon mudah alih mereka.

Jika rata-rata pengguna web terpaksa menggunakan versi desktop tapak web anda untuk pembayaran mudah, mereka kemungkinan besar akan memilih untuk menggunakan kaedah lain untuk membeli produk yang sama. Dengan tapak web responsif yang direka bentuk dengan baik, pengguna tidak sepatutnya melihat apa-apa perbezaan selain daripada menggunakan skrin yang lebih kecil semasa menjalankan transaksi di tapak web anda.

Tingkatkan kedudukan enjin carian

Enjin carian seperti Google secara terbuka mempromosikan reka bentuk web responsif atas pelbagai sebab:

Adalah lebih mudah untuk merangkak tapak web responsif, mengindeksnya dan menyusun kandungan tapak web dengan cara yang lebih mudah. Ini kerana tapak web responsif menggunakan hanya satu URL merentas semua platform, dan bukannya mempunyai versi berbeza tapak web yang sama pada URL yang berbeza.
Pengalaman pengguna boleh dinilai dengan mudah dengan melihat kadar lantunan tapak web anda. Tapak web dengan kadar lantunan yang rendah bermakna pengguna akan kekal di tapak untuk seketika, menghasilkan kedudukan carian yang lebih tinggi.

Kos Berkesan

Menjalankan berbilang tapak web untuk kandungan yang sama boleh menjadi mahal, memerlukan anda menggandakan sumber untuk mengekalkan kedua-dua tapak. Mempunyai tapak web responsif adalah lebih mudah kerana anda akan dapat melaburkan semua sumber dan masa anda untuk memenuhi jangkaan sebenar pengguna anda.

Nota tentang Tapak Web WordPress Responsif

Terdapat banyak faktor yang mesti dipertimbangkan sebelum menghasilkan reka bentuk web responsif dalam WordPress. Malah, WordPress kini digunakan untuk membina blog, tapak web, dan juga aplikasi, yang semuanya mungkin memerlukan pelaksanaan yang responsif.

Dalam artikel seterusnya, kita akan melihat strategi pelaksanaan tentang cara untuk mencapai ini dalam pembangunan WordPress. Secara khusus, kami akan memperkenalkan

Prestasi
Konteks
Tingkatkan secara beransur-ansur

Memahami ketiga-tiga faktor utama ini memerlukan analisis yang mendalam untuk menunjukkan sebab reka bentuk responsif bukan sekadar reka bentuk, dan dengan tepat peranan yang dimainkan oleh WordPress di dalamnya.

Ringkasan

Dalam artikel ini, kami memperkenalkan secara ringkas konsep reka bentuk web responsif, mentakrifkan apa itu, mengapa ia penting dan mengapa kami harus mempertimbangkannya dalam projek akan datang. 🎜

Sila tinggalkan sebarang pertanyaan atau komen di bawah!

Atas ialah kandungan terperinci RWD: WordPress boleh melakukan lebih daripada sekadar reka bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!