Cara membuat tampilan yang responsive dengan HTML dan CSS

Setelah kemarin admin menulis tentang Apa itu responsive design dan seberapa penting bagi dunia ? , maka dikesempatan ini admin akan menulis tentang Beragam teknik untuk membuat desain yang responsive .

Didalam dunia Web Designer terutama untuk Front-End Programmer, pada umumnya untuk membuat sebuah tampilan dibutuhkan 2 hal, yaitu:

  1. Breakpoint

    Yakni patokan (ketentuan) yang berupa maksimal/minumal lebar maupun tinggi pada sebuah website. Pada Breakpoint ini umumnya memiliki satuan px (Pixel).

  2. Grid

    Secara umum dapat digunakan untuk membuat layout berupa kolom yang dapat diubah sesuai dengan ukuran layar, untuk satuannya programmer pada umumnya menggunakan satuan % (Persen).

Dengan 2 hal itu, programmer dapat membuat sebuah yang responsive nan indah.

Pada umumnya tampilan Mobile hanya akan memiliki satu Kolom yang memenuhi layar, hal ini tentu akan sangat menguntungkan bagi pembaca, karena akan mempermudah dalam melihat konten maupun tulisan yang ada. Untuk tampilan Desktop biasanya akan dibuat 2 buah kolom seperti pada gambar dibawah ini.

Responsive Web

Dari gambar diatas tentu kita sudah memiliki ide untuk membuat tampilannya. Dan tutorialnya bisa disimak dengan baik pada tulisan dibawah ini.

Pertama-tama, kita membuat file baru dilokasi yang sobat inginkan, namun penulis akan menyimpannya dilokasi /var/www/html/belajar-responsive/ karena penulis menggunakan sistem operasi Linux dalam pembuatan tutorial ini. Untuk nama file terserah sobat, tapi penulis akan beri nama tutorial1.html

Pembuatan File

Lalu masukkan kode dibawah ini dengan teks editor kesayangan sobat,

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Belajar Responsive</title>
    </head>
    <body>

    </body>
</html>

Lalu coba jalankan dibrowser, apabila belum ada tampilannya tenang, memang begitu kok :-D. Untuk kode diatas pasti sudah tahu dong, kalo belum tahu tanyakan dikolom komentar ya :-).

Tampilan ketika dijalankan dibrowser

Kedua kita tambahkan teks agar kita tahu tampilannya, maka tambahkan kode ini diantara tags <body></body>

    <div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat delectus nihil, tenetur accusamus temporibus sunt vero inventore voluptas rerum ullam maiores a consequatur illo, accusantium animi soluta, sit fuga exercitationem asperiores cupiditate autem ipsum! Assumenda sed amet vero ratione nisi asperiores magnam possimus ut quibusdam cum quae, eius! Repudiandae, voluptatibus aliquid aperiam natus rerum sit, nisi id, obcaecati mollitia vel sequi beatae quos eaque. Rem illum adipisci, atque in sed iure cumque ut nulla, est fugiat ab beatae pariatur, quam qui fuga! Deleniti, voluptatum placeat nihil blanditiis sequi cum consequuntur ducimus fugiat ut minima, sit sapiente quidem autem odio ullam saepe itaque. Laborum mollitia sint, at molestias, non excepturi delectus velit harum provident nostrum nesciunt vel nam quisquam fuga a maiores repudiandae quo suscipit cupiditate voluptatum quas nemo. Ex quae accusantium illum, tenetur doloribus consequatur maxime cumque culpa quam velit quos sint cum provident sapiente, quo. Distinctio quam numquam saepe sed praesentium optio in? Laboriosam sequi ex excepturi, ad odit numquam consequuntur nisi id nam distinctio cumque ut ab pariatur ea est ratione optio temporibus, tempora cum! Fugiat quo pariatur, consequatur quas provident quaerat nesciunt, ipsum facilis architecto quam mollitia omnis eum a numquam voluptatum facere iusto impedit consequuntur eveniet?</div>
    <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facilis eos cumque harum possimus sequi, placeat asperiores, dolor hic illo ad, ratione recusandae fugiat error praesentium perspiciatis consequatur explicabo. Tempora similique esse tempore tenetur qui at. Ex quos numquam voluptas maxime! Delectus assumenda, explicabo enim iure fugiat voluptas facilis, deserunt libero rerum eveniet deleniti vel repellendus eos voluptatibus labore saepe quaerat aspernatur voluptate similique suscipit quae placeat. Hic voluptas qui minus quas. Voluptatem amet quae corporis eius odit, possimus autem architecto excepturi obcaecati ipsum. Voluptates culpa quia harum fuga dolor laborum perspiciatis qui quasi officiis consequuntur! Perspiciatis nesciunt molestias dignissimos animi maiores necessitatibus accusamus fugit sint corporis omnis, repudiandae facere dicta, fuga aliquam quisquam facilis dolor asperiores natus ducimus illum reiciendis sequi</div>
    <div class="clearfix">&nbsp;</div>

