Contoh Membuat web desain yang Responsif dengan HTML5 dan CSS3


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

Untuk download file ini dapat klik disini atau 

INFORMASI:

Iklan yang tampil pada halaman situs ini sepenuhnya diatur oleh pihak google, kami hanya menyediakan slot kosong. Jadi apabila ada iklan yang kurang berkenan atau menyinggung perasaan anda harap informasikan kepada kami melalui formulir kontak web ini untuk selanjutnya akan kami sampaikan ke pihak Google.

penulis

About Catur Budi Waluyo

<p> Suka otak atik yang penting menyenangkan dan bermanfaat saja. Administrator www.calesmart.com</p> <p> Jika sahabat tidak ingin report dalam mengelola website,&nbsp; bisa langsung kontak&nbsp; WA saya di +62 81 393 657 986</p> <p> &nbsp;</p>

Learn More

Artikel Terkait