Facebook Ilmuwebsite

Intro CSS3 Media Queries : Dasar Membuat Template Responsive

Responsive Template, semuanya bermula dari trafik Internet yang kebanyakannya adalah pengguna smartphone dan gadget lainnya, saya sudah pernah menjabarkan faktanya di artikel ini http://komputer.ilmuwebsite.com/2014/08/sisi-lain-linux-sistem-operasi-populer.html. Sehingga mau tidak mau para web designer pun menyesuaikan diri dalam membuat template-template yang juga bisa memenuhi kebutuhan tersebut. Mengapa? Supaya nggak di tinggal kabur para visitor maupun user. Singkatnya begitu.

Dalam tutorial CSS kali ini kita akan bahas sekelumit penggunaan media screen, pada css3, yang mana fitur media screen yang disediakan oleh CSS3 ini betul-betul bisa mempermudah Anda dalam pembuatan tampilan website / aplikasi yang responsive. Mengapa mempermudah? Sebelum lahir media screen CSS3, biasanya para web developer membuat menggunakan javascript, atau php, untuk bisa memilah-milih apakah halaman di akses oleh mobile, ataukah di akses via PC/Laptop? Tentunya hal ini menyulitkan, dan jelas lama dari segi waktunya.

Nah dengan media screen kita bisa membuat template responsive dengan sangat cepat dan mudah. Tentunya menggunakan HTML5 dan CSS3. Baiklah, silahkan di simak selengkapnya ...

Kita persiapkan terlebih dahulu. HTML5 Kosongnya. Dan di dalam headernya kita sertakan link ke dalam file CSS kosong, file css nya bernama style.css. Seperti ini...
<!DOCTYPE html>
<html>
<head>
<title>Tutorial CSS 3 Media Queries - Ilmuwebsite.com</title>
<link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
<body>
</body>
</html>

Kemudian kita buat kerangka layout sederhananya, di mana ada header, footer, dan sidebar di kanan. Seperti gambar di bawah ini...



Kode lengkapnya adalah ...
<!DOCTYPE html>
<html>
<head>
<title>Tutorial CSS 3 Media Queries - Ilmuwebsite.com</title>
<link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
<body>
 
 <div id="outwrapper">
  <header></header>
  <nav></nav>
  
  <aside>
   <div class="widget"></div>
   <div class="widget"></div>
   <div class="widget"></div>
  </aside>  
  <section></section>

  <div class="floating"></div>
  <footer></footer>
 </div>
 
 
 <a href="http://www.ilmuwebsite.com">Tutorial Website Design</a>
</body>
</html>

Kemudian kode untuk file css-nya ...
body{ text-align:center; }

div#outwrapper{
 width:1100px; height:auto; border:1px solid #000; margin:0 auto;
}

header{
 height:150px; border:1px solid #999; background:blue;
} 

nav{
 height:50px; background:lightblue; border:1px solid #888;
}

aside{
 float:right; width:250px; border:1px solid #777; height:auto; background:#dfdfdf;
}

section{
 width:840px; border:1px solid #555; height:600px;
}

div.widget{
 height:180px; border:1px solid #666;
}

div.floating{
 clear:both; line-height:0; height:0;
}

footer{
 height:300px; border:1px solid #555; background:#dfdfdf;
}

Nah yang tampil di browser nanti kurang lebih seperti ini ...
...

Silahkan klik DEMO untuk melihat contoh hasilnya.

Setelah itu kita akan permak cssnya, dengan media queries agar halaman tersebut menyesuaikan bentuknya ketika di akses menggunakan smartphone. Responsive. Bagaimana caranya? Buka file cssnya, kemudian kita buat query untuk css nya ketika di akses di browser dengan ukuran lebarnya saja 1200px, 1024px, 768px, dan 480px.

Isikan di paling bawah CSS-nya seperti ini ...
/* ketika di akses oleh browser dengan lebar minimalnya 1200px */
@media (min-width: 1200px) {
}

/* ketika di akses oleh browser dengan lebar minimal 980px, dan maksimal 1024 */
@media (max-width: 1024px) {
 div#outwrapper{
  width:960px; height:auto; border:1px dashed #000; margin:0 auto;
 }
 
 section{
  width:700px; border:1px solid #555; height:600px;
 }
}

/* ketika di akses oleh browser dengan lebar maksimal 720 */
@media (max-width: 720px) {
 div#outwrapper{
  width:100%; height:auto; border:1px dashed #000; margin:0 auto;
 }
 
 section{
  width:auto; border:1px solid #555; height:600px;
 }

 aside{
  float:none; width:auto; border:1px solid #777; height:auto; background:#dfdfdf;
 }
 
}

Ya, query-query tersebut digunakan agar ketika di akses oleh browser sekian, maka ia akan menyesuaikan. Sebagai contohnya ketika di akses oleh browser dengan lebar maksimal 720px (biasanya smartphone) maka dia akan menyesuaikan bentuknya.

Silahkan klik DEMO untuk melihat contoh hasilnya, Anda bisa mengecilkan ukuran browser sampai mendapatkan hasil responsive. Seperti gambar di bawah ini...






Mudah sekali bukan?

Ya, kira-kira begitu pembahasan Tutorial Penggunaan Media Screen dalam membuat template responsive. Kita akan bahas lebih mendetil dalam kasusnya di kanal desainweb.ilmuwebsite.com kedepannya.

Semoga Bermanfaat

Salam.

Loka Dwiartara
Admin ilmuwebsite.com
Founder kaffah.biz

Tags

Posting Komentar

1 Komentar