Cara Membuat Website Responsive, Gampang Banget!!!

Teknoakurat.com – Website responsive, apa sih kegunaannya? Apakah memiliki website responsive sepenting itu? Jawabannya, TENTU.

Kenapa?

Seperti namanya, responsive atau dalam bahasa bakunya disebut responsif, merupakan sebuah sifat “dapat merespons dengan baik” di berbagai keadaan.

Dalam dunia website atau blog, memiliki tampilan web dalam bentuk responsif adalah hal ihwal. Sebab, pengguna internet telah mengalami perkembangan signifikan di sektor medianya.

Dulu, orang kalau mau akses internet harus ke warnet dulu. Namun di zaman sekarang, orang dapat mengakses internet bisa dengan berbagai platform, mulai dar HP, Laptop, Komputer/PC, Tablet, dan sejenisnya.

Perubahan inilah yang menuntut kita harus memiliki web atau blog yang responsive, supaya pengunjung dapat membaca konten kita dengan menyesuaikan ukuran gadget yang mereka gunakan.

Taruhlah pengunjung blog/web kita ada 4 jenis yang menggunakan platform yang berbeda-beda. Misalnya, ada yang menggunakan HP, Tablet, Laptop, dan Komputer desktop.

Maka, sebagai pemilik web, kita harus membuat blog/web dengan 4 jenis ukuran responsif, yaitu dapat ditampilkan dengan baik menyesuaikan ukuran layar HP, Tablet, Laptop, dan Komputer desktop. Itulah fungsi dari web/blog responsive.

Dari sini dapat kita simpulkan bahwa web responsif/responsive adalah suatu metode untuk membuat suatu layout (tampilan) website yang dapat menyesuaikan diri dengan resolusi layar pengguna.

Nah, sekarang pertanyaannya, apa dampaknya jika kita tidak menerapkan fitur responsive pada website kita?

Dilansir dari Google Publisher, halaman yang tidak responsif/tidak mobile friendly “otomatis” akan “tidak” mendapatkan posisi yang baik di mesin pencarian Google dan berpotensi besar “tidak” mendapatkan pengunjung.

Nah, sekarang Anda tahu, kan?

RWD (Responsif Web Design) merupakan langkah wajib bagi Anda yang ingin membuat sebuah blog atau website. Jika Anda ingin totalitas, maka Anda harus patuh sama Google. Ini mutlak. Mobile friendly, artinya, Anda harus membuat situs yang dapat bersahabat dengan perangkat Mobile.

Sesuai judul di atas, berikut teknoakurat rangkum cara membuat website responsif dengan mudah:

Apa yang Harus Dipersiapkan?

Berikut adalah beberapa hal yang harus Anda persiapkan:

Siapkan text editor (bisa menggunakan Sublime Text)
Siapkan browser (boleh Opera, Firefox, atau Chrome)
Buat file HTML dengan nama file index.html di text editor Sublime Text
Buat file CSS dengan nama file style.css di text editor Sublime Text
Buat file Javascript dengan nama file main.cs di text editor Sublime Text
Ketiga file tersebut Anda simpan di satu folder agar mudah diakses

Cara Membuat Website/Blog Responsive

1. Mendeklarasikan Tag dasar HTML

Pertama, deklarasikan tak HTML pada file index.html. Berikut kodenya:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Website Responsive</title>

</head>

<body>

-----------------

</body>

</html>

2. Hubungkan file HTML degan file CSS

Kedua, hubungkan file CSS ke file HTML (index.html). Hal ini bertujuan agar kita bisa memodifikasi desain HTML dengan tag <style>. Tambahkan kode <link rel="stylesheet" href="style.css"> tepat di atas tag </head>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Website Responsive</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

----------------

</body>

</html>

3. Hubungkan file Javascript ke index.html

Langkah selanjutnya adalah menghubungkan file Javascript ke badan file index.html. Caranya yaitu dengan memasukkan kode <script src="main.js"></script> tepat di bawah tag </body>.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Website Responsive</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<script src="main.js"></script>

</body>

</html>

4. Membuat Kerangka HTML Dasar Responsive

Kerangka atau struktur HTML website responsive sangatlah beragam. Setiap orang memiliki versinya masing-masing dalam mengaplikasikan kode responsive. Berikut salah satunya:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Website Responsive</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="wrapper">

<nav class="nav"></nav>

<main class="content"></main>

<section class="sidebar"></section>

<footer></footer>

</div>

<script src="main.js"></script>

</body>

</html>

5. Membuat Struktur HTML Navbar

Setelah berhasil membuat struktur dasar untuk pembuatan website responsive, langkah selanjutnya adalah Anda bisa membuat bagian navbar terlebih dahulu. Berikut kodenya:

<nav class="nav">

<div class="brand">

<a href="">Infokuy</a>

</div>

<div class="menu">

<a href="#">About</a>

<a href="#">Contact</a>

<a href="#">Privacy Policy</a>

<a href="#">Disclaimer</a>

</div>

</nav>

6. Membuat Struktur HTML Content

Lanjut ke bagian content, silakan copy struktur HTML di bawah ini.

<main class="content">

<div class="content-area">

<div class="card">

<div class="card-img">

<img src="./assets/dogs.jpg" alt="">

</div>

<div class="card-content">

<h3>Love Dog's</h3>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>

</div>

<div class="card">

<div class="card-img">

<img src="./assets/snow.jpg" alt="">

</div>

<div class="card-content">

<h3>Winter Love</h3>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>

</div>

<div class="card">

<div class="card-img">

<img src="./assets/duck.jpg" alt="">

</div>

<div class="card-content">

<h3>Duck Party</h3>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>

</div>

<div class="card">

<div class="card-img">

<img src="./assets/love.jpg" alt="">

</div>

<div class="card-content">

<h3>Love you so much</h3>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fugit nam dicta autem eos, iure ex, dolor tenetur voluptas...</p>

</div>

</main>

7. Membuat Struktur HTML Sidebar

Lanjut ke bagian sidebar, silakan copy struktur HTML di bawah ini. Paste tepat di bawah tag content.

<section class="sidebar">

<div class="sidebar-area">

<div class="about-me">

<img src="./assets/restu.jpg" alt="">

<h4>Restu Kersana</h4>

<span>Pengen hidup enak.</span>

</div>

</section>

8. Membuat Struktur HTML Footer

Lanjut kebagian footer atau kaki, silakan copy struktur HTML di bawah ini. Paste di bawah tag sidebar.

<footer>

<h4>Infokuy Blog's</h4>

<span>Dibuat oleh Restu Kersana</span>

</footer>

9. Tambahkan Style CSS

Setelah membuat struktur HTML website responsive, langkah selanjutnya adalah memberikan styling pada website tersebut agar bisa reponsive ke semua device. Nah di bawah ini adalah kode CSS yang bisa Anda tambahkan ke file style.css.

* {

padding: 0px;

margin: 0px;

list-style: none;

quotes: none;

text-decoration: unset;

outline: none;

border: none;

box-sizing: border-box;

}

html {

width: 100%;

height: 100%;

scroll-behavior: smooth;

}

body {

height: 100%;

width: 100%;

max-width: 1200px;

position: relative;

margin: 0px auto;

overflow-x: hidden;

}

.wrapper {

display: grid;

grid-template-columns: repeat(12, 1fr);

}

.nav {

grid-column: span 12;

padding: 20px;

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

box-shadow: 0 1px 10px rgba(0,0,0,0.1);

}

.nav .brand {

font-size: 1.2rem;

font-weight: bold;

}

.nav .burger {

width: 30px;

cursor: pointer;

}

.nav .menu {

width: 100%;

padding-top: 10px;

max-height: 0;

visibility: hidden;

display: flex;

align-items: flex-start;

justify-content: center;

flex-direction: column;

transition: all .3s ease;

opacity: 0;

}

.nav .menu.active {

max-height: 30rem;

visibility: visible;

opacity: 1;

}

.nav .menu a {

padding: 10px 0;

}

.content {

padding: 20px;

grid-column: span 12;

}

.content-area {

display: grid;

grid-template-columns: repeat(12, 1fr);

gap:10px;

place-items:center;

}

.content-area .card {

grid-column: span 12;

width: 100%;

height: auto;

display: flex;

margin: 10px 0;

align-items: center;

justify-content: center;

flex-direction: column;

border-radius: 5px;

overflow: hidden;

box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);

cursor: pointer;

}

.card-img {

width: 100%;

height: 100%;

}

.card-img img {

width: 100%;

height: 200px;

object-fit: cover;

}

.card-content {

display: flex;

justify-content: center;

align-items: flex-start;

flex-direction: column;

padding: 0 10px;

}

.card-content h3 {

padding: 10px 0;

font-size: 1.2rem;

font-weight: bold;

}

.card-content p {

padding: 10px 15px 15px 0;

font-size: .9rem;

font-weight: normal;

}

.sidebar {

grid-column: span 12;

padding: 20px;

}

.sidebar-area {

display: grid;

grid-template-columns: repeat(12, 1fr);

gap: 10px;

place-items:center;

}

.about-me {

grid-column: span 12;

width: 300px;

height: 200px;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);

text-align: center;

margin: 10px 0;

}

.about-me img {

width: 100px;

height: 100px;

border-radius: 1000px;

object-fit: cover;

}

.about-me h4 {

padding: 10px 0;

}

.about-me span {

padding: 5px 0;

}

footer {

grid-column: span 12;

padding: 20px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

footer h4 {

font-size: 1.5rem;

padding: 10px 0;

}

footer span {

color: grey;

font-size: .95rem;

padding: 5px 0;

}

@media screen and (min-width: 620px) {

.content-area .card {

grid-column: span 6;

}

@media screen and (min-width: 768px) {

.wrapper {

padding: 0 10px;

}

@media screen and (min-width: 1024px) {

.content-area .card {

grid-column: span 6;

}

.content {

grid-column: span 9;

padding: 20px 20px 20px 0;

}

.sidebar {

grid-column: span 3;

}

.about-me {

width: 250px;

}

10. Tambahkan Javascript untuk Menjalankan Navbar

Agar burger pada website yang kita buat bisa berjalan, Anda harus menambahkan kode javascript agar burger bisa menampilkan menu pada website.

const burger = document.querySelector('.burger')

const menu = document.querySelector('.menu')

burger.addEventListener('click', function() {

menu.classList.toggle('active')

})

Yang terakhir, Anda cukup melakukan demo menggunakan browser mozila atau chrome. Demikian cara membuat website responsive lengkap dengan kodenya. Semoga apa yang kami sampaikan bermanfaat.

TEKNO AKURAT

Cara Membuat Website Responsive, Gampang Banget!!!

Cara Membuat Website/Blog Responsive

1. Mendeklarasikan Tag dasar HTML

2. Hubungkan file HTML degan file CSS

3. Hubungkan file Javascript ke index.html

4. Membuat Kerangka HTML Dasar Responsive

5. Membuat Struktur HTML Navbar

6. Membuat Struktur HTML Content

7. Membuat Struktur HTML Sidebar

8. Membuat Struktur HTML Footer

9. Tambahkan Style CSS

10. Tambahkan Javascript untuk Menjalankan Navbar

Posting Komentar untuk "Cara Membuat Website Responsive, Gampang Banget!!!"

Menu Halaman Statis