Apa itu Desain Responsif? (Video Penjelasan dan Infografis)

desain web responsif

Butuh satu dekade untuk desain web responsif (RWD) menjadi mainstream sejak Cameron Adams pertama kali diperkenalkan konsep. Idenya sangat cerdik - mengapa kita tidak bisa merancang situs yang menyesuaikan dengan viewport perangkat yang sedang dilihatnya?

Apa itu Desain Responsif?

Desain web responsif (RWD) adalah pendekatan desain web yang ditujukan untuk membuat situs guna memberikan pengalaman menonton yang optimal - membaca dan bernavigasi dengan mudah dengan ukuran, panning, dan scrolling minimum — di berbagai perangkat (dari ponsel hingga komputer desktop monitor). Situs yang dirancang dengan RWD menyesuaikan tata letak dengan lingkungan tampilan dengan menggunakan kisi-kisi berbasis proporsi, gambar fleksibel, dan kueri media CSS3, perpanjangan dari aturan @media.

Wikipedia

Dengan kata lain, elemen seperti gambar dapat disesuaikan serta tata letak elemen tersebut. Berikut adalah video yang menjelaskan apa itu desain responsif serta mengapa perusahaan Anda harus menerapkannya. Kami baru saja membangun kembali DK New Media situs menjadi responsif dan sekarang sedang dikerjakan Martech Zone melakukan hal yang sama!

Metodologi pembuatan situs yang responsif agak membosankan karena Anda harus memiliki hierarki untuk gaya Anda yang diatur berdasarkan ukuran viewport.

Browser sadar akan ukurannya, jadi mereka memuat lembar gaya dari atas ke bawah, menanyakan gaya yang berlaku untuk ukuran layar. Ini tidak berarti Anda harus mendesain stylesheet yang berbeda untuk setiap ukuran layar, Anda hanya perlu menggeser elemen yang diperlukan.

Beroperasi dengan mentalitas yang mengutamakan seluler adalah standar dasar saat ini. Merek terbaik di kelasnya tidak hanya memikirkan tentang apakah situs mereka ramah seluler tetapi juga tentang pengalaman pelanggan sepenuhnya.

Lucinda Duncalfe, CEO Monetate

Berikut infografis dari Monetate yang menggambarkan manfaat potensial dari membuat satu desain responsif untuk beberapa perangkat:

Infografis Desain Web Responsif

Jika Anda ingin melihat situs responsif beraksi, arahkan Google Chrome browser (Saya yakin Firefox memiliki fitur yang sama) ke DK New Media. Sekarang pilih Tampilan> Pengembang> Alat Pengembang dari menu. Ini akan memuat banyak alat di bagian bawah browser. Klik ikon seluler kecil di ujung kiri bilah menu Alat Pengembang.

responsif-pengujian-chrome

Anda dapat menggunakan opsi navigasi di bagian atas untuk mengubah tampilan dari lanskap ke potret, atau bahkan memilih sejumlah ukuran area pandang yang telah diprogram sebelumnya. Anda mungkin harus memuat ulang halaman, tetapi ini adalah alat paling keren di dunia untuk memverifikasi pengaturan responsif Anda dan memastikan situs Anda terlihat bagus di semua perangkat!

3 Komentar

  1. 1
  2. 2

    Terima kasih banyak Douglas untuk artikel yang dijelaskan dengan baik ini. Saya harus setuju dengan ini meskipun di sisi konten. Untuk sebagian besar situs yang kami buat, tata letak responsif tidak akan cukup. Kami membutuhkan konten yang responsif. Tetapi untuk situs web yang lebih mendasar, kami pasti akan menggunakan artikel Anda yang terdokumentasi dengan baik tentang cara menangani ini!

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.