Lalu jalankan dibrowser dan akan jadi seperti gambar dibawah,

Tampilan ketika ada teks

Ketiga, nah ini yang paling penting adalah memberi style (CSS) pada kode html tersebut. Masukkan kode dibawah ini diantara tags <head></head>

    <style>
        body,html {
            background: #fff;
            color: #222;
            margin: 0; /* Menghilangkan margin pada tags <body> */
            padding: 0; /* Menghilangkan padding pada tags <body> */
            text-align: justify; /* Membuat paragraf menjadi rata kanan-kiri */
            line-height: 1.5; /* Mengubah line-height (Spasi antar baris) */
        }
        #main {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 60%; /* Menetapkan ukuran lebar tags saat mengambang */
            background: #3170d9; /* Agar background menjadi biru */
            color: #fff; /* Mengubah warna fonts */
        }
        #sidebar {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 40%;  /* Menetapkan ukuran lebar tags saat mengambang */
            background: #d99c31; /* Agar background menjadi orange */
            color: #fff; /* Mengubah warna fonts */
        }
        .clearfix { /* Digunakan untuk membersihkan area yang tidak mengambang */
            display: table;
            clear: both;
            content: "";
        }
    </style>

Secara kasat mata tampilan berhasil dibuat tetapi itu masih belum responsive karena apabila ukuran layar diperkecil, tampilan akan sangat tidak manusiawi. Bisa dilihat pada gambar dibawah ini.

Tampilan Responsive View Dihidupkan

Untuk menggunakan difitur seperti gambar diatas bisa menggunakan kombinasi CTRL+Shift+M pada firefox.

Bila dilihat tampilan diatas itu harus memiliki lebar yang memenuhi gambar agar terlihat manusiawi.

Keempat, agar tampilan menjadi responsive akan digunakan breakpoint yang sesuai. Tetapi berapa banyak ukuran layar yang akan ditest tentu akan sangat banyak, maka dari itu dibuatlah 4 Breakpoint berdasar ukuran yang populer yakni untuk tampilan yang Small, Medium, Large, dan Extra Large. Sekilas sudah seperti ukuran pada baju saja ya, hehehehe.

Untuk breakpointnya bisa ditambahkan pada tags <style></style>, tapi harus ditempat yang paling bawah pada tags tersebut, yakni diatas </style>

    @media (max-width: 576px) { /* small*/
            #main, #sidebar {
                width: 100%;
            }
        }
    @media (max-width: 768px) { /* Medium*/
            #main, #sidebar {
                width: 100%;
            }
        }
    @media (max-width: 992px) { /* Large*/
        }
    @media (max-width: ≥1200px) { /* Extra Large*/
        }

