Teory responsive grid presentase dalam wadah

#desain{
width:100%;
}
.desain1{
width:170%;
clear:both;
float:left;
display:inline;
}

<div id="desain">
<div class="desain1">
<p>
ISI APA SAJA DI SINI
</p>
</div>
<div class="desain1">
</div>
</div>

Pada artikel ini, kita akan coba memaparkan cara melayot blogazine dengan tehnik grid presentase dalam wadah yang akan di sertai contoh dan penggunaannya secara responsive. Ini pernah dibahas di artikel blogazinist.com dengan judul cara melayout blogazine menggunakan grid sistem dan melayout blogazine dangan satu kolom responsive.

Sebelumnya bagi yang baru membaca tehnik ini bisa membaca terlebih dahulu rekomendasi link di atas. Sekarang kita akan mengembangkannya, dengan membuat grid di dalam grid default. Teory grid ini memang seperti terlihat ringan, hanya permainan CSS dengan satuan presentase di masing-masing grid. Namun jika kita salah menerapkan seperti positioning atau floating, ini bisa menjadi malapetaka dalam layout kita. Terlebih jika kita menerapkan konsep blogazine.

Tehnik ini mempunyai logika, yaitu kita akan membayangkan mengisi ember full dengan air, maka isi ember tersebut bernilai seratus persen jika penuh. Jika di isi setengah maka akan menjadi 50 persen.

Mari kita berlogika, bagaimana jika kita mengisi ember yang ukurannya lebih kecil dan memasukannya dalam wadah kosong tersebut? sementara ember yang kecil tadi kita isi dengan 50% air maka otomatis ada wadah yang berisi 50% di dalam wadah yang berisi 100%. Jadi wadah akan setengah dari wadah aslinya.

Kalau di dalam CSS kita akan membaginya menjadi id dan class yang dimana id bernilai 100% sedangkan class kita yang menentukan isinya, misal classnya bisa lebih besar atau lebih kecil. coba perhatikan contoh di bawah yang memasukan class menjadi lebih besar. Jadi di dalam terlihat element menjadi besar.

Untuk demo anda bisa melihat layout postingan ini, dimana anda akan melihat ada element yang lebih. Yang bisa anda isi apa saja baik itu image atau teks. Coba perhatikan kode di samping, itu adalah sebuah kode dasar yang membuat grid lebih besar di dalamnya.

Di dalam kode tersebut kita bisa lihat bahwa wadah adalah Id="desain" yang mempunyai ukuran width:100% maka kita bisa mengisi wadah tersebut, di dalam contoh saya mengisi lebih. Bayangkan kalau ember di isi air lebih maka air tersebut akan tumpah. Saya mengisi di class="desain1" dengan ukuran width:170% dalam artian kita mengisi lebih sehingga element akan menjorok keluar.

Lalu mengapa kita membuatnya menjadi display:inline dan memberikan floating menjadi float:left? fungsi itu seperti yang pernah saya jelaskan di blogazinist.com yaitu membuat kolom grid. Namun kalau di dalam kolom grid tersebut kita berikan nilai presentase yang lebih maka ketika layar di kecilkan dia akan membesar juga, sehingga pabila ada pengguna yang menggunakan layar monitor di bawah 800px maka ini tidak nyaman. Nah, bagaimana membuatnya agar bisa menyasuaikan layar monitor pengguna atau pembaca?

Kita akan memanfaatkan CSS media query untuk menyesuaikan layar. Di dalam kode kita dapat melihat bahwa .desain1{width:170%} silahkan perhatikan kode di bawah:

#desain{
width:100%;
}
.desain1{
width:170%;
clear:both;
float:left;
display:inline;
}

liat kode

Sekarang kita akan menggunakan CSS media query, di sini anda bebas menentukan besar ukuran layar yang akan anda sesuaikan. Saya membarikan dalam contoh di layar 820px jadi max-width:820px. Kode tersebut akan menyesuaikan layar 820px sampai yang terkecil. Jika kita memberikan min-width:820px maka dia akan menyesuaikan layar dari 820px sampai yang terbesar.

@media screen and (max-width:820px) {
.desain1{
width:98%;
word-wrap:break-word;
margin:0 auto;
  }
}

hasil kode

