Iso Web Id Tutorial Komputer
Related Articles
Website Responsive atau lebih dikenal dengan html Responsive dapat diartikan sebagai teknik web design dimana layout website tersebut dapat menyesuaikan ukuran maupun orientasi lebar tingginya layar perangkat (Device) yang digunakan user saat mengakses website. Dengan HTML Responsive seakan – akan mempunyai 2 website yaitu Website dari sisi Desktop maupun dari sisi mobile, Apa perlu website dari sisi mobile? Sangat perlu, Hampir semua orang saat ini mempunyai Smartphone dimana hapir setiap hari mereka berkutat mencari informasi dari Perangkat tersebut. Dengan membedakan Bentuk Layout antara Desktop dan Mobile akan sangat membantu pengakses website untuk mencari content – content yang mereka perlukan, mengingat design desktop kurang bagus bila diakses dari Perangkat mobile.
Pada Artikel ini kita akan sedikit berlajar membuat Layout website yang mendukung HTML Responsive.
1. Buat layout seperti dibawah.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xml_lang=”en” lang=”id”>
<head>
<title>Belajar HTML Responsive</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” /> /* CSS Desktop */
<link href=”css/style_mobile.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width:768px)” /> /* CSS Mobile */
</head>
<body>
<div id=”container”>
<div id=”header” class=”header”>
<h1>logo website</h1>
</div>
<div id=”content” class=”content”>
<div class=”left_column”>
<div class=”box nopadding”>
<h3>Box menu</h3>
<div class=”box_content”>Isi Box menu.</div>
</div>
<div class=”box noborder”>
<h3>Box menu</h3>
<div class=”box_content”>Isi Box menu.</div>
</div>
</div>
<div class=”right_column”>
Right Column
</div>
<div class=”clear”></div>
</div>
<div id=”footer” class=”footer”>
<a href=”#” class=”link_footer”>©2013 nama-website.com</a>
</div>
</div>
</body>
</html>
bisa kalian lihat pada Layout tersebut terdapat 2 CSS, dimana css tersebut mempunyai fungsi yang berbeda, satu untuk Design layout Desktop dan satu lagi khusus didesign untuk Perangkat mobile. Pada CSS perangkat mobile kalian lihat tulisan yang berwarna biru, CSS ini membaca perangkat yang mempunyai lebar sebesar maksimal 768px secara otomatis akan digunakan dan tampilan utama website pun akan berubah mengikuti design perangkat mobile.
2. Buat Folder css untuk menampung file css yang akan dibuat.
CSS Layout Desktop (style.css)
body{font:normal 12px Arial, Helvetica, Sans-serif;
margin:0;padding:0;
}
a{text-decoration:none;}
.clear{clear:both;}
#container{width:960px;margin:0 auto;}
#container .header{height:100px;background-color:#F5F5F5;position:relative;}
#container .header h1{position:absolute;color:#333;left:10px;top:15px;margin:0;paddig:0;
text-transform:uppercase;
}
#container .content{background-color:#FF;}
.content .left_column{width:250px;background-color:#FFF;float:left;}
.content .left_column .box {background-color:#FFF;padding-top:5px;border-bottom:1px solid #F794A5;}
.content .left_column .nopadding{padding:0;}
.content .left_column .noborder{border:0;}
.content .left_column .box h3{margin:0;padding:5px;background-color:#F794A5;color:#FFF;}
.content .left_column .box .box_content{padding:5px;}
.content .right_column{float:left;width:695px;background-color:#FFF;margin-left:5px;padding:5px;}#container .footer{height:25px;background-color:#F5F5F5;padding:0 5px;}
.footer a.link_footer{height:25px;line-height:25px;text-align:right;display:block;color:#000;}
CSS Mobile (style_mobile.css)
body{font:normal 12px Arial, Helvetica, Sans-serif;
margin:0;padding:0;
}
a{text-decoration:none;}
.clear{clear:both;}
#container{width:100%;margin:0 auto;}
#container .header{height:100px;line-height:100px;width:100%;background-color:#F5F5F5;}
#container .header h1{color:#333;margin:0;paddig:0;font-size:35px;
text-transform:uppercase;text-align:center;
}
#container .content{background-color:#FFF;}
.content .left_column{display:none;}
.content .right_column{width:100%;min-height:300px;font-size:20px;background-color:#FFF;padding:5px;}#container .footer{height:60px;background-color:#999;padding:0 5px;}
.footer a.link_footer{height:60px;line-height:60px;text-align:right;display:block;
color:#FFF;font-size:20px;text-shadow:1px 1px #000;font-weight:bold;}
cukup mudah bukan, kalian tidak perlu menyewa mobile programmer khusus untuk membuat website khusus mobile, dan ini akan sangat menghemat biaya development karena tidak mengeluarkan uang untuk menggaji programmer mobile kecuali kalian ingin membuat Aplikasi khusus untuk Mobile 
. Dahulu sebelum teknik ini ada ketika mengakses sebuah website dari perangkat mobile otomatis akan dialihkan ke subdomain m (http://m.namadomain.com atau mobile.namadomain.com) dengan teknik ini html responsive kalian tidak perlu membuat website khusus karena teknik ini hanya bermain – main dengan CSS.
Tampilan ketika diakses dari Komputer/laptop
Selamat mencoba.
