Reka bentuk web responsif: menyesuaikan diri dengan semua skrin

Reka Bentuk Web Responsif (RWD) adalah kaedah reka bentuk yang membolehkan laman web menyesuaikan diri dengan skrin semua saiz dan penting untuk menyokong peningkatan bilangan peranti untuk melayari laman web.

RWD mengikuti prinsip pembangunan "Jangan Ulangi Diri" (Kering) dan bertujuan untuk menggunakan satu set kod agar sesuai dengan setiap peranti. Ini bermakna menulis satu set kod HTML, CSS, dan JavaScript dan memaparkan elemen dengan sewajarnya untuk setiap platform.

Memori RWD mempunyai pelbagai konsep reka bentuk yang berbeza, termasuk peningkatan progresif, penurunan yang elegan, dan keutamaan mudah alih. Pendekatan ini memberi tumpuan kepada aspek yang berbeza, seperti menyediakan kandungan kepada semua pengguna, bermula dengan versi penuh laman web, atau bermula dengan peranti yang disokong terkecil atau paling tidak berkuasa.

Reka bentuk responsif adalah penting untuk SEO kerana ia membolehkan laman web untuk menyediakan pengalaman pengguna yang baik merentasi pelbagai peranti dan saiz skrin, menjadikannya lebih mudah bagi Google untuk memahami dan mengindeks kandungan. Ini akan menghasilkan masa akses laman web yang lebih lama dan kadar penukaran yang lebih tinggi.

dari satu skrin ke era multi-skrin

Pada masa lalu, reka bentuk laman web adalah mudah: merancang laman web atau aplikasi untuk monitor 15 inci telah dilakukan sebagai tambahan kepada isu keserasian antara pelayar.

Kemudian, telefon dengan penyemak imbas web muncul, mengganggu kehidupan santai kami. Paling teruk, orang suka melayari web di telefon mereka! Pada tahun 2016, pandangan web pada peranti mudah alih melebihi pandangan desktop untuk kali pertama.

Hanya apabila pemaju dan pereka digunakan untuk membina laman web untuk organisasi mudah alih, tablet, jam tangan, TV, kereta, gelas, skrin desktop yang lebih besar, skrin resolusi tinggi, dan juga pelayar web yang dibina ke dalam dinding. (Baiklah, yang terakhir saya buat.) Menyokong ini seolah -olah aliran peranti baru yang tidak berkesudahan menjadi semakin mencabar.

Jadi, bagaimanakah kita menyokong pelbagai peranti ini? Jawapannya ialah

reka bentuk web responsif , yang menggunakan teknologi yang membolehkan laman web menyesuaikan diri dengan skrin semua saiz.

Banyak laman web atau projek yang lebih lama yang dikendalikan oleh kakitangan yang terhad tidak responsif. Sebagai contoh, laman web enjin permainan vassal:

Banyak laman web lain, seperti sitepoint.com, benar -benar responsif:

Reka Bentuk Web Responsif (RWD) mengikuti prinsip pembangunan popular "Jangan Ulangi Diri" (biasanya disingkat sebagai "kering"). Daripada mengekalkan asas kod berganda untuk setiap peranti yang disokong, RWD direka untuk menggunakan satu set kod agar sesuai dengan setiap peranti. Menggunakan teknologi RWD, anda boleh menulis satu set kod HTML, CSS, dan JavaScript dan memaparkan elemen dengan sewajarnya untuk setiap platform. Kebanyakan gaya dan elemen ini juga boleh digunakan semula atau dibina untuk memaksimumkan kecekapan kod.

terdengar baik, bukan? Pertama, mari kita lihat kembali beberapa tahun yang lalu.

Sejarah Reka Bentuk Responsif

Reka bentuk "responsif" bukanlah sesuatu yang baru dan mempunyai makna yang berbeza untuk orang yang berbeza, jadi sukar untuk mengesan sejarahnya yang tepat.

Secara teori, pemaju telah mencipta reka bentuk responsif sejak beberapa penyemak imbas wujud. Selalunya terdapat perbezaan yang halus (dan kurang halus) antara pelayar, dan pemaju telah belajar bagaimana menangani isu -isu ini selama beberapa dekad. Jika anda baru dalam pembangunan web, terima kasih atas dominasi versi awal Internet Explorer kebanyakannya berakhir. Hari -hari untuk menangani masalah mereka adalah gelap.

Sejak tahun 2004, reka bentuk responsif telah menggunakan makna yang lebih spesifik, iaitu, menyesuaikan reka bentuk anda untuk memenuhi pilihan peranti pengguna -biasanya berdasarkan saiz skrin, tetapi juga termasuk ciri -ciri lain. Konsep reka bentuk responsif telah disatukan pada tahun 2008, tetapi istilah itu juga dipanggil "fleksibel," "cecair," "cecair" dan reka bentuk "elastik".

