Halo guys, sebelumnya saya sudah pernah membahas tentang bagaimana membuat desain layout website yaitu membuat design layout website dengan tabel dan membuat design layout website dengan tag div. Nah, kali ini sama seperti sebelumnya cuma agak sedikit berbeda. Yap, kita akan membuat layout website kita menjadi responsive. Apa itu responsive???

Responsive dapat diartikan “menyesuaikan”, artinya kita dapat membuat tampilan website yang dapat berubah dan menyesuaikan dengan ukuran dari layar device. Contohnya dari ukuran versi desktop ke versi mobile.

Web responsive telah banyak digunakan di website-website dengan design yang lebih modern. Karena perkembangan website yang begitu pesat, maka wajib bagi kita untuk mengupgrade ilmu seputar web design.

Oke langsung saja simak tutorialnya sebagai berikut :

1. Membuat kerangka halaman responsive dengan HTML

Kita akan membuat halaman responsive dengan HTML5, tentu saja banyak yang baru di dalam HTML5. Jika ingin mengetahui lebih banyak tentang HTML5 bisa berkunjung ke w3school.com. Kerangka umum untuk membuat halaman sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body id="home">
 <div id="wrapper">
  <header><!--header-->
   <nav>
   </nav>
  </header><!--/header-->
  
  <section id="main-content"><!--section-->
   <div id="featured"><!--featured-->
    
   </div> <!--/featured-->
   
   <hr/>
   <div id="latest"><!--latest-->
    <section class="left-col"><!--left column--> 

    </section> <!--/left column--> 
    
    <aside class="sidebar"><!--sidebar-->
 
    </aside><!--/sidebar-->
   </div><!--/latest-->
   
   <div class="clearfix"></div>
   <div id="about">
    
   </div> 
   
  </section><!--/section-->
  <hr/>
  <footer>
   
  </footer> 
 </div>
 
</body>
</html>

Setiap area kita berikan id dan class untuk memudahkan dalam pengaturan style CSS. Sekilas dari tag HTML di atas maka layout yang kita buat terlihat seperti ini :

2. Membuat style CSS

Buat folder dengan nama css kemudian buat file css dan beri nama style.css, kemudian masukkan ke folder css tadi. Berikut code css nya :

body {
    background: #F9F9F9;
    color: #222;
    font-family: 'Droid Serif', serif;
    font-size: 16px;
}

#wrapper {
    margin: 10px auto;
    max-width: 980px;
    width: 90%;
    background: #fff;
    padding: 10px 0;
}

header {
    padding: 3px;
}
::-moz-selection {
    background-color: #91D8f7;
    color: #fff;
}
::selection {
    background-color: #91D8f7;
    color: #fff;
}
a {
    outline: 0;
    color: #222;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
p a:hover {
    color: #318CE7;
}
a:active {
    outline: 0;
    position: relative;
    top: 2px;
}
.clearfix {
    clear: both;
}
h1 {
    font-size: 89px;
    font-family: 'Open Sans', serif;
    line-height: 75px;
    padding: 10px;
}
h1 a:hover {
    text-decoration: none;
    color: #318CE7;
}
h2 {
    font-family: Helvetica;
    font-size: 18px;
    padding: 10px;
}
h3 {
    font-family: 'Droid Serif', serif;
    font-size: 30px;
}
h4 {
    font-family: 'Droid Serif', serif;
    padding: 3px;
    margin: 5px 0 0;
}
h4 a {
    text-decoration: underline;
}
nav {
    background: #222;
    padding: 0;
    margin: 10px 0;
}
nav a {
    color: #F9F9F9;
    display: block;
    float: left;
    padding: 10px;
}
nav a:visited {
    color: #f9f9f9;
}
nav a:hover {
    text-decoration: none;
    background: #318CE7;
}
nav a:active {
    position: relative;
    top: 0;
}
.left-col {
    width: 70%;
    float: left;
}
.sidebar {
    width: 20%;
    float: right;
    margin-bottom: 10px;
}
#about, #featured, #latest {
    padding: 20px;
}
p {
    padding: 0 5px;
}
ul {
    list-style: none;
}
ul li {
    margin: 0 5px;
}
footer {
    padding: 5px;
}
pre {
    overflow: scroll;
    font-size: 10px;
}

3. Membuat style Media Queries

Buat file CSS media queries yang fungsinya supaya halaman web bisa responsive, beri nama media-queries.css. Dalam file CSS tersebut atur ukuran font dari h1, h2 dan ukuran lainnya untuk bisa menyesuaikan ketika layar halaman web berubah.

@media screen and (max-width:478px) {
 h1 {
  font-size: 70px;
  padding: 1px;
 }
 h2 {
  font-size: 13px;
  padding: 1px;
 }
 body {
  font-size: 13px;
 }
}@media screen and (max-width:740px) {
    .left-col, .sidebar {
    width: 100%}
}img {
    max-width: 100%;
    height: auto;
}

4. Membuat Reset style CSS

Buat file css dan beri nama reset.css.

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

Berikut adalah source code lengkap untuk bagian HTML.



 
  Membuat Layout Website Responsive
 
 
 
 
 
 
 
 <!--[if IE]>
  
 <![endif]

<!--header

My Personal Website

Selamat Datang di Website Saya

Artikel Populer :

Artikel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis, pulvinar eu neque.llis...
More →