Desain Web Responsif 2

By Adhi P. - Last updated: Sunday, May 31, 2015 - Save & Share - Comments

banner438kursus Desain Web Responsif 2

Pada artikel tentang desain web responsif bagian pertama, kita sudah memahami latar belakangd an pentingnya desain web yang responsif. Nah, pada artikel ini, kita akan bahas cara untuk membuat desain web yang responsif di berbagai jenis layar.

Pada prinsipnya, untuk membuat desain web yang responsif, kita bisa menggunakan layout fluid. Fluid itu cairan, yang menggambarkan sebuah layout yang memiliki fleksibilitas, seperti layaknya cairan. Kita mengenal 3 jenis layout yaitu:

Layout yang fixed artinya tetap akan memiliki lebar desain yang ukurannya tetap. Layout ini kurang cocok digunakan pada web site yang diakses melalui berbagai jenis perangkat. Namun, layout ini memiliki kelebihan yaitu tampilannya yang seragam di semua jenis perangkat.

Layout elastis mendefinisikan lebar desain dalam ukuran unit em, bukan dengan pixel seperti biasa. Ukuran em ini merupakan kelipatan dari ukuran font. Misalnya, jika ukuran font 12px, maka 2em memiliki nilai 24px. Dengan desain ini, jika pengunjung mengubah ukuran font ketika melihat sebuah web site, maka, layout dari web site tersebut akan berubah secara proporsional sesuai dengan perubahan ukuran font yang dipilih. Layout jenis ini pada dasarnya merupakan jenis layout fixed dengan sedikit kemampuan penyesuaian berdasarkan ukuran font.

Pada layout fluid, lebar desain web akan berubah tergantung dari perangkat yang dipakai untuk menampilkan web tersebut. Lebar seuah web site akan didefinisikan dalam bentuk prosentase relatif terhadap ukuran layar perangkat yang digunakan.

Baiklah, secara umum, untuk membuat desain web responsif, kita akan memanfaatkan teknik desain layout yang bersifat relatif/fluid. Dengan layout ini, kita bisa membuat halaman website yang lebih nyaman dilihat di berbagai perangkat yang ada saat ini.

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Posted in Belajar HTML5, Tutorial Belajar HTML, Tutorial Cara Membuat Website • Tags: , , , Top Of Page