tutorialswb

Saya adalah pendiri dari TutorialsWB.com dan TutorPHPID.com. Saya adalah Blogger dan Pengembang Web. Saya sudah ngeblog sejak 2016 dan mencari nafkah dengan mencari proyek online. Hubungi Saya

Desain Web Adaptif vs Desain Web Responsif

Pada September 24, 2017 Edit Post


Selamat pagi sobat blogger kali ini saya akan share Desain Web Adaptif vs Desain Web Responsif. Desain web yang responsif dan desain web adaptif adalah dua pendekatan perancangan web yang dapat digunakan untuk menciptakan desain UI dan UX yang cerdas dari situs web yang sesuai untuk semua perangkat. Mereka serupa dan berbeda pada saat bersamaan, tapi mana yang lebih baik? Pada artikel ini, kita akan menentukan perbedaan antara desain web responsif dan adaptif dan mencari tahu mana yang lebih baik untuk Anda pilih

 Apa yang kita sebut RWD (desain web responsif)?

Pada tahun 2010, Ethan Marcotte, perancang web, menerbitkan artikel berjudul "Responsive Web Design" di mana ia menggambarkan sebuah pendekatan baru terhadap perancangan web yang menyediakan adaptasi konten di situs web sesuai dengan lebar layar perangkat. Sementara itu, desain web responsif telah menjadi pendekatan yang populer untuk merancang situs web, dan buku Marcotte adalah buku pegangan RWD untuk banyak desainer.

Aturan dasar untuk membuat RWD sebuah situs web - harus mencakup tiga komponen penting:

  • Dasar yang mudah disesuaikan
Seperti yang saya katakan, RWD mengubah konten di situs web dengan relatif lebar layar perangkat. Itu sebabnya hanya membutuhkan satu tapi tata letak yang mudah disesuaikan. Jadi, bagaimana Anda bisa membuat konten di halaman web mengubah ukurannya? Yang Anda butuhkan adalah menggunakan persen atau ems untuk font sebagai pengganti piksel, dan, dengan cara ini, semua komponen pada halaman web akan berubah secara proporsional. Misalnya, jika blok teks mengambil 65% tempat pada halaman di layar PC, layar teks akan tetap berada di layar perangkat lain.

  • Konten visual yang fleksibel
Sambil membuat RWD, jangan lupa isi media. Gambar dan video seharusnya tidak hanya mengubah ukurannya sesuai dengan lebar layar namun juga menyesuaikannya dengan blok konten. Itu sebabnya Anda harus menetapkan lebar maksimal untuk komponen media, sehingga tidak akan menjadi lebih lebar dari pada blok konten.

  • Kueri media
Permintaan media salah satu teknik CSS. Ini digunakan untuk mengidentifikasi rangkaian gaya yang tepat yang perlu diterapkan pada halaman web. Ada tiga rangkaian gaya utama yang diterapkan perancang saat membuat RWD: perangkat seluler, perangkat komputer, dan satu set tablet. Namun, terserah Anda berapa banyak gaya untuk menerapkan lebih atau kurang.

Apa yang kita sebut desain adaptif (AWD)

Desain adaptif dan RWD memiliki tujuan yang sama, walaupun memiliki metode yang berbeda. Sementara RWD membutuhkan satu layout dengan konten fleksibel, perancangan adaptif memerlukan seperangkat tata letak, masing-masing untuk perangkat tertentu.

Pendekatan ini memungkinkan pembuatan UX untuk situs web yang akan bagus tidak hanya di perangkat dengan layar kecil namun juga untuk yang memiliki resolusi tertinggi. Nah, tentu saja, Anda tidak perlu membuat banyak layout karena ada banyak resolusi. Anda harus memutuskan perangkat mana yang mungkin disukai pengguna potensial Anda.

Strategi apa yang perancang perlu ikuti untuk menciptakan AWD?

Ada dua strategi yang harus Anda pelajari jika Anda telah memutuskan untuk membuat desain adaptif.

Strategi pertama dikenal sebagai perangkat tambahan yang progresif. Sesuai dengan strategi ini, seorang perancang perlu mulai membuat desain dengan standar UX yang cocok untuk peramban lama di tempat pertama. Dan baru setelah ini, desainer membuat desain untuk browser yang lebih maju.

Strategi lain bekerja sebaliknya. Mengikuti perancang strategi degradasi yang anggun pada awalnya membuat website yang memiliki desain UX yang cerdas untuk browser modern dan canggih. Dalam hal ini, sebuah situs web akan terlihat baik pada browser lama, tidak sempurna, namun tetap user-friendly.

Anda mungkin bertanya mana yang lebih baik? Nah, saya dapat memberitahu Anda bahwa peningkatan progresif lebih mudah diikuti karena pada setiap tahap Anda akan mendapatkan produk yang lengkap, siap untuk digunakan, dan ini menjadi lebih baik setiap langkah berikutnya. Strategi ini memberi kesempatan untuk mendapatkan produk siap pakai dengan sangat cepat

Dan satu hal lagi tentang AWD. Jika tugas Anda nomor satu adalah membuat situs web seluler, maka Anda harus melihat dari dekat prinsip yang disebut "mobile first". Sebenarnya, ini sangat mirip dengan metode peningkatan progresif, meskipun lebih sesuai dengan situs web seluler.

Ide utamanya adalah bahwa perancang di tempat pertama harus membuat desain untuk situs mobile, memastikan UX itu cerdas dan user-friendly. Hanya saja semua versi lain bisa dibuat, tapi itu opsional.


Membandingkan: RWD vs AWD

Respinsive Design
Pro

  • Satu URL tunggal untuk setiap versi membuat situs web lebih mudah dipromosikan.
  • RWD akan memperbaiki SEO dari situs Anda.
  • UI dari sebuah situs terlihat bagus di berbagai perangkat.
  • UX yang sesuai pada perangkat yang berbeda.

kontra

  • Mungkin ada jumlah konten yang berlebihan untuk versi seluler.
  • Tidak mungkin membuat produk khusus untuk setiap gadget modern.

Perancangan Adaptif
Pro
  • Situs web adaptif dapat menentukan perangkat dengan lebih baik dan lebar layarnya.
  • Pendekatan adaptif memungkinkan pembuatan produk yang disesuaikan untuk gadget tertentu dan memprediksi perilakunya.
Kontra
  • Perancangan adaptif lebih rumit dan mahal daripada RWD. proses pengembangan.
  • Pemeliharaannya lebih rumit dan juga update.

Meringkas
Bila Anda harus memilih RWD:
  • Jika waktu dan sumber daya Anda terbatas;
  • Jika Anda ingin mendapatkan desain dan fungsionalitas yang bersih dan sederhana;
  • Jika Anda ingin mempermudah proses update dan pemeliharaan situs dan membuatnya lebih cepat.
Bila Anda harus memilih AWD:
  • Jika Anda yakin audiens target Anda akan menggunakan banyak perangkat yang berbeda.
  • Jika Anda siap untuk menghabiskan uang dan waktu untuk membuat beberapa versi terpisah dari situs Anda.
Saya harap artikel ini berguna, saya ingin mengatakan bahwa kedua pendekatan ini memiliki kelebihan dan kekurangan dan itu benar-benar keputusan Anda yang mana yang harus dipilih. 

Jangan Lupa share keteman kalian Jika artikel ini bermanfaat, Tinggankan Comment kalian menurut anda mana yang terbaik digunakan.



Baca Juga