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

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;

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.

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

Selanjutnya kita setting style untuk div #wrapper, kita berikan lebar width: 90%;.

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.

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

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.

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!

About The Author

Comments

  1. mozart

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

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

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

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

  5. railondi

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

  6. 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..?!?!?

  7. Ahmad Zaelani

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

    1. Admin Article Author

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

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

  9. Agan Sufyan

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

    1. Admin Article Author

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

    1. Admin Article Author

      pada body set background

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

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

  11. Lutvi

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

  12. 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 ?

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

Tinggalkan Balasan

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