Ia adalah spesifikasi CSS3 yang merangkumi pertanyaan media yang membolehkan reka bentuk responsif mempunyai potensi untuk menjadi konsep yang benar -benar dan mudah digunakan. Kami akan merangkumi pertanyaan media secara terperinci dalam Bab 2, tetapi secara ringkas, mereka membolehkan anda mengubah apa yang dipaparkan dalam laman web berdasarkan saiz atau jenis skrin yang telah ditetapkan. Ethan Marcotte secara rasmi mencipta istilah "reka bentuk web responsif" dalam artikel 2010 untuk senarai selain.

Ini telah membawa kepada pertumbuhan dan integrasi pertanyaan media dan teknologi dan teknologi lain, seperti imej dan grid yang fleksibel, yang akan kami sampaikan dalam buku ini.

Bagi saya, "reka bentuk responsif" adalah gabungan semua idea dan prinsip ini. Ia bukan sahaja menyesuaikan reka bentuk ke saiz skrin, tetapi juga kepada faktor lain seperti kedalaman warna, jenis media (seperti skrin komputer riba atau e-pembaca), atau lokasi.

Konsep reka bentuk dalam reka bentuk responsif

Semua jenis konsep reka bentuk wujud sebagai banyak penjelasan untuk menggunakan reka bentuk responsif. Ada yang muncul dan hilang, sementara yang lain kekal. Kami tidak akan menerangkan mana -mana daripada mereka secara terperinci dalam manual ini, tetapi kami akan menyentuh aplikasi praktikal mereka. Sekarang mari kita cepat memperkenalkan beberapa daripada mereka.

Peningkatan Progresif

Apabila mengikuti prinsip -prinsip yang lebih tradisional peningkatan progresif, tumpuan utama anda adalah untuk menjadikan kandungan laman web tersedia untuk semua pengguna, tidak kira betapa mudahnya peranti mereka atau bagaimana lambat sambungannya. Kemudian, ciri -ciri tambahan, seperti reka bentuk dan ciri yang lebih kompleks, ditambah kepada peranti yang boleh memanfaatkannya.

Downgrade elegan

Lonjakan dalam pelayaran mudah alih telah menumbangkan jalan yang lebih tradisional ke reka bentuk laman web. Pada masa lalu, anda mula merancang pada platform yang anda kerjakan (biasanya komputer) dan kemudian dilucutkan gaya dan ciri untuk menyokong peranti dengan skrin yang lebih kecil atau kurang menyokong ciri -ciri tertentu.

Walaupun downgrade elegan sering digunakan untuk situasi di mana pelayar tidak mempunyai sokongan untuk ciri -ciri tertentu, anda juga boleh menganggapnya lebih umum. Prinsipnya ialah anda bermula dengan versi penuh laman web dan dijalankan pada peranti ideal dan penyemak imbas anda sambil memastikan bahawa fungsi asas berfungsi dengan baik untuk mana -mana pengguna (disokong) pada mana -mana peranti, walaupun mereka terlepas ciri yang bagus.

Mobile-First

Keutamaan mudah alih adalah serupa dengan peningkatan progresif, tetapi lebih khusus bertujuan untuk reka bentuk responsif. Ia mengesyorkan bahawa anda bermula dengan peranti yang disokong terkecil atau paling tidak berkuasa (biasanya telefon apabila anda membuat prinsip) dan kemudian menambah ciri dan gaya apabila saiz peranti meningkat.

Sebagai istilah, "mudah alih pertama" boleh mengelirukan, terutamanya untuk penonton bukan pereka/pemaju, ia boleh mewujudkan kesan berat sebelah keutamaan peranti mudah alih dalam projek.

secara teorinya, amalan ini memastikan bahawa peranti yang lebih kecil tidak berakhir dengan pengalaman suboptimal -semua peranti bernilai sama.

Apa yang anda perlukan untuk menyokong?

Pastikan anda mengetahui sama ada ia berbaloi dan menilai semua asas pengguna kerja keras (potensi) anda sebelum memulakan atau meningkatkan mana-mana projek berasaskan web.

Jika anda mempunyai laman web yang sedia ada, ia mungkin bernilai menganalisis trafik laman web untuk melihat jenis peranti yang digunakan oleh pelawat anda untuk melawat laman web anda. Jika 90% pelawat sentiasa melawat di desktop, ini bermakna pengalaman mudah alih anda adalah miskin atau pelawat anda bukan pengguna peranti mudah alih yang besar. Anda boleh melakukan penyelidikan yang luas untuk mengetahui jawapan yang tepat, atau hanya menggunakan teknik reka bentuk responsif untuk membina laman web mesra mudah alih yang mungkin menarik pelawat baru.

Jika anda sedang menjalankan projek baru, adalah sama pentingnya untuk menganalisis keperluan pengguna yang berpotensi. Ini boleh dilakukan dengan menggunakan teknik penyelidikan pasaran tradisional, mewujudkan laman web ujian mudah, atau melihat pesaing untuk memahami siapa pelanggan anda.

komputer

