Responsive Layout dengan Grid System

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 */
}

Sumber Inspirasi

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}}

Sumber Artikel

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.

95 Komentar di “Responsive Layout dengan Grid Sistem”

Maaf, Komentar di Tutup.

  • Sebelumnya salam kenal mas.
    Meskipun saya belum begitu mengenal dunia Blogazine aku akan mencoba mempelajarinya mas.
    terimakasih buat tutorialnya.

    • Salam kenal kembali mas,
      monggo sama2 belajar biar banyak para blogaziner di Indonesia

  • maksih tipsnya….kebetulan baru mulai ngulik responsive web :)

  • Bagus mas cuman aku mau ngasih tambahan,

    Kayaknya kalo width-nya langsung nempel di class cssnya lebih efektif mas menurut sya :)

    Tapi ini nolong ane banget. Terima kasih….

    • maksudnya bagaimana mas? memang width-nya sudah jadi satu dari class .dh1 sampai .dh12 :)

  • mumpung ada ahli yang memberikannya secara gratis, kudu dipelajari biar pengetahuan makin bertambah…. akhir kata, hanya TERIMA KASIH lah yang terucap untuk semua ini,..

    salam kenal!

    • wew… saya bukan ahlinya mas, ini hanya merupakan reverensi dari orang lain saya hanya membantu menyampaikannya saja, karena kode sudah ada yg buat :)
      salam kenal kembali.

  • Bang code media query untuk responsive yang mumet dan panjang tidak karuan yang paling atas cuma untuk menunjukan berapa banyak media query saja yach atau bagai mana..??
    kerena dari contoh saya melihat cuma yang di gunakan malah ini @media screen and (max-width: 720px)
    terus dari comentar bang hendro juga mengunakan @media screen and (max-width: 720px)
    dan perbedaan-nya cuma nilai value di dalam deklarasi width: yang di beri value dalam % …

    • kalau untuk media query yang paling atas itu hanya contoh dari beberapa media query yang paling umum digunakan, sedangkan contoh @media screen and (max-width: 720px) itu media query untuk penyesuaian grid-nya, jadi intinya begini, ketika sudah menggunakan grid system ini maka layout sudah responsive dan cuma membutuhkan @media screen and (max-width: 720px) saja, sedangkan media query yg ada di contoh di atas di gunakan untuk penyesuaian beberapa elemen saja, semisal tag h1 - h6 dan selektor lain, kalau menanggapi komentar bang hendro tersebut memang dia mencoba membuat grid sendiri dengan penyesuain tidak seperti grid di atas, itu menjelaskan cara mengatur layout seperti yang sudah ada di posting dua empat pertanyaan dan empat pernyataan pada blog amdhas.tk

      • Oke terima kasih bang, udah ada gambaran sedik walau masih samar-samar, ntar kalau ngubeng dan binggung lagi wes bali lagi dan tanya lagi mumpung masih ada yang tukang post tutorial heheee

      • Bang den, tujuan meringkas class pada akhiran grid pada artikel diatas seperti ini:
        .dh1, .dh2, .dh3, .dh4, .dh5, .dh6, .dh7, .dh8, .dh9, .dh10, .dh11, .dh12 {deklarasi}

        Apakah untuk mempermudah menerapkan media queries sehigga menjadi
        @media screen and (max-width: 6969px) {.dh1, .dh2, .dh3, .dh4, .dh5, .dh6, .dh7, .dh8, .dh9, .dh10, .dh11, .dh12{deklarasi}}
        dan memudahkan kita untuk membuat-nya lebih responsive..??

        #Tulisan “Resposive Grid Fluid 12 Kolom” itu diperbaiki bang…

  • Saya lagi hobi dengan Bootstrapnya Twitter mas.. itu juga keren loo… :)

    • Kalau Bootstrap saya dulu pernah mencobanya mas, akan tetapi saya lebih seneng menggunakan yang ini, karena lumayan mudah pengaturnannya, meskipun lebih kompleks bootstrap dari pada grid system di atas :)

  • mas dhen cahyo, saya menggunakan grid sistem untuk blogger, tapi setelah saya taro script HTML nya di posting kok gag bisa ya, mohon penjelasannya , hehehhe

    • maksudnya menaruh script HTML di posting bagaimana? apa maksudnya meng-copy file html yg ada di contoh sidebar di atas? sebelumnya itu hanya sekedar contoh untuk memanggil fungsi dari grid system yg sudah di taruh di file css utama, kalau di blogger saya kurang paham, karena tidak pernah menggunakannya, untuk css grid diatas sebaiknya di copi dulu ke bagian style pada template blogger, kemudian panggil nama selektor CSS-nya pada desain posting, kurang lebih seperti itu

      • iya mas, waktu saya panggil di posting, saya kasih HTML , kyk gini ,

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        terus yang terjadi malah kyk gini

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla
        isi sidebar bla…bla..bla

        , padahak udah aq tambahin css nya di syle atau klo di blogger , di atas kode }]]> ,

        :( , gimana mas

  • Mas, mau tanya…
    saya sekarang sedang belajar HTML… saya mencoba membuat script code web . dan kemudian saya coba tes di Mozila Firefoks, hasilnya sesuai dengan script yang saya ketik di Cute html. tetapi waktu saya cek di web browser Internet Exploler, jadi hasilya berbeda. dan begitu juga pada Crome juga terdapat perbedaan….. Apa kesalahannya mas? dan bagaimana agar semua tampilan di web browser sama sesuai dengan sript yang saya tulis…
    Terimah Kasih..

    • Kemungkina pada umumnya apabila terdapat beberapa perbedaan pada masing-masing browser itu dikarenakan ada faktor style pada css yg belum support dengan browser tersebu, atau mungkin sudah tidak diperhunakan lagi, sebagai contoh CSS3 akan sangat kacau di Internet Explore versi 9 kebawah, dan pada versi 9 ke atas pun begitu jika tidak di pakai CSS untuk mengoptimalkan pada browser tertentu, mungkin ini sedikit membantu

cool-me
OmaGue.com
Blog Author Catatan Kecil Sang Penjelajah Dunia Maya
Perum Graha Indah Blok.i No.4 Krapyakrejo Gadingrejo Pasuruan. P.O. Box: 67137 Pasuruan, Jawa Timur P.O. Box: 67137 Indonesia
dheny@omague.com 083833267666 - 085233055262