Selamat Datang

9 Prinsip Dasar Responsive Web Design

9 Prinsip Dasar Responsive Web Design – Responsive web design adalah solusi yang paling baik untuk mengatasi permasalahan halaman web yang tidak bisa dibuka di berbagai jenis layar.

Dalam responsive web tidak ada ukuran halaman yang tetap (fixed), tidak ada milimeter atau inci, dan lain sebagainya. Membuat desain dalam piksel untuk keperluan Desktop dan Mobile adalah cara lama, sudah kuno, karena sekarang makin banyak perangkat yang digunakan untuk membuka website, bukan hanya desktop dan smartphone, namun juga tablet PC, dan semua itu ukuran layarnya berbeda-beda. Jadi website harus bisa mengadopsi segala macam ukuran layar dari berbagai perangkat tersebut.

Responsive Web Design

Website Froont yang bergerak didunia web design khusus nya menyediakan service responsive web design menuliskan 9 prinsip web design yang perlu untuk anda pahami, berikut adalah prinsip-prinsip tersebut.

Responsive vs Adaptive

Responsive dan Adaptive ini mungkin tampak sama, namun kenyataannya berbeda. Pendekatan keduanya yaitu saling melengkapi satu sama lain, sehingga tidak ada cara yang benar atau salah untuk melakukannya. Biarkan konten yang memutuskan.

Responsive vs Adaptive

 

 

 

Baca Juga:

Flow

Ketika ukuran layar menjadi kecil, konten mulai mengambil lebih banyak ruang vertikal dan apapun yang ada dibawahnya akan terdorong kebawah.

Flow vs Static

Relative Unit vs Static Unit

Kanvas bisa saja sebuah layar komputer desktop, layar ponsel, tablet pc, dll. Kepadatan piksel juga bervariasi, jadi kita perlu satuan unit yang fleksibel dan bekerja di mana-mana. Disitulah unit relatif seperti persen (%) menjadi berguna. Jadi ketika membuat lebar menjadi 50% ini berarti akan selalu mengambil setengah dari layar.

Relative Unit vs Static Unit

Baca juga:

Breakpoints

Breakpoints memungkinkan layout untuk berubah pada titik-titik yang telah ditentukan, yaitu memiliki 3 kolom pada desktop, tapi hanya 1 kolom pada smartphone, sedangkan pada tablet pc bisa saja dibuat 2 kolom. Sebagian besar properti CSS dapat diubah dari satu breakpoint ke breakpoint lain nya.

Breakpoints

Minimum Value vs Maximum Value

Terkadang itu ada baiknya ketika konten mengambil seluruh lebar layar, seperti pada perangkat mobile, tetapi memiliki konten yang sama yang membentang ke seluruh lebar layar TV anda adalah hal yang terkadang kurang masuk akal. Inilah sebabnya mengapa nilai minimum (min) dan maksimum (max) sangat membantu. Sebagai contoh kita memiliki lebar 100% dan lebar maksimum dari 1000px berarti konten yang akan memenuhi layar, tapi jangan melebihi 1000px.

Minimum Value vs Maximum Value

Nested Objects

Ingat dengan posisi relatif? Memiliki banyak elemen tergantung pada satu sama lain akan sulit untuk mengontrol, karena itu membungkus elemen dalam sebuah wadah penyimpanan akan membuat nya lebih mudah dimengerti, lebih bersih dan rapih. Disinilah unit statis seperti piksel(px) dapat membantu. Mereka sangat berguna untuk konten yang tidak ingin anda ubah ukuran nya seperti logo dan tombol.

Nested Objects

Mobile First or Desktop First

Secara teknis tidak ada banyak perbedaan jika proyek dimulai dari layar yang lebih kecil ke besar (mobile first) atau sebalik nya (desktop first). Namun itu akan menambahkan keterbatasan ekstra dan membantu Anda membuat keputusan jika Anda mulai dengan mobile first. Seringkali orang mulai dari kedua ujung sekaligus. Silahkan pilih yang sesuai dengan yang anda pahami dengan baik.

Mobile First or Desktop First

WebFonts vs System Fonts

Ingin menggunakan jenis font Futura atau Didot di website anda? Gunakan WebFonts! Meskipun mereka akan terlihat menakjubkan, ingat bahwa masing-masing akan di unduh dan semakin banyak anda menggunakan maka waktu loading website anda akan semakin lama. Sedangkan system font disisi lain tampil secepat kilat, namun jika pengunjung website anda tidak memiliki font tersebut di komputer mereka, itu akan mengembalikan font ke font standar.

WebFonts vs System Fonts

Bitmap vs Vector

Apakah icon anda memiliki banyak detil-detil dan menerapkan efek-efek? Jika iya, gunakan Bitmap. Jika tidak maka gunakan gambar vektor. Untuk bitmap menggunakan JPG, PNG atau GIF sedangkan untuk vektor pilihan terbaiknya adalah SVG atau Icon Fonts. Masing-masing memiliki beberapa manfaat dan kekurangan. Namun berfokuslah pada ukuran — tidak ada gambar yang digunakan secara online tanpa optimasi. Vektor disisi lain biasanya lebih kecil ukuran nya, namun beberapa browser belum memberikan support. Selain itu juga, jika memiliki banyak kurva, mungkin akan lebih berat dari pada bitmap, jadi pilihlah dengan bijak.

Bitmap vs Vector

End..

Demikian beberapa prinsip yang harus anda pilih dan terapkan pada website responsive anda, pilihlah pilihan yang terbaik untuk anda, untuk website anda dan untuk pengunjung website anda. jadi bijak-bijaklah dalam menentukan pilihan.

Sekian artikel tentang Prinsip Desain Web Responsive ini, semoga berguna untuk anda, salam web design Indonesia.

Artikel ini bersumber dari blog froont.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

9 thoughts on “9 Prinsip Dasar Responsive Web Design

  1. febriyant_ says:

    thx buat tutorial-webdesign.com artikelnya sangat membantu kebetulan saya sedang mendesain web portofolio saya sendiri,
    mungkin bisa di tambahkan untuk artikel how to start create responsive web design,

    dari mulai desainnya sampai dengan implementasi ke html dan css

  2. adis says:

    trims bostut lengkap sekeleus

  3. Irfan P says:

    Terima kasih admin :D

  4. makasih tutornya,
    baru sadar ada Responsive vs Adaptive (kemana saja ane .. :( ) dan untuk Bitmap vs vector ane biasa pake bitmap karena ane upload gambar biasanya “skedar” pelengkap :)

  5. Hassanshin says:

    Thanks gan.. lebih enak lagi kalau dijelasin sekalian code.nya :D

  6. […] Baca Juga: 9 Prinsip Dasar Responsive Web Design […]

  7. Freddy says:

    Pening juga ya web design ini but it’s oke that life :v

  8. Eza Dwi Anandharizky says:

    hmmm jadi nambah ilmu

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development