Sekarang sudah saatnya kita untuk merubah web kita menjadi responsif, karena itu disini nyekrip akan membahas tutorial cara membuat template web responsive dengan HTML 5. Dengan munculnya algoritma google yang disebut mobilegeddon, itu pertanda jika pengguna mobile sudah semakin meningkat.
Dalam tutorial cara membuat template web responsive ini kita akan berlatih mendesain dan membuat halaman web yang responsive dari ukuran desktop ke versi mobile. Jika anda belum pernah membuat halaman web, disarankan untuk berlatih membuat halaman secara sederhana dengan mengunjungi tutorial ” CARA MEMBUAT HALAMAN WEB SEDERHANA “.
Hasil akhir dari membuat template web responsive adalah seperti gambar dibawah ini, klik ” Run Skrip ” jika anda ingin merubah dan melihat demo secara online, silahkan anda ikuti langkah-langkah membuat template web responsive dengan html5 ini.
Tampilan Akhir
Untuk download skrip cara membuat template web responsive, silahkan klik tombol dibawah ini.
Cara Membuat Template Web Responsive
Seperti judul diatas kita akan menggunakan HTML versi 5. Karena tutorial membuat web dengan nyekrip dari awal, maka kita akan menggunakan dua perangkat dasar membuat web;
- Google Chrome yang akan menjadi browser
- Notepad++ yang akan menjadi tempat kita menuliskan skrip
Silahkan klik link pada nama perangkat diatas jika anda belum mempunyai-nya, santai saja tidak akan dipunggut biaya, karena alat membuat website diatas bisa di-download secara gratis. Tutorial ini terdiri dari beberapa langkah mulai dari menyiapkan sketsa sampai testing template responsive.
Langkah 1: Membuat Sketsa Desain Web Responsive
Kita akan memulai dengan membuat sketsa tampilan web untuk tampilan desktop dan juga mobile, dengan sketsa ini kita bisa mengatur arah perubahan tampilan dari desktop ke mobile atau sebaliknya. Berikut adalah sketsa halaman web responsive untuk latihan.
Gambar Sketsa Desktop
Gambar Sketsa Mobile
Perhatikan perbedaan antara dua gambar diatas. Pada sketsa desktop, area sidebar berada disebelah kanan, sedangkan pada sketsa mobile, area sidebar berada sejajar dengan area lain-nya. Area sidebar dibuat sejajar dengan tujuan memberikan ruangan yang lebar pada saat tampil pada layar halaman yang lebih sempit.
Langkah 2: Membuat Struktur HTML Halaman Responsive
Karena kita menggunakan template responsive dengan HTML5, maka kita akan menggunakan elemen-elemen baru seperti header, nav, article. Disarankan untuk memberikan skrip
HTML5SHIV agar template kita bisa berjalan dengan baik dalam browser IE versi 9 kebawah, dan juga menyertakan file reset.css untuk mereset semua style bawaan dari browser (file reset.css bisa di-download pada tombol download skrip diatas).
Kita juga menggunakan Meta Tag Viewport dalam elemen head, untuk lebih memahami tentang menggunakan Meta Tag Viewport, silahkan kunjungi tutorial ” Tips Cara Website Responsive dengan Viewport “.
Kita mulai dengan membuat div
wrapper (pembungkus), area header dan navigasi. Area utama akan di-isi dengan tutorial terpopuler dan daftar tutorial . Area sidebar akan di-isi dengan arsip, kategori dan sosial. Membuat area about sebagai tempat untuk memberikan informasi tambahan dan terakhir membuat area footer. Setiap area kita berikan id dan class untuk memudahkan dalam pengaturan style dalam skrip CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Nyekrip - Membuat Template Responsive</title>
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/media-queries.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,400,400italic,700italic' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrapper">
<header>
<h1><a href="index.html">Nyekrip</a></h1>
<h2>Nyekrip <span>-</span> Web Tutorial Indonesia</h2>
<nav>
<a href="#">Beranda</a>
<a href="#">Skrip</a>
<a href="#">Glosarium</a>
<a href="#">Tentang</a>
<a href="#">Nyekrip Yuk</a>
<div class="clearfix"></div>
</nav>
</header>
<section id="main-content">
<div id="featured">
<h3>Tutorial Populer :</h3>
<h4><a href="#">Tutorial 1</a></h4>
<p>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...
<br/> <a href="#">Nyekrip More →</a></p>
</div> <!-- END Featured -->
<hr/>
<div id="latest">
<section class="left-col">
<h3>Tutorial Terbaru :</h3><br/>
<h4><a href="#">Tutorial 1</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at
ipsum posuere. <a href="#">Nyekrip More →</a></p>
<h4><a href="#">Tutorial 2</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at
ipsum posuere. <a href="#">Nyekrip More →</a></p>
<h4><a href="#">Tutorial 3</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at
ipsum posuere. <a href="#">Nyekrip More →</a></p>
</section> <!-- END Left Column -->
<aside class="sidebar">
<h4><a href="#">Arsip</a></h4>
<ul>
<li><a href="#">Jan 2015</a></li>
<li><a href="#">Feb 2015</a></li>
<li><a href="#">Mar 2015</a></li>
</ul>
<br/>
<h4><a href="#">Kategori</a></h4>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
</ul>
<br/>
<h4><a href="#">Sosial</a></h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Google+</a></li>
</ul>
</aside>
</div> <!-- END Latest -->
<div class="clearfix"></div>
<hr/>
<div id="about">
<h3>Tentang</h3>
<p>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... </p>
</div>
</section>
<hr/>
<footer>
<p>© 2015 - Membuat Template Responsive</p>
</footer>
</div> <!-- END Wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
|
Jika skrip diatas kita jalankan (belum CSS) , maka tampilan halaman web akan tampak seperti berikut:
Gambar tanpa CSS
Langkah 3: Membuat Style CSS Template Responsive
Pembuatan skrip CSS dengan tujuan memberikan style dan responsif pada halaman web dibagi dengan 3 bagian yaitu bagian struktur, utama dan media kueri sekaligus reset CSS. Simpan file CSS ini dalam folder style.
Membuat Style CSS bagian Struktur
Pada skrip HTML diatas, dibagian elemen head telah diset font Open Sans. Mari kita ketikkan skrip dibawah ini untuk mengatur default font dan warna latar belakang (background).
1
2
3
4
5
6
|
body {
background: #F9F9F9;
color: #222;
font-family: 'Droid Serif', serif;
font-size: 16px;
}
|
Selanjutnya kita setting style untuk div
#wrapper, kita berikan lebar width: 90%;.
1
2
3
4
5
6
7
|
#wrapper {
margin: 10px auto;
max-width: 980px;
width: 90%;
background: #fff;
padding: 10px 0;
}
|
Membuat Style CSS bagian Utama
Sekarang kita buat skrip CSS untuk style bagian dalam div wrapper yang terdiri dari header, konten utama, sidebar dan footer. Pada bagian tengah kita berikan 2 kolom, masing-masing ukuran lebar kita atur dengan nilai persentase.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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: #53bd84;
}
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: #53bd84;
}
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: #53bd84;
}
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;
}
|
Simpan skrip CSS diatas dalam satu file CSS dengan nama
style.css, refresh halaman web dan halaman web akan menampilkan halaman kita seperti gambar berikut (ingat ya, pada tahap ini halaman masih belum responsif).
Tampilan Akhir
Membuat Style CSS Media Kueri
Sekarang kita akan membuat skrip CSS media kueri agar template web bisa responsif, buatlah satu file CSS dengan nama
media-queries.css. Dalam file CSS tersebut akan kita atur ukuran font dari h1, h2 dan ukuran lainnya untuk bisa berubah ketika layar halaman web berubah. Juga tidak lupa untuk mengatur agar area sidebar berpindah pada tampilan mobile (2 kolom ke 1 kolom).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*Style Media Kueri*/
@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;
}
|
Membuat Reset Style CSS
Terakhir kita buat file
reset.css dan ketik-kan skrip dibawah ini. Ingat untuk menyimpan file style.css, media-queries.css dan reset.css dalam folder bernama style.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
/*Style untuk reset*/
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;
}
|
Demikian tutorial cara membuat template responsive dengan HTML 5, cara diatas merupakan cara yang sederhana dan ditujukan untuk sebatas memahami proses pembuatan template responsive. Jika anda ingin agar tampilan lebih menarik, silahkan anda padukan dengan font dan bootstrap atau dengan mengunjungi tutorial ” Cara Membuat Tampilan Blog / Website Menarik “.
Masih dibutuhkan modifikasi tambahan jika anda ingin aplikasikan untuk blog blogger maupun blog wordpress, gunakan teknik mengatur kolom dan CSS media kueri yang telah anda pelajari disini. Jangan ragu untuk ajukan pertanyaan jika ada langkah yang tidak dimengerti dengan menuliskan-nya dalam kolom komentar.
