Mengungkap Misteri Responsive Web Desain

Reponsive Web Desan memang tidak akan pernah ada habisnya jika dibahas, sama dengan desain blogazine selalu muncul ide-ide cemerlang dalam desainnya. Kemarin saya sudah membahas secara singkat bagaimana membuat layout grid system responsive, sekarang kita mulai pada topik membuat responsive beberapa element agar bisa responsive secara sempurna pada berbagai macam resolusi layar. Sebenarnya Jika kita sudah menerapkan Resposnsive Grid Layout kemarin, itu saja sudah cukup membuat blog atau website kita Responsive secara sempurna, tapi ada beberapa elemen yang harus di sesuaikan agar lebih baik lebih baik lagi tampilannya.

Ok sekarang kita mulai saja pada pembahasannya karena saya memang tidak pandai dalam menulis dan merangkaikan kata demi kata. Pertama kita akan membuat gambar atau images menjadi responsive, siapkan dulu gambar yang akan dijadikan bahan ujicoba sebagai contoh gambar dibawah ini

Pada umumnya untuk struktur style CSS gambar seperti ini

img.alignleft, a img.alignleft {
  margin:0 20px 20px 0;
  float:left;
}
img.alignright, a img.alignright {
  margin:0 0px 20px 20px;
  float:right;
}
img.aligncenter, a img.aligncenter {
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

Dan struktur HTML dari gambar pada umumnya seperti ini

<!-- Gambar Disamping Kiri Paragraf -->
<img class="alignleft" src"urlGambar disini" alt="namaGambar" >
<!-- Gambar Disamping Kanan Paragraf -->
<img class="alignright" src"urlGambar disini" alt="namaGambar" >
<!-- Gambar Tepat Ditengah dan Dibawah Paragraf -->
<img class="aligncenter" src"urlGambar disini" alt="namaGambar" >

Membuat gambar responsive jangan lupa tambahkan CSS berikut kedalam style CSS pada contoh diatas

img,object,embed{
  border:none;
  vertical-align:middle;
  max-width:98%;
  width:auto;
 }
img{
  height:auto
}

Dan di CSS Media Query sesuaikan dengan contoh dibawah, disini saya membatasi sampai resolusi tertinggi 720 pixel, jika di atas 720 pixel maka tampilan dari images akan menyesuaikan dengan style standart di atas, dan jika dibawah 720 pixel maka tampilan akan menjadi seperti contoh gambar di atas dan yang pasti akan mengikuti resolusi layar yang digunakan.

@media screen and (max-width: 720px){
  img.alignleft, a img.alignleft, 
  img.alignright, a img.alignright, 
  img.aligncenter, a img.aligncenter {
    float:none;
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

Selesai sudah, sekarang images atau gambar yang kita sisipkan sudah menjadi responsive diberbagai resolusi layar.

Berikutnya kita akan mengkondisikan TAG heading, p, pre, code, blockquote. Sekarang kita kembali bermain-main dengan CSS

Untuk tag heading yaitu dari h1 sampai h6 kita berikan style berikut

h1, h2, h3, h4, h5, h6 {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

Kemudian untuk TAG pre, code, blockquote kita berikan style yang sama seperti heading di atas

pre, code, blockquote{
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

Sedangkan untuk TAG p atau tag paragraf kita memberikan style reset berikut

p{
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  hyphens:auto;
  margin-bottom:15px;
  line-height:1.3em;
}

Untuk lebih mempersingkat karena kode tag heading, pre, code, blockquote itu sama maka kita bisa meringkasnya, dan berikut keseluruhan kode CSS dari TAG heading, p, pre, code, blockquote

h1, h2, h3, h4, h5, h6, pre, code, blockquote{
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;}
p{
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  hyphens:auto;
  margin-bottom:15px;
  line-height:1.3em;
}

Secara normal, Perangkat mobile akan memperkecil skala halaman blog atau website saat dibuka. Dengan menggunakan meta tag ini, Perangkat Mobile tidak akan menyesuaikan skala halaman dan akan menerapkan skala yang sudah kita sesuaikan pada CSS Media Queries-nya, caranya sisikan code ini di dalam header tepat di antara <header> dan </header>

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

CSS Reset Eric Meyers

CSS reset ini sangat penting sekali untuk mendesain sebuah web, saya sendiri kurang begitu paham apa fungsi sebenernya dari CSS reset ini, tapi kata pakar dan sesepuh web desainer, CSS Reset ini sangat disarankan, berikut CSS Reset tersebut

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,
tfoot,thead,tr,th,td,section,aside,nav,footer,header,hgroup,
article,audio,video,canvas,command,datalist,details,embed,figcaption,
figure,keygen,mark,meter,output,progress,rp,rt,ruby,summary,time{
  margin:0;padding:0;
  border:0;outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent
}

Sekian posting dari saya tentang Mengungkap Misteri Responsive Web Desain, apabila ada yang kurang jelas atau ingin menambahkan pendapat lain bisa di utarakan pada kolom komentar dibawah ini, dan sampai jumpa di posting berikutnya.