• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

3 Langkah Membuat Desain Web Responsif (Responsive Design)

24‘13
March

info69.jpg

Perkembangan tekhnologi saat ini membuat desain web yang responsif menjadi suatu teknik desain web yang harus mulai anda lakukan saat ini. Tentunya website anda ingin tampil dan terbaca baik di berbagai device dengan ukuran layar yang berbeda-beda seperti notebook, tab, smart phone dan device lainnya.

Responsive Design merupakan suatu teknik desain yang membuat website dapat tampil dengan baik di berbagai browser dengan ukuran layar yang berbeda, jika Anda baru mendengar kata desain responsif, berikut ini merupakan beberapa contoh website yang menerapkannya : Head London, Food Sense, Bitfoundry, Ethan Marcotte, CSS Tricks.

Untuk pemula, desain responsif mungkin terdengar agak rumit, tetapi sebenarnya sangat sederhana. Untuk membantu Anda dengan cepat memulai desain responsif, disini saya akan menjelaskan tentang logika dasar desain responsif dengan 3 langkah desain, tentunya dengan asumsi bahwa Anda memiliki pengetahuan dasar CSS yang baik.

Langkah 1. Mendefinisikan Meta Tag Desain Responsif

Kebanyakan mobile browser mengatur skala halaman html selebar viewport, sehingga dapat tampil pas di layar mobile. Anda dapat menggunakan tag meta viewport untuk me-reset ini. Tag viewport digunakan untuk memberitahu browser untuk menggunakan lebar perangkat sebagai lebar viewport dan menonaktifkan skala awal. Sertakan meta tag ini di bagian <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

MS Internet explorer versi 8 dan yang lebih rendah tidak support tag di atas, anda bisa menggunakan bantuan media-queries.js atau respond.js di IE dengan tag sebagai berikut:

<!--[if lt IE 9]>  	
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

Langkah 2. Menentukan Struktur HTML

Pada langkah ke-2 ini saya membuat struktur html dengan header, content, sidebar dan footer. Untuk header saya memberikan tinggi 200 pixel, untuk content saya memberikan lebar 660 pixel dan untuk sidebar saya memberikan lebar 300 pixel sehingga lebar keseluruhan adalah 960 pixel.

Langkah 3. Membuat Media Query

CSS3 adalah trik untuk membuat desain web yang responsif. Dalam CSS3 untuk membuat trik ini sama halnya seperti di dalam pemrograman dengan membuat suatu kondisi (if), dimana CSS3 memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang telah di set lebarnya.

Contoh trik CSS3 dibawah adalah untuk lebar viewport khusus berukuran 980 pixel atau dibawahnya. Pada dasarnya untuk trik ini kita membuat semua lebar container html seperti header, content dan yang lainnya kedalam nilai prosentase, sehingga halaman html flexible mengikuti layar browser.

/* Jika berukuran 980px atau kurang*/
@media screen and (max-width:980px) {
	#pagewarp {
		width:96%;
	}
	#content{
		width:66%;
	}
	#sidebar{
		width:30%;
	}
}

Untuk viewport berukuran 700 pixel atau kurang, tentukan ukuran content dan sidebar keukuran auto width dan disable float sehingga akan tampil sejajar kebawah menikuti lebar layar

/* Jika berukuran 700px atau kurang*/
@media screen and (max-width:700px) {
	#content{
		width:auto;
		float:none;
	}
	#sidebar{
		width:auto;
		float:none;
	}
}

Untuk viewport berukuran 480 pixel atau kurang seperti ukuran-ukuran perangkat handphone, sembunyikan sidebar dan set ukuran tinggi header menjadi auto

/* Jika berukuran 480px atau kurang*/
@media screen and (max-width:700px) {
	#header{
		height:auto;
	}
	#sidebar{
		display:none;
	}
}

Contoh diatas hanyalah dasar dari responsive desain yang bertujuan untuk memberikan tampilan yang berbeda untuk setiap ukuran viewport, anda bisa saja menambahkan query seperlunya sesuka anda pada desain responsive anda.

Selamat berkreasi, semoga bermanfaat.

Anda juga mungkin suka dengan artikel ini :

  1. Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3
  2. Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)
  3. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
  4. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3
  5. Tips dalam Menuliskan CSS yang Baik

Komentar

  • arif suwari (24 Oct 2016 09:09:38)

    thank`s

  • dodol (14 Oct 2016 05:20:17)

    kalau niat berikan ilmu kepada oran g lain buat web tersebut tulisan bisa dicopy agar bisa bermanfaat untuk orang lain

  • Jack (10 Oct 2016 08:45:04)

    Kangennnn codiiiiing :(

  • venomku (29 Sep 2016 08:56:25)

    wah pengen jadiin blog responsive tp lihat langkahnya pusying hehe

  • (18 Aug 2016 03:58:04)

» Muat Komentar Sebelumnya (73 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff