Anda di halaman 1dari 8

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
(orientation : landscape) {
/* Style CSS di Sini */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width
(orientation : portrait) {
/* Style CSS di Sini */
}

768px)

and

(max-device-width

1024px)

and

768px)

and

(max-device-width

1024px)

and

/* 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-devicepixel-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.

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


<!-<img
<!-<img
<!-<img

Gambar Disamping Kiri Paragraf -->


class="alignleft" src"urlGambar disini" alt="namaGambar" >
Gambar Disamping Kanan Paragraf -->
class="alignright" src"urlGambar disini" alt="namaGambar" >
Gambar Tepat Ditengah dan Dibawah Paragraf -->
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.

Mengkondisikan Tag HTML


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

Meta Tag Skala pada Perangkat Mobile


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 Queriesnya, 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.