Seperti itulah teory grid CSS dalam wadah. Kalau contoh di atas saya memberikan besar di media query menjadi width:98%. Anda bisa memberikan besarnya sesuai keinginan. Namun harus kurang dari 100% karena kalau lebih itu bisa membuat elemen manjadi besar dari layar yang kita tentukan. So, bagaimana layout blog anda? apakah sudah menyesuaikan layar. Sebagai contoh coba anda kecilkan layar anda. Nah, nanti anda akan melihat jika layout blog anda tidak menyesuaikan biasanya ada scroll di bawah. Otomatis ini akan membuat pembaca di layar 800px kebawah menjadi tidak nyaman. Oke, sebelumnya saya mau ucapkan terima kasih buat MR Kim untuk fontnya. Mantap kim. Buat para pembaca semoga berguna dan bermanfaat teory ini. Keep on blogazine.

29 Komentar

  • blogazine amdhas chromatic Rully
    2012-02-15 at 14:21

    gw pake gridsy bang cuma 12 kolom utama dan bisa kreasi sendiri kolom 6 di bagi 2 lagi dan seterusnya… tapi gw ga pake media query.. udah pernah coba gridsy bang?

  • blogazine amdhas chromatic dhenycahoe
    2012-02-15 at 14:23

    Bener banget bang, membuat gird dengan presentase menurut saya memang lebih mudah ketimbang menggunakan px/em, dan terbukti memang sangat responsive di resolusi layar apapun, seperti blog gua yg sudah sebagian besar menggunakan presentase dalam ukurannya dan alhamdulillah sesuatu bisa 95% responsive, dan di imbangi dengan gird 12 dari bang amdhas terasa melayout halaman menjadi mudah, tinggal tentuin lebar dan ukurannya saja hehe…

    • blogazine amdhas chromatic amdhas
      2012-02-15 at 14:38

      Tul banget liat di layar i-phone dan netbook lebih asik. Sekarang saya klo lihat blog mas deny di i-phone dan netbook ane asik liatnya. Coba klo ga responsive, cape juga bacanya..hehehe.

      Responsive ini bisa menghindari penggunaan plugin mobilepress. Tapi klo image ane pake cara matwilcok untuk adaptive di mobile.

      • blogazine amdhas chromatic dhenycahoe
        2012-02-15 at 15:02

        emang asik aja bang kalau blog bisa responsive, dulu sebelum blog responsive terasa aneh jika saya buka di hape nokiem saya, tapi sekarang meski lewat nokiem layar 240×320 dan android layar 320×480 jadi tambah siippp, hehehe… itu apa lagi bang pake image matwilcok??

        • blogazine amdhas chromatic amdhas
          2012-02-15 at 15:05

          Insya Allah nanti di posting tentang penerapan image adaptive dari mat wilcok di CMS wordpress. Karena sepertinya belum ada yang posting untuk wordpress.

          Agak membingungkan soalnya di kode .htaccess

        • blogazine amdhas chromatic dhenycahoe
          2012-02-15 at 15:08

          Hehe.. oke sip deh bang, soalnya gua penasaran dengan .htaccess pengen ngoptimalin jagi aja :)

  • blogazine amdhas chromatic iskandaria
    2012-02-15 at 16:13

    Untuk media query, saya memberikan batas maksimal 800px untuk memberikan lebar persentase 95%. Kira-kira apakah sebaiknya diberi batas di bawah 800px ya bang? Misalnya jadi 760px kayak yang bang Hendro gunakan. Jadi, kalau batasnya kita beri maksimal 760px, maka artinya bagi mereka yang menggunakan komputer degan lebar 800px, mereka masih tetap melihat layout grid atau multi-kolom yang kita setting.

    Tapi kalau pertimbangan saya sih, lebar 800px agak kurang pas untuk menampilkan grid atau layout multi-kolom. Makanya gridnya saya setting jadi mendekati 100% untuk lebar tersebut. Tapi nggak tau juga menurut pendapat mereka yang lebh sering menggunakan komputer dengan lebar resolusi sebesar 800px.

    • blogazine amdhas chromatic amdhas
      2012-02-16 at 18:22

      emm..ane pakai 767px mas IS. Sepertinya sudah cukup untuk tablet pc dan layar ke bawah. soalnya klo 800px notebook nanti berubah. Lebih baik note book biar saja layout masih default kita bisa akalin di tablet aja mas IS.
      max-width:767px

      Ane rasa sudah cukup 767px, sebenarnya jadi 100 persen ga masalah mas IS. Namun kita jangn berikan margin tapi memanfaatkan padding.

      Coba mas IS lihat di posting sebelumnya ane kasih jadi 100 persen di media query, tapi aman..karena ga ada margin tapi padding.

  • blogazine amdhas chromatic yuda
    2012-02-15 at 17:10

    Bang saya coba jadi melebar ya..biar seperti postingan ini bagaimana bang?

    • blogazine amdhas chromatic amdhas
      2012-02-15 at 17:16

      heheheh..bener kan seperti terlihat mudah tehnik ini? klo ga bisa berlogika dengan presentasenya jadi malapetaka kan? itu tujuannya ane buat posting ini. coba klo di logikakan itu id kan 100 persen, jadi klo mau tinggal kurangi aja id nya. misal ane buat jadi 50 persen

      #desain{
      width:50%;
      }
      .desain1{
      width:170%;
      clear:both;
      float:left;
      display:inline;
      }

      Nah klo itu jadi ga melebar.

  • blogazine amdhas chromatic BagiBagiBlog
    2012-02-16 at 03:31

    Alhamdulillah.. Ayas jadi sedikit mengerti dgn teori Grid ini Bang!!!
    Hmm.. makanya kok Kode Grid yang Ayas buat itu masih ada SCROLL Bawahnya…
    Ternyata Ayas keliru menerapkannya Bang, karna dlam media Querynya, Ayas bikin 100%, bukan 98%,
    Jadi post-nya melebar gitu…
    MAKASI BANGET Bang atas penjelasannya,,, Ayas jadi Terbantu mengatasinya!!!
    ^_^

    • blogazine amdhas chromatic amdhas
      2012-02-16 at 18:28

      100% ga masalah sebenarnya jika kita tidak memberikan margin. Yang jadi masalah jika ada margin. Terutama margin-left dan margin-right

      Nah nanti dempet dong text nya?
      itu pasti pertanyaannya. Klo ga mau dempet kita kasih aja padding, yang utama di left dan right.

      • blogazine amdhas chromatic BagiBagiBlog
        2012-02-17 at 00:49

        Owh… jadi begitu ya Bang!!
        Itu die permasalahanya Bang, Ayas malah ngasi margin:0 auto ma padding:0 gitu Bang, jadinya malah kurang responsive!!
        Perlu dibenahin lagi neh Bang, MAKASI BANGET atas pencerahannya Bang Amdhas!!!

        • blogazine amdhas chromatic amdhas
          2012-02-17 at 10:08

          Oh, yang waktu itu ayas tanya ya?
          Jadi begini, coba lihat sebelum kita memberikan media query. Jika ada element yang di berikan margin misal:
          margin-left:10px;
          Maka nanti di media quey harus seperti itu, coba baca draft w3c media query:
          margin-left:0;

          Tidak perlu di kasih auto lagi, contoh lagi:
          margin:10px 20px 10px 20px;

          di media query sesuaikan juga:
          margin:0 0 0 0;

          Atau hanya:
          margin:0;

          Pemberian auto jika kurang dari 100persen, dan biasanya di left dan right. Itu agar element ada di tengah. Gambarannya seperti ini:

          margin:top right bottom left;

          SEARAH JARUM JAM

  • blogazine amdhas chromatic yang penting share
    2012-02-16 at 06:17

    berkat post2 abang tentang responsive saya udah bisa belajar cara responsive,yah mesti masih banyak kurangnya wkwkkw maklum otak saya lemot bang,thanks sebelumnya banyak banget saya dibantu oleh abang

  • blogazine amdhas chromatic kimzigr
    2012-02-16 at 12:07

    waahh ternyat "ZeroZeroIsRegular" mantap saya malah belum coba di localhost. kemarin coba di photoshop. trus baru generate fontnya

    • blogazine amdhas chromatic amdhas
      2012-02-17 at 10:13

      Iya kim, makasih fontnya. Mantap cadas abis. Ukurannya juga kecil, tapi belum sempet ane buat format woff kim.

  • blogazine amdhas chromatic Al Firouz
    2012-02-16 at 21:35

    alhamdulillah jadi agak paham sedikit bang tentang responsive , saya biasanya cuma pake % doang ga pake media-screen hehe

  • blogazine amdhas chromatic Rohman
    2012-02-17 at 11:07

    Tehnik yang luar biasa, saat ini belum sempat menerapkan responsive design. Berharap Mas Hendro akan terus berbagi ilmu khususnya tentang website.

  • blogazine amdhas chromatic Adib mahdy
    2012-02-18 at 06:01

    wawa luar biasani sejak saya pertama kali berkunjung..memang mantab

pencarian

Menu Amdhas

Postingan Terakhir

Hak Cipta © 2012 -2013 Amdhas Chromatic | Tema kreasi: Hendro Prayitno