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.
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.
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 →</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:
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).
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!
Terima kasih gan..share nya
sama-sama gan.. :)
terima kasih share nya gan… it works..
mantabs mas, jadi semangat nyekrip nih…. mohon tutorial jangan stop di tengah jalan yaaa…..
izin sedot gan
Pengeeen banget memulai
tapi sayangnya waktu dan kemampuanku sangat terbatas
btw, apa kegunaan reset css ya om?
terbantu bnget ni buat dasar nya
Terima kasih banyak atas ilmunya. Membantu saya dalam belajar script.
Nice share ^^
terimakasih atas postingan anda , dan postingan ini sangat membantu untuk saya
banyak yang saya dapatkan dari postingan ini
mantaf gan..
Thank’s Sob bwat infonye…..!
Sekalian ijin comot artikelnye…..! [>_<]
Sob, minta bantuanye…
Ane dah coba tapi templatenye enggak responsif….
link hasilnye di bawah ini :
http://localhost:8099
Sob, mohon bantuanye…
Ane dah coba, tapi templatenye enggak responsif….
link hasilnye di bawah ini :
http://localhost:8099
gan itu ente kasih link localhost cuma di pc ente tuh bisa di buka, gak bisa di buka dari luar tuh gan :)
iya tu gimana coba mau jalaninnya
nyimak aja gan, masih belum paham soal skrip…
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
nice inpoh gan
mantap bet..
lanjut kan berbagi gan..
sukses selalu gan
tx
Pingback: Cara Membuat Template Web Responsive HTML 5 | Portal Tricks
gan, itu gimana ceknya kalo versi mobile nya jalan melalui pc? bisa gak cuma dari browser aja udah bsa kita cek? makasi gan sebelumnya
tinggal kecilin aja ukuran browser-nya gan.. simple kan… :)
ini pake bootstrap ya gan?
gan, newbie nih.. agak puyeng juga bikin web.
file reset.css itu fungsi nya gimana yak? thanks gan
fungsinya untuk menghilangkan css bawaan dari browser. biar default gitu.. :)
Kebetulan lagi build web sendiri. Memang responsive dan mobile friendly jadi salah satu syarat untuk persaingan SERP skarang. Informasinya sangat berguna, makasih gan.
jangan abaikan visitor mobile… :)
admin makasih ya saya izin download buat templet ya.
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..?!?!?
mudah bagi orang yang mau berusaha… :)
perlu di perdalam lagi ilmunya nih
terima kasih toturialnya om
Hal ini bisa dilakukan buat format Blogger gak bang?
tidak bisa, harus dirubah ke format blogger. :)
Bang,maksud di rubah ke format blogger tuh kaya gimana?Kan template blogger mah .xml?
Emangnya HTML5 ama html biasa bedanya apa sih kang,,, Saya dari dulu pengen buat contoh halaman sederhana yang support di hp,,,,
setiap HTML punya versi, html 5 ya sekedar versi ke lima :) perbedaan tiap versi jelas mengacu fitur yang dikembangkan
Iya, html 5 skrng uda banyak fitur…. thanx admin
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
izin copas gan
wah masih pusing aja ni dengan kode2 diatas, tapi saya akan tetap berusaha gan, terima kasih tutorialnya
Sama juga neh… walaupun agak puyeng2 tetep berusaha ye!!
Gan Cara menambah halaman bagaimana? terimakasih atas bantuannya..!!
menambah halaman? tinggal dicopy aja, dan alamat halaman yang tercopy tinggal di insert pada halaman utama :)
kalau mau ganti background gimana mas ?
saya tunggu jawabannya terima kasih
pada body set background
body { background-image: url(“paper.gif”); background-color: #cccccc; }
font ‘Droid Serif’ ny didownload y?
iya, ini kenapa namanya dunia nyekrip? hahaha
Ijin comot ama utak-atik y admin… thanx!!!
misi gan itu kalo responsive harus ada koneksi internet ya ??
tidak dibutuhkan gan… :)
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.
pelajari css pak, disini langsung praktek soalnya.. :)
Terimakasih admin artikel ini sangat membantu saya, saya mau menggunakan ini untuk template email, cara menggunakannya bagaimana ya?? mohon pencerahanya…!!!
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 ?
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
Terimkasih.
bang admin saya ingin bertanya untuk step ke 3 bagian Skrip CSS itu penempatannya di bagian mana
gan kalo mau diterapin di joomla gimana ya?
ada yabg buat toko online pak?
Saat ini memang membuat desain responsif itu penting. Soalnya jumlah pengguna mobile phone meningkat tajam :D
Mantap tutornya gan…sangat membantu.
kalau mau yang cepat, pakai aja template rancangan yg udah responsive. di blog aku ada lho responsive + seo 100% hehe
tempiate.blogspot.com
wuih…. bagus banget ni penjelasannya…
serasa bikin template sendiri jadinya
makasih gan info n pembelajarannya….
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
Maksudnya dicek logonya?
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….???
Ini sekedar template, belum CMS, jadi cari CMS dulu.
terimakasih tutornya gan…sangat membantu sedikit-sedikit jadi agak ngerti sekarang.
Gan, kalo itu kan halam depan web, kalau halaman artikelnya gimana. Jadi biar “Nyekrip more” nya kebuka ke halaman artikelnya
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 ?
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
contoh yang seperti apa ya?