Call & WA : 0838 3326 7666 // BBM: 7693FDD0

Artikel OmaGue NetWork

Dasar membuat responsive web desain dan tips grid system responsive

Responsive Layout dengan Grid Sistem

Tersinspirasi dari teman-teman blogazinner maupun narablog sekalian yang menginginkan desain responsive untuk blog mereka. Waktu itu saya juga pernah menuliskan contoh media query untuk responsive web di blog lama saya di denyekawicahyo.com, dan karena blog tersebut tidak akan saya kembangkan lagi maka akan saya bahas lebih jauh lagi disini.

Sebelum memulainya saya akan menjelaskan apa sih responsive web desain itu. Menurut pemahaman saya Responsive web desain merupakan desain tampilan sebuah website yang dapat menyesuaikan tampilan web-nya sesuai dengan ukuran resolusi layar yang digunakan, sebagai contoh silahkan saja anda kecilkan ukuran browser atau peramban anda untuk mengetahui apakah web tersebut sudah responsive atau belum, kalau sudah responsive maka peramban anda tidak akan ada scrol dibawah, dan blog tersebut sudah termasuk web responsive seperti blog ini. atau bisa juga menggunakan tool dari Matt Kersley untuk mengecek responsive dari web tersebut.

Berikut ada beberapa contoh media query untuk responsive web desain sebagai acuan dasar memulai desain web responsive

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Style CSS di Sini */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Style CSS di Sini */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Style CSS di Sini */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Style CSS di Sini */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Style CSS di Sini */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Style CSS di Sini */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Style CSS di Sini */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Style CSS di Sini */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Style CSS di Sini */
}

Sebelum Mulai simak dulu

Sebelum menerapkan Responsive web desain alangkah baiknya bila kita mempelajari dulu grid sistem 12 Kolom ala bang Amdhas Chromatic ini, dengan memahami grid sistem ini kita bisa mendesain tampilan web dengan sangat mudah dan yang pasti akan lebih mudah membuat tampilan tersebut responsive, karena grid sistem ini dirancang untuk lebih memudahkan membuat tata letak layout sebuah website tanpa perlu memberikan media query yg begitu banyak seperti contoh di atas

Oke silahkan disimak terlebih dahulu dibawah ini merupakan contoh desain dari grid sistem tersebut dan grid ini terdiri dari 12 kolom, dan kelebihannya dijamin 100% responsive, gak percaya kecilin layar browser atau peramban anda sekarang juga dan lihat bagaimana hasilnya.

1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

5

5

2

6

6

7

5

8

4

9

3

10

2

11

1

12

CSS Grid Fluid 12 Kolom

.bersih{
  clear:both;
  display:block;
  overflow:hidden;
}
.grid{
  width:100%;
  margin:0;
  overflow:hidden;
}
.dh1{
  width:6.25%
}
.dh2{
  width:14.583333333333334%;
}
.dh3{
  width:22.916666666666664%;
 }
.dh4{
  width:31.25%
}
.dh5{
  width:39.58333333333333%;
}
.dh6{
  width:47.91666666666667%;
}
.dh7{
  width:56.25%;
}
.dh8{
  width:64.58333333333334%;
}
.dh9{
  width:72.91666666666666%;
}
.dh10{
  width:81.25%;
}
.dh11{
  width:89.58333333333334%;
}
.dh12{
  width:97.91666666666666%;
}
.dh1, .dh2, .dh3, .dh4, .dh5, .dh6, .dh7, .dh8, .dh9, .dh10, .dh11, .dh12 {
  display:inline;
  float:left;
  margin:0 1.0416666666666665%;
}

Responsive Grid Fluid 12 Kolom

@media screen and (max-width: 720px) {
 .dh1, .dh2, .dh3, .dh4, .dh5, .dh6, .dh7, .dh8, .dh9, .dh10, .dh11, .dh12{
   width: 97.91666666666666%;
   margin-bottom: 1em;
 }
}

Memulai Desain Responsive

Perhatikan kode CSS disamping, itu adalah dasar dari grid sistem yg akan kita gunakan sebagai acuan untuk membuat penataan desain lebih mudah, langkah awal sebelum memulai kita harus menyesuaikan berapa lebar grid yang akan kita gunakan

Dalam hal ini selector .grid adalah kode dasar dari css itu sendiri, jadi kita misal menginginkan membuat 4 kolom untuk sidebar seperti blog ini itu mudah saja berikut perhatikan kode CSS dan HTML atau perhatikan cotoh layout di atas yang akan saya gunakan. Selektor .grid tersebut kita memberikan untuk lebar dari keseluruhan layout web kita,

.grid{
  width:100%;
  margin:0;
  overflow:hidden;
}

Setelah itu kita harus menentukan lebar dari kolom yang akan kita pakai, tadi saya akan membuat sidebar 4 kolom dan dan tentu mudah saja CSS mana yang akan saya pakai, iya bener sekali .dh3.

.dh3{
  width:22.916666666666664%;
  display:inline;
  float:left;
  margin:0 1.0416666666666665%;
}

Disini selektor .dh1 sampai .dh12 itu adalah nama-nama kolom yang sudah di seting untuk mempermudah pekerjaan kita jadi alangkah baiknya CSS grid berserta responsive-nya tersebut kita salin dan tempel saja di style.css blog yang digunakan

Sekarang kita buat agar tampilannya bisa lebih responsive di berbagai layar. dan untuk memisah antara kolom kita beri nama dengan selector .bersih

.bersih{
  clear:both;
  display:block;
  overflow:hidden;
}
@media screen and (max-width: 720px) {
.dh3{width: 97.91666666666666%;
     margin-bottom: 1em;
    }
  }

Peringatan! "Apabila sudah menyalin dan menempel seluruh kode di samping abaikan cara Memulai Desain Responsive" ini dan cukup perhatikan struktur dari contoh HTML dibawah ini saja

<div class="grid">
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
<div class="bersih"></div>
</div>

Seperti itu lah kode HTML yang diberikan sebagai contoh untuk membuat web kita lebih responsive, sebenarnya masih banyak untuk element dari html itu sendiri yang bisa dibuat responsive, untuk hal ini insya allah akan saya bahas pada Misteri Responsive Web Desain

Bagaimana pendapat anda tentang responsive web desain ini, apa kelebihan dan kekurangan yang anda temui? silahkan utarakan pada form komentar dibawah.

#! Tentang Penulis

OmaGue NetWork Bukan Sekedar Web Development & Membuatnya Lebih Sederhana

   Formulir Pemesanan Website

OmaGue NetWork

Profesional Web Development & Web Desainer

Scroll to Top