Apa itu Reka Bentuk Responsif? (Penjelasan Video dan Infografik)

reka bentuk web responsif

Ia mengambil masa sedekad untuk reka bentuk web responsif (RWD) untuk pergi arus perdana sejak Cameron Adams pertama kali diperkenalkan konsep itu. Ideanya bijak - mengapa kita tidak dapat merancang laman web yang menyesuaikan dengan ruang pandang peranti yang dilihatnya?

Apa itu Reka Bentuk Responsif?

Reka bentuk web responsif (RWD) adalah pendekatan reka bentuk web yang bertujuan untuk membuat laman web untuk memberikan pengalaman tontonan yang optimum - membaca dan navigasi yang mudah dengan pengubahsuaian, panning, dan tatal minimum - di pelbagai jenis peranti (dari telefon bimbit hingga komputer desktop monitor). Sebuah laman web yang dirancang dengan RWD menyesuaikan tata letak ke lingkungan tontonan dengan menggunakan cairan, grid berdasarkan perkadaran, gambar fleksibel, dan pertanyaan media CSS3, lanjutan dari peraturan @media.

Wikipedia

Dengan kata lain, elemen seperti gambar dapat disesuaikan dan juga susunan elemen tersebut. Berikut adalah video yang menerangkan reka bentuk responsif dan mengapa syarikat anda harus melaksanakannya. Kami baru-baru ini membangunkan semula DK New Media laman web untuk responsif dan kini sedang diusahakan Martech Zone untuk melakukan perkara yang sama!

Metodologi membina laman web responsif agak membosankan kerana anda perlu mempunyai hierarki terhadap gaya anda yang disusun berdasarkan ukuran ruang pandang.

Penyemak imbas mengetahui sendiri ukurannya, jadi mereka memuatkan lembaran gaya dari atas ke bawah, menanyakan gaya yang sesuai untuk ukuran layar. Ini tidak bermaksud anda perlu merancang helaian gaya yang berbeza untuk setiap layar ukuran, anda hanya perlu mengalihkan elemen yang diperlukan.

Beroperasi dengan mentaliti mudah alih adalah standard asas hari ini. Jenama terbaik dalam kelas bukan hanya memikirkan sama ada laman web mereka mesra mudah alih tetapi juga mengenai pengalaman pelanggan sepenuhnya.

Lucinda Duncalfe, Ketua Pegawai Eksekutif Monetate

Berikut adalah infografik dari Monetate yang menggambarkan potensi faedah membuat satu reka bentuk responsif untuk pelbagai peranti:

Infografik Reka Bentuk Web Responsif

Sekiranya anda ingin melihat laman web yang responsif beraksi, arahkan halaman anda google Chrome penyemak imbas (saya percaya Firefox mempunyai ciri yang sama) ke DK New Media. Pilih sekarang Lihat> Pembangun> Alat Pembangun dari menu. Ini akan memuatkan sekumpulan alat di bahagian bawah penyemak imbas. Klik pada ikon mudah alih kecil di sebelah kiri bar menu Alat Pembangun.

responsif-ujian-krom

Anda boleh menggunakan pilihan navigasi di atas untuk mengubah pandangan dari landskap ke potret, atau bahkan memilih sebilangan besar ukuran ruang pandang yang diprogramkan. Anda mungkin perlu memuat semula halaman, tetapi ini adalah alat paling keren di dunia untuk mengesahkan tetapan responsif anda dan memastikan laman web anda kelihatan hebat di semua peranti!

3 Komen

  1. 1
  2. 2

    Terima kasih banyak Douglas untuk artikel yang dijelaskan dengan baik ini. Saya mesti bersetuju dengan perkara ini walaupun dari aspek kandungan. Bagi kebanyakan laman web, kami membuat susun atur responsif tidak akan mencukupi. Kami memerlukan kandungan yang responsif. Tetapi untuk laman web yang lebih asas, kami pasti akan menggunakan artikel anda yang didokumentasikan dengan baik tentang cara menangani ini!

Apa yang anda fikir?

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.