Membuat Design Web Responsive Menggunakan CSS

Pada pembahasan materi kali ini kita akan membuat Design Web Responsive.
Design Web Responsive adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer. Dengan metode ini. Berikut kita akan membuat form responsive .

alt

Berikut source code lengkapnya :

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title> Website Responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
</head>  
<body>  
    <div class="container">
        <div class="header">
            <h1 align="center"> Selamat Datang</h1>
        </div>
        <div class="main">
            <div class="left">
                <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Sports</a></li>
                    </ul>

            </div>
            <div class="middle">
                <h3 align="center">Berita</h3>
                <p  align="center"><strong><a href="#">Membuat Design Web Responsive</a></strong></p>
                <p><img src="images/gambar.jpg" alt=""></p>
                <p><a href="#">Baca Selengkapnya >> </a> 
            </div>

            <div class="right">
                <h3 align="center">Terpopuler</h3>
                <p>
                    <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Pemrograman</a></li>
                    <li><a href="#">Database</a></li>
                    </ul>
                </p>
            </div>  
        </div>

            <div class="footer">
            <p align="center">Coppright &copy; 2016 <a href="http://erabelajar.com">Era Belajar</a></p>
            </div>  
    </div>          
</body>  
</html>  

Penjelasan Source Code
<meta name="viewport" content="width=device-width, initial-scale=1.0"> merupakan syntax yang berfungsi untuk menampilkan web sesuai dengan layar.

<link rel="stylesheet" href="css/main.css">merupakan External Style sheet yang digunakan untuk mengload file css .

Pada Struktur HTML berikut terdapat 3 class utama yaitu header , main dan footer .

<div class="container">  
    <div class="header">digunakan untuk bagian header</div>
    <div class="main">
        <div class="left">Digunakan kolom bagian Kiri...</div>
        <div class="middle">Digunakan kolom bagian tengah...</div>
        <div class="right">Digunakan kolom bagian kanan...</div>
    </div>
    <div class="footer">Digunakan bagian footer...</div>
</div>  

Source Code berikut digunakan untuk menampilkan layar responsive

@media screen and (max-width:959px){
    #container{
        width   : 100%;
    }
    #left-column{
        width   : 70%;
    }
    #right-column{
        width   : 30%;
        }
    img{
        width   : 100%;
    }
}
/******************************************
    MEDIA QUERIES ( Responsive )
*******************************************/
@media screen and (max-width:1080px){
        .container{
            width   : 100%;
        }

        .left{
            width       : 25%;
            background  : #D6CCFE;
        }

        .middle{
            width   : 68%;
            float   : right;

        }

        .right{
            clear   : both;
            padding : 1% 4%;
            width: auto;
            float   : none;
            background  : #D6CCFE;
        }
}

/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {

    .header, 
    .footer{
        text-align: center;
    }
    .left {
        width: auto;
        float: none;
    }

    .middle {
        width: auto;
        float: none;
    }

    .right {
        width: auto;
        float: none;
    }

}

Untuk mencobanya anda bisa merubah ukuran pada layar sesuai dengan kebutuhan.

alt

Source code Design Web Responsive bisa didownload di https://github.com/era-belajar/Responsive-Design

Marfi Saputra

Web Programmer di erabelajar.com (PT Ridaka Indonesia Cerdas) . Mengambil Kosentrasi Informatika Komputer di LP3I JAKARTA Kampus Depok