Cara Mendesain Layout Template Responsive dengan HTML5 dan CSS3

cara mendesain layout template responsive dengan html5 dan css3 - Template website yang responsive merupakan suatu ketrampilan dalam pembuatan template website/blog. Disini yang dimaksud dengan responsive ialah ukuran suatu template website/blog yang dapat dilihat dan dibuka dengan berbagai ukuran dekstop baik itu pada laptop, netbook,dan smartphone lainnya. Website yang anda buat dapat menyesuaikan ukuran browser di media anda.

Template website/blog itu terkadang disukai para pengunjung, dikarenakan mereka dapat mengakses website kita dari mana pun. Dan itu merupakan suatu kemudahan bagi pengunjung yang akan mengunjungi website kita. Selain desain ukuran template yang responsive, semua fitur-fitur yang ada diwebsite kita harus responsive juga dan harus disesuaikan juga dengan ukuran template tersebut. Misalnya dropdown menu atau yang lainnya, lihat cara membuat dropdown menu horizontal dengan css.

Disini, saya akan memberikan sedikit tutorial yaitu cara mendesain layout template website responsive dengan html5 dan css3. Kita akan menggunakan script yang digunakan untuk membuat suatu design menjadi responsive yaitu @media screen. Untuk melihat secara jelas, mari ikuti langkah-langkahnya :

1. Buat file HTML yang baru di text editor anda, disini saya menggunakan Dreamweaver. Setelah di buat file baru, buat namanya yaitu index.html. Lalu copas script dibawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@media screen and (min-width: 0px) {
    div#mydiv {
        width:500px;
        margin:0 auto;
        height:100px;
        background:#09F;
        font-size:27px;
}
@media screen and (min-width: 1000px) {
    div#mydiv {
        width:900px;
        margin:0 auto;
        height:100px;
        background:#09F;
        font-size:27px;
}
</style>
</head>
<body>
<div id="mydiv">Contoh Layout</div>
</body>
</html>

Anda bisa melihat script diatas bahwa kita menggunakan @media screen dan memiliki min-width yang berarti ukuran rendahnya yaitu minimal 0px dan max 500px, begitu juga yang kedua. Anda dapat membuat secara berulang, Sesuai dengan ukuran media yang akan digunakan. Cukup sampai disini tutorial yang saya berikan, semoga bermanfaat. Dan terima kasih telah membaca Cara membuat layout template website responsive dengan html5 dan css3. Mohon dishare jika bermanfaat. Ingin script lengkapnya, silahkan download di bawah.