Membuat Design Reponsif Dengan Mudah

Membuat Design Reponsif  Dengan Mudah - Sebuah website sebaiknya nyaman dipandang dan mudah diakses oleh karena itu sebaiknya sebuah blog atau website memiliki design yang reponsif, untuk penjelasan pentingnya design reponsif saya telah membahasnya di berbagai post sebelumnya. Kali ini saya akan membahas Cara Membuat Design Reposif dengan Mudah dan mengupasnya setajam silet (maaf sesekali iklan).

Sebenarnya ada dua cara bagaimana membuat website kita memiliki desain responsif. Cara pertama adalah dengan membuat dua versi dari desain, yang untuk desktop dan mobile versi terpisah sehingga ketika pengguna ponsel datang untuk mengunjungi, layar akan diarahkan ke versi mobile tentu jauh lebih ringan dan sederhana. Adapun cara kedua adalah dengan membuat desain khusus dengan menyesuaikan ukuran font dan layar ponsel sehingga website menjadi lebih mudah untuk melakukan akses dan membaca. 

Dalam tutorial ini, kita akan membahas cara kedua, yaitu untuk membuat desain website dasar yang responsif terhadap browser layar. 
Pertama, tentu saja adalah untuk membuat dokumen html.
Berikut html dasar untuk tata letak situs web:

<div id="wrapper">
<div id="header-wrapper">
<h1>RESPONSIVE WEBSITE DESIGN</h1>
</div>
<div id="navigation">
<h2>HOME ABOUT CONTACT</h2>
</div>
<div id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</div>
<div id="sidebar-wrapper">
<p>Sidebar</p>
</div>
<div id="footer-wrapper">
<p>Footer</p>
</div>
</div>

Kedua, pengaturan ukuran tata letak situs web. Sebagai layout default, kita akan menggunakan ukuran desktop lebar 1300px, untuk menyesuaikan panjang tata letak.
Berikut css kode untuk keseluruhan tampilan website default:

#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}

Berikutnya adalah membuat css kode untuk layar ponsel. Untuk mobile dan gadget dengan layar seluas 1024px dan kurang, sebagai berikut:

/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}

Teknik ini adalah mengubah ukuran lebar dari px awalnya persentase sehingga lebar akan berubah dari 1300px menjadi 100%. 
Ukuran layar browser ponsel sangat beragam, dan bahkan ada lebar ukuran 320px. Jika kita hanya menggunakan ukuran 1024px, ukuran isi dan sidebar menjadi sangat kecil. Untuk itu, konten dan sidebar akan dibuat turun dan tidak sebelah. Bagaimana melakukan? menambahkan CSS di bawah ini.
Kali ini, pengaturan layar dengan lebar 700px atau kurang.

/* for 700px or less */
@media screen and (max-width: 700px) {
 
 #content-wrapper {
  width: auto;
  float: none;
 }
 #sidebar-wrapper {
  width: auto;
  float: none;
 }
 
}

Jika kita telah mengatur lebar layout website maka jangan lupa untuk mengatur ukuran font. Jangan lupa ketika ukuran font menjadi lebih kecil jika dilihat melalui mobile. 
1 em = 16 px -> untuk ukuran font pada paragraph (p) 
1,5 em = 24 px -> untuk h1 
1.25 em = 20 px -> untuk h2 
dll 
Jadi kode css untuk huruf yang digunakan dalam desain website responsif adalah:

h1 {
font-size:2em;
}
h2 {
font-size:1.5em;
}
p {
font-size:1em;
}

Secara keseluruhan, berikut ini adalah html dan css kode untuk membuat desain website / blog responsif.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Easy Ways To Create And Build A Responsive Website Design </title>
<style>
#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}
h1 a{
font-size:1.5em;
text-decoration:none;
}
h2 {
font-size:1.25em;
text-decoration:none;
}
p {
font-size:1em;
}
/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
 
 #content-wrapper {
  width: auto;
  float: none;
 }
 #sidebar-wrapper {
  width: auto;
  float: none;
 }
 
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header-wrapper">
<h1><a href="#"> Easy Ways To Create And Build A Responsive Website Design </a></h1>
</header>
<nav id="navigation">
<h2>HOME  ABOUT  CONTACT</h2>
</nav>
<aside id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</aside>
<aside id="sidebar-wrapper">
<p>Sidebar</p>
</aside>
<footer id="footer-wrapper">
<p>Footer</p>
</footer>
</div>
</body>
</html>

Dari tata letak dasar di atas, Anda dapat membangun berbagai bentuk tampilan desain website / blog responsif. 
Sebagai catatan, memiliki desain website responsif seperti ini memiliki kelemahan. Jika situs Web default Anda memiliki kapasitas yang tinggi dan memiliki sidebar banyak, pengguna yang berasal dari aplikasi mobile akan tetap sulit untuk mengakses website Anda. Bila ukuran situs sangat besar, Anda harus menggunakan cara pertama yang saya sebutkan di paragraf pertama di atas. Di lain waktu saya akan membicarakannya nanti. Saya harap tutorial ini dapat berguna bagi Anda.

Terimakasih atas partisipasi anda pada post saya kali ini. Jangan lupa untuk meng-sharenya kepada kawan - kawan anda.