Contoh Membuat web desain yang Responsif dengan HTML5 dan CSS3
Perkembangan teknologi pada saat ini, untuk membuat desain web yang responsive atau dapat menyesuaikan media yang digunakan merupakan sebuah kewajiban dan tantangan. Dengan adanya website responsive maka website akan tampil dan terbaca dengan baik di berbagai perangkat dan berbagai ukuran layar baik itu PC, Laptop maupun smartphone. Untuk pemula, desain responsive mungkin terdengar rumit dan sulit. Oleh karena itu pada kali ini saya akan berbagi hasil codingan desain web yang responsive. Untuk menghasilkan desain web yang responsive dapat dilakukan dengan 3 langkah yaitu
Baca juga:
Bagaimana Teknik Penulisan CSS pada Situs dalam desain web?
Langkah pertama yaitu mendefinisikan meta tag desain responsive. Pada langkah ini menggunakan meta tag viewport pada bagian head. Tag viewport ini digunakan untuk memberitahu browser untuk menggunakan lebar perangkat sebagai lebar viewport dan menonaktifkan skala awal. Meta tag ini mungkin tidak semua compatible sehingga anda bisa menggunakan bantuan media-queries.js atau respond.js seperti pada gambar berikut ini.
Baca juga:
Cara menampilkan Form kalender dengan menggunakan HTML 5 dan bootstrap
Langkah kedua yaitu menentukan layout.
Pada langkah ini kita membuat struktur html dengan header, content, sidebar dan footer. Bagaimana desain yang saya buat? Anda bisa lihat pada gambar berikut ini.
Langkah ketiga yaitu membuat media query.
Pada langkah ini, saya menggunakan CSS3 dan membagi tampilan menjadi 2 ukuran yaitu maksimal 980px dan maks 700px. Pada CSS ini prinsipnya hampir sama dengan Bahasa pemrograman dengan menggunakan kondisi atau penentuan keputusan (if), dimana pada CSS ini memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang sudah di set lebarnya, sehingga halaman html flexible mengikuti layar browser.
Baca juga:
Aplikasi Blog berbasis PHP MySQLi yang dinamis dan responsive
Untuk hasil tampilannya seperti pada gambar berikut ini.
gambar Tampilan awal sebelum penambahan media queries
Gambar setelah ada penambahan media query dan terlihat menyesuaikan tampilan layar
Gambar tampilan menu ketika dibuka dengan layar yang resolusi kecil