Walaupun penurunan jualan yang perlahan, masih terdapat banyak desktop dan komputer riba, serta banyak pelayar web yang berjalan di komputer ini. Komputer ini berkisar dari netbook 11-inci yang berkualiti rendah (dan rendah) ke desktop berprestasi tinggi dengan paparan resolusi tinggi 28 inci, dengan pelbagai perkadaran dan orientasi, yang semuanya boleh menjejaskan kawasan skrin anda ada.

Mobile

Sekarang, bilangan orang melayari laman web pada telefon bimbit mereka adalah seperti pandangan desktop, jadi sama (dan mungkin semakin) penting untuk melayani pengguna pelayar mudah alih. Untuk maklumat lanjut mengenai pertumbuhan pandangan web mudah alih, saya cadangkan anda menyemak laporan Smart Insights mengenai statistik pemasaran mudah alih dan perbandingan desktop dan penggunaan mudah alih untuk StatCounter.

Pada iOS, pelayaran mudah alih biasanya dilakukan hanya melalui satu penyemak imbas, dan peranti lebih konsisten.

Android menawarkan pelbagai jenis penyemak imbas dan saiz skrin. Bilangan peranti yang menjalankan sistem operasi mudah alih juga semakin meningkat, dan mereka juga mempunyai skrin berkepadatan tinggi di pelbagai resolusi.

anda juga perlu mempertimbangkan bahawa pengguna terutamanya menggunakan peranti sentuh dan bukannya mengklik peranti untuk melayari, yang sangat mempengaruhi tingkah laku.

tablet pc

Jualan tablet mungkin merosot, tetapi masih ada pangkalan pengguna yang besar untuk masa depan yang dijangka dan anda tidak boleh memikirkan tablet sebagai telefon besar atau desktop kecil. Di samping itu, pengguna mungkin menggunakan skrin sentuh atau tetikus untuk berinteraksi dengan laman web anda.

Peralatan campuran

Jika mengendalikan komputer dan tablet tidak mencukupi, kini terdapat peranti hibrid, seperti Surface Pro Microsoft, yang boleh beralih antara komputer dan tablet. Walaupun setiap mod boleh dikendalikan secara berasingan, perlu diperhatikan bahawa pengguna boleh menukar konteks apabila menggunakan laman web anda.

Peranti yang boleh dipakai

Peranti yang paling boleh dipakai belum lagi memperoleh pelayar web, tetapi ini boleh berlaku. Sementara itu, beberapa kandungan masih boleh ditarik balik pada peranti yang boleh dipakai, dan kandungan ini perlu disediakan dalam pecah ringkas dengan susulan yang mudah.

tv

Peranti yang berkaitan seperti TV pintar dan Apple TV datang dengan pelayar web yang mudah digunakan pengguna untuk melayari laman web tertentu, tetapi mereka mungkin menjadi semakin popular. TV mempunyai skrin yang sangat besar dan biasanya rendah dalam resolusi, jadi laman web yang anda lihat di TV perlu cukup jelas dan boleh digunakan jarak jauh.

CAR

betul -betul? Ya, betul -betul. Ini adalah medan baru, tetapi semakin banyak kereta kini dilengkapi dengan beberapa bentuk papan pemuka yang berkaitan dengan Internet. Pada masa ini, laman web yang dibentangkan di papan pemuka kenderaan perlu memaparkan maklumat dengan jelas pada skrin kecil dan tidak direka untuk mengalihkan perhatian atau mengatasi perhatian pemandu, mengakibatkan kemalangan. Walau bagaimanapun, banyak kereta kini mempunyai skrin untuk penumpang, yang memberikan lebih banyak akses penuh ke rangkaian dan kandungan.

Konsol Permainan

Konsol permainan yang paling moden meluangkan sedikit masa menyambung ke Internet, yang sebahagiannya menggunakan pelayar web. Ini sering digunakan dalam penggunaan media dan rangkaian sosial. Pelayar pada peranti ini mungkin terhad dan mungkin tidak dapat menggunakan papan kekunci fizikal. Untuk konsol permainan rumah, prinsip reka bentuk TV akan digunakan, dan untuk peranti pegang tangan, pengalaman mudah alih yang terhad akan digunakan.

semua dalam semua, anda tidak boleh meramalkan di mana dan bagaimana sesiapa akan melihat laman web anda, jadi membinanya sebagai disesuaikan, fleksibel dan responsif.

cetak

cetak? Bukankah ini buku reka bentuk web? Ya, tetapi versi bercetak laman web anda masih akan diakses dengan kerap, sama ada cetakan fizikal sebenar atau memberikan kandungan anda pada pembaca luar talian seperti Instapaper atau Pocket. Bagi sesetengah kandungan, "Percetakan" masih relevan.

(Kandungan berikut ditinggalkan kerana artikel terlalu panjang dan mempunyai korelasi yang lemah dengan kandungan teras reka bentuk web yang responsif. Sesetengah kandungan boleh dikekalkan secara selektif atau diterjemahkan seperti yang diperlukan)

[

Atas ialah kandungan terperinci Makna dan tujuan reka bentuk web responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!