Cara Membuat Template Web Responsive HTML 5
Cara-Membuat-Template-Web-Responsive-HTML-5-Nyekrip

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.

Cara_Membuat_Template_Web_Responsive_HTML_5_Tampilan_Akhir_Nyekrip

Tampilan Akhir

Run Skrip

Untuk download skrip cara membuat template web responsive, silahkan klik tombol dibawah ini.

Download Skrip

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;

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.

Cara-Membuat-Template-Web-Responsive-HTML-5-Sketsa-Desain-Nyekrip

Gambar Sketsa Desktop

Cara-Membuat-Template-Web-Responsive-HTML-5-Sketsa-Desain-Mobile-Nyekrip

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.

<!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 &rarr;</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. &nbsp; <a href="#">Nyekrip More &rarr;</a></p>
					<h4><a href="#">Tutorial 2</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at 
					   ipsum posuere. &nbsp; <a href="#">Nyekrip More &rarr;</a></p>
					<h4><a href="#">Tutorial 3</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at 
					   ipsum posuere. &nbsp; <a href="#">Nyekrip More &rarr;</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>&copy; 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:

Cara_Membuat_Template_Web_Responsive_HTML_5_Tanpa_CSS_Nyekrip

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).

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%;.

#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.

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).

Cara_Membuat_Template_Web_Responsive_HTML_5_Tampilan_Akhir_Nyekrip

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).

/*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.

/*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.

Happy Nyekrip!

Tagged:

About The Author

Suka ingin berbagi pengetahuan dan pengalaman nyekrip program yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan Web Tutorial berbahasa Indonesia. Nyekrip - Web Tutorial Indonesia

Comments

  9. Reply
    mozart

    terimakasih atas postingan anda , dan postingan ini sangat membantu untuk saya
    banyak yang saya dapatkan dari postingan ini

  15. Reply
    Komodo Mega Tours

    Terimakasih banyak pak untuk postingan ini, karena saya masih belajar membuat template sendiri biar tidak tergantung pada template template lain yang bebas diambil online. Semoga kebaikan anda bisa diberi anugrah yang berlimpah.
    Salam

  17. Pingback: Cara Membuat Template Web Responsive HTML 5 | Portal Tricks

  18. Reply
    banggor

    gan, itu gimana ceknya kalo versi mobile nya jalan melalui pc? bisa gak cuma dari browser aja udah bsa kita cek? makasi gan sebelumnya

  21. Reply
    railondi

    Kebetulan lagi build web sendiri. Memang responsive dan mobile friendly jadi salah satu syarat untuk persaingan SERP skarang. Informasinya sangat berguna, makasih gan.

  23. Reply
    Zain

    Kelihatannya muda, tapi butuh waktu yg cukup lama dan ketekunan yg luar biasa tuk bisa menghasilkn template yg berkelas..
    punya template untuk blogspot nggak?!?!? mirip seperti yg dipake skrng ini..?!?!?

  26. Reply
    Ahmad Zaelani

    Emangnya HTML5 ama html biasa bedanya apa sih kang,,, Saya dari dulu pengen buat contoh halaman sederhana yang support di hp,,,,

    1. Reply
      Admin Article Author

      setiap HTML punya versi, html 5 ya sekedar versi ke lima :) perbedaan tiap versi jelas mengacu fitur yang dikembangkan

  27. Reply
    Social Media Viral Marketing

    Di bookmark dulu ahh gan, banyak pelajarannya disini. Biar ane gampang balik lagi ke rumah agan. Hehe

    Btw, mks untk artikel yg sangat bermanfaat bagi nubi sprti saya… smga sehat sllu n trus brsemangat memberikan artikel yg penuh manfaat. Salam sukses

  29. Reply
    Agan Sufyan

    wah masih pusing aja ni dengan kode2 diatas, tapi saya akan tetap berusaha gan, terima kasih tutorialnya

    1. Reply
      Admin Article Author

      menambah halaman? tinggal dicopy aja, dan alamat halaman yang tercopy tinggal di insert pada halaman utama :)

    1. Reply
      Admin Article Author

      pada body set background

      body { background-image: url(“paper.gif”); background-color: #cccccc; }

  35. Reply
    Seto dwi pramesti

    bermanfaat pak artikelnya..minta ijin kopas script-nya ya..trus gmna cara merubah tampilan size seperti ,tinggi,lebar,dan lainnya…apakah ada hitungan/rumusan yang baku biar tampilan template bisa dibilang” PAS”…trims infonya.

  36. Reply
    Lutvi

    Terimakasih admin artikel ini sangat membantu saya, saya mau menggunakan ini untuk template email, cara menggunakannya bagaimana ya?? mohon pencerahanya…!!!

  37. Reply
    Muhammad Anwari

    mas, kalo cara membuat template berdasarkan file html gimana caranya?
    misalnya saya sudah menemukan template website yang isinya berupa index.html satu file css dan satu folder image.
    apa yang harus saya lakukan agar bisa digunakan pada template blogger dan berekstensi xml ?

  38. Reply
    Lukiluck

    Saya juga mulai belajar bikin template gan. Biar gak lupa, cara-caranya saya rangkum jadi artikel tutorial. sedikit-sedikit jadi lumayan ngerti sekarang.

    Mungkin bisa dicheck di blog saya kalau ada masukan gan. terima kasih

  44. Reply
    Blogger Template

    kalau mau yang cepat, pakai aja template rancangan yg udah responsive. di blog aku ada lho responsive + seo 100% hehe
    tempiate.blogspot.com

  45. Reply
    kiat jitu

    wuih…. bagus banget ni penjelasannya…
    serasa bikin template sendiri jadinya

    makasih gan info n pembelajarannya….

  46. Reply
    Ilmu Marketing

    Mau tanya klo dibagian header nya kan biasanya pake logo gitu sama ada deskripsi tentang web yang dibuat.
    Klo mau deskripsi nya ditimpa sama logonya itu bagaimana? jadi klo di cek logo nya tetap ada deskripsi tentang web nya

  47. Reply
    Dian

    Tutorialnya sangat membantu…
    Saya punya satu pertanyaan….

    Saya sudah punya template HTML5, Semua Halaman dan tampilannya sempurna. Tapi gimana caranya Koneksi ke panel admin dan Bisa Posting lewat Panel Admin ke Index….???

  49. Reply
    gaos

    Gan, kalo itu kan halam depan web, kalau halaman artikelnya gimana. Jadi biar “Nyekrip more” nya kebuka ke halaman artikelnya

  50. Reply
    Syaiful bahri

    Min itu kan kode ada css nya ? Nah kode css tersebut harusnya diletakkan dibagian dan kan ? Nah kerangka admin yang bagikan tidak ada kode lalu saya buat kode dan untuk meletakkan kode css tersebut, bener gak min ?

  51. Reply
    metha sonia

    min..
    bisa minta contoh website lagi min..
    untuk tugas..
    kirim ke email methasonia7 at gmail.com ya min..
    lola banget ni min..
    mohon banget min..
    terimakasih banyak min..
    semoga sehat selalu dan rezeqinya lancar

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.