Sehingga keseluruhan kode tersebut menjadi seperti dibawah ini.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Belajar Responsive</title>
    <style>
        body,html {
            background: #fff;
            color: #222;
            margin: 0; /* Menghilangkan margin pada tags <body> */
            padding: 0; /* Menghilangkan padding pada tags <body> */
            text-align: justify; /* Membuat paragraf menjadi rata kanan-kiri */
            line-height: 1.5; /* Mengubah line-height (Spasi antar baris) */
        }
        #main {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 60%; /* Menetapkan ukuran lebar tags saat mengambang */
            background: #3170d9; /* Agar background menjadi biru */
            color: #fff; /* Mengubah warna fonts */
        }
        #sidebar {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 40%;  /* Menetapkan ukuran lebar tags saat mengambang */
            background: #d99c31; /* Agar background menjadi orange */
            color: #fff; /* Mengubah warna fonts */
        }
        .clearfix { /* Digunakan untuk membersihkan area yang tidak mengambang */
            display: table;
            clear: both;
            content: "";
        }
        @media (max-width: 576px) { /* small*/
            #main, #sidebar {
                width: 100%;
            }
        }
        @media (max-width: 768px) { /* Medium*/
            #main, #sidebar {
                width: 100%;
            }
        }
        @media (max-width: 992px) { /* Large*/
        }
        @media (max-width: ≥1200px) { /* Extra Large*/
        }
    </style>
    </head>
    <body>
    <div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat delectus nihil, tenetur accusamus temporibus sunt vero inventore voluptas rerum ullam maiores a consequatur illo, accusantium animi soluta, sit fuga exercitationem asperiores cupiditate autem ipsum! Assumenda sed amet vero ratione nisi asperiores magnam possimus ut quibusdam cum quae, eius! Repudiandae, voluptatibus aliquid aperiam natus rerum sit, nisi id, obcaecati mollitia vel sequi beatae quos eaque. Rem illum adipisci, atque in sed iure cumque ut nulla, est fugiat ab beatae pariatur, quam qui fuga! Deleniti, voluptatum placeat nihil blanditiis sequi cum consequuntur ducimus fugiat ut minima, sit sapiente quidem autem odio ullam saepe itaque. Laborum mollitia sint, at molestias, non excepturi delectus velit harum provident nostrum nesciunt vel nam quisquam fuga a maiores repudiandae quo suscipit cupiditate voluptatum quas nemo. Ex quae accusantium illum, tenetur doloribus consequatur maxime cumque culpa quam velit quos sint cum provident sapiente, quo. Distinctio quam numquam saepe sed praesentium optio in? Laboriosam sequi ex excepturi, ad odit numquam consequuntur nisi id nam distinctio cumque ut ab pariatur ea est ratione optio temporibus, tempora cum! Fugiat quo pariatur, consequatur quas provident quaerat nesciunt, ipsum facilis architecto quam mollitia omnis eum a numquam voluptatum facere iusto impedit consequuntur eveniet?</div>
    <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facilis eos cumque harum possimus sequi, placeat asperiores, dolor hic illo ad, ratione recusandae fugiat error praesentium perspiciatis consequatur explicabo. Tempora similique esse tempore tenetur qui at. Ex quos numquam voluptas maxime! Delectus assumenda, explicabo enim iure fugiat voluptas facilis, deserunt libero rerum eveniet deleniti vel repellendus eos voluptatibus labore saepe quaerat aspernatur voluptate similique suscipit quae placeat. Hic voluptas qui minus quas. Voluptatem amet quae corporis eius odit, possimus autem architecto excepturi obcaecati ipsum. Voluptates culpa quia harum fuga dolor laborum perspiciatis qui quasi officiis consequuntur! Perspiciatis nesciunt molestias dignissimos animi maiores necessitatibus accusamus fugit sint corporis omnis, repudiandae facere dicta, fuga aliquam quisquam facilis dolor asperiores natus ducimus illum reiciendis sequi</div>
    <div class="clearfix">&nbsp;</div>
    </body>
</html>

Sekian artikel yang dapat saya sampaikan ini, apabila ada yang merasa kebingungan bisa bertanya dikolom komentar ya. Salam Coders.