Tutorial Cara Membuat Desain Web Responsive

TWD Editorial URL:https://www.tutorial-webdesign.com/OVLS8
January 21st, 2015 Tutorial, Web Design 51 Comments

Tutorial cara membuat desain web responsive — Pada tulisan kali ini TWD akan menjelaskan secara singkat bagaimana cara membuat layout website yang responsive yaitu layout yang bisa menyesuaikan tampilannya meskipun dibuka di berbagai ukuran layar (ponsel, tablet maupun pc).

Artikel ini adalah lanjutan dari pembahasan responsive web, sebelumnya kita sudah berkenalan dengan responsive web, lalu setelah itu kita membahas secara lengkap apa manfaat dan kegunaan responsive web untuk bisnis anda, selanjut pada artikel ini kita belajar bagaimana cara membuat desain web responsive itu sendiri.

Tujuan Artikel Ini

Pada tulisan ini kita akan mencoba membuat layout web responsive, dimulai dengan layout 3 kolom, lalu ketika dibuka di ukuran tertentu (1080px) maka akan menjadi 2 kolom, dan selanjutnya pada layar 780px kebawah akan menjadi 1 kolom.

Anda bisa perhatikan perubahannya pada gambar dibawah ini:

Pertama Buat Script HTML

Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3 class utama, dan karena kita akan membuat 3 kolom maka pada class .main akan kita bagi menjadi 3 class yaitu .left, .middle dan .right, setiap class nanti diberi ukuran tertentu dan diberi properti float agar membentuk kolom.

class header
class main ( terdiri dari class “.left”, “.middle” dan “.right”
class footer

<div class="container">
	<div class="header">Untuk bagian header...</div>
	<div class="main">
		<div class="left">Untuk kolom bagian Kiri...</div>
		<div class="middle">Untuk kolom bagian tengah...</div>
		<div class="right">Untuk kolom bagian kanan...</div>
	</div>
	<div class="footer">Untuk bagian footer...</div>
</div>

Untuk bagian head dari HTML jangan lupa di beri tag meta viewport, tag nya seperti ini:

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

Sisipkan meta viewport didalam tag head

Mengatur Layout Dengan CSS

Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.

.container{
	max-width: 1080px;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;
}

.header{
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
}

/* Main */
	.left{
		width: 250px;
		border: 1px solid #dedede;
		background: #e5e5e5;
		padding: 10px;
		margin: 10px;
		float: left;
	}

	.middle{
		width: 500px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
		.middle img{
			max-width: 100%;
			height: auto;
		}

	.right{
		width: 250px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}

.footer{
	clear: both;
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
}

Mengatur Gambar Agar Menyesuaikan Layout

Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.

.middle img{
	max-width: 100%;
	height: auto;
}

Menjadi 2 Kolom Ketika di Tablet.

Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query @media screen and (max-width: 1080px) yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.

@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}
	.left {
		width: 25%;
		background: #fff000;
	}
	.middle {
		width: 68%;
		float: right;
	}
	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
}

Kode CSS diatas bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom kiri menjadi berwarna kuning, atau bisa juga merubah ukuran font, bahkan warna font, seperti yang kita lihat di class .left, ditambahkan background: #fff000; untuk merubah background menjadi warna kuning.

Menjadi Satu Kolom Ketika di Ponsel

Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.

@media screen and (max-width: 780px) {
	
	.header, 
	.footer{
		text-align: center;
	}
	.left {
		width: auto;
		float: none;
	}
	
	.middle {
		width: auto;
		float: none;
	}
	
	.right {
		width: auto;
		float: none;
	}

}

Pada kode css diatas tidak ditentukan lagi lebar kolom, semua div dibuat width: auto yang artinya dibuat memenuhi lebar layar, akhirnya terbentuk lah layout yang hanya satu kolom.

Begitulah cara sederhana membuat layout responsive, kami hanya menjelaskan prinsip dasar nya agar mudah dimengerti, jadi layoutnya dibuat sangat sederhana. Untuk project yang serius anda bisa mengembangkan lagi dengan elemen-elemen yang lain.

Untuk elemen-elemen berikutnya seperti menu responsive, video responsive, dan lainnya mungkin akan kita bahas di artikel-artikel berikutnya.

Jika anda tertarik untuk mencoba dan membuat sendiri anda bisa melihat script lengkapnya berikut ini.

DEMO | DOWNLOAD SCRIPT

Sekain tutorial kali ini, semoga membantu anda memahami cara pembuatan layout responsive agar website anda bisa dibuka di berbagai ukuran layar.

Salam Web Design Indonesia

Follow @tut_web

Tags:

Sort URL https://www.tutorial-webdesign.com/OVLS8
Back To Top

Penulis :

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

http://tutorial-webdesign.com

Comments

51 thoughts on “Tutorial Cara Membuat Desain Web Responsive”

Freddy says:

January 21, 2015 at 12:52

Suhon akeh pak de, tak tinggal makan siang dulu deh :D

Thanks alot :D

Reply
- hongkongpools says:
  
  April 4, 2017 at 11:26
  
  oke
  
  Reply
Freddy says:

January 21, 2015 at 16:16

oh gambar memang selalu bermasalah ketika responsive, tapi pertanyaaku adalah

.middle img{
max-width: 100%;
height: auto;
}

kalau heightny nya auto nyambung tapi kalau max-width:100% blm nyambung aku ? tapi tak baca haulu, mauliate gan :)

Reply
- aditya abdul says:
  
  February 12, 2015 at 05:56
  
  kalo width 100% itu artinya width atau lebar gambar seblebar 100% dari area yang ditentukan. Kalo ga ada div lain ya berarti gambar memiliki lebar 100% selebar body tsb :)
  
  Reply
  - TWD Editorial says:
    
    February 13, 2015 at 07:02
    
    Max-width berbeda dengan width
    
    Reply
    - Alfran says:
      
      March 20, 2015 at 13:37
      
      Perbedaannya dimana min?
      Blum tau nih.
      
      Reply
      - diky says:
        
        October 26, 2017 at 13:22
        
        max-width: nilai maximal lebar , maximal lebarnya berapa
        width: nilai lebar, nilai yang ditetapkan
agprasha says:

January 21, 2015 at 17:39

gan kalo mau bikin background header yg responsive bisa gan?

Reply
- TWD Editorial says:
  
  January 21, 2015 at 17:51
  
  Kan itu sudah di contohkan header nya responsive.
  Atau coba ikuti tutorial ini -> http://www.tutorial-webdesign.com/membuat-template-web-portfolio-dengan-html5-css3-dan-jquery/
  
  Reply
ScyferDz says:

January 24, 2015 at 01:07

Hi TWD..
sangat inspiratif tulisan & karya-karya disini..

mau minta saran / masukan dong..
ada niatan mau bikin web untuk instansi pemerintah.
yang sederhana saja seperti lainya..

bisa diarahkan untuk template yang sesuai?
# terimakasih sebelumnya..

Reply
- TWD Editorial says:
  
  January 25, 2015 at 00:02
  
  Biasanya kami membuat sendiri template, kalau mengacu ke website lain silahkan dicari sendiri karena kami tidak mungkin merekomendasikan theme lain yang khusus membahas hal tersebut :), kan tinggal lihat website instansi pemerintah yang lain yang serupa, atau liat dari negara2 lain
  
  Reply
4 Alat Untuk Mengecek Performa dan Waktu Loading Web Versi Mobile | Jurnal Web Indonesia Jurnal Web says:

January 27, 2015 at 16:30

[…] Tutorial Cara Membuat Desain Web Responsive […]

Reply
- rey says:
  
  December 29, 2017 at 21:01
  
  sangat membantu sekali
  kalau boleh pasang artikel yang bahas tentang form untuk order transaksi gitu dong yang pakek logika :)
  
  Reply
arif ab says:

January 30, 2015 at 16:18

Kalau mau ditambahkan table responsive, maka bagaimana caranya?
supaya kalo ingin di lihat di hp tidak harus di scroll.

thanks.

Reply
arfan says:

January 30, 2015 at 18:06

Mksh gan buat ilmu’y… Ijin sedot yahhh

Reply
exploraxi says:

February 8, 2015 at 02:43

Sekarang responsive design memang tak bisa dipungkiri menjadi trend di dunia web. Terima kasih atas insightful information yang diberikan.. salam kenal.. salam explorer! Kunjungi blog saya ya.. di exploraxi.wordpress.com

Reply
heri setiawan says:

February 10, 2015 at 09:05

thanks gan,,pass banget buat newbie yg lg belajar desain website.

Reply
Muhammad Faisal says:

March 15, 2015 at 21:32

Keren gan thank’s buat tutornya…. :)

Reply
Ghazali Wasimun says:

April 15, 2015 at 10:27

Gan, boleh izin pakai desain nya gak ?
Mau bikin desain web, tapi bingung desain nya gimana, desain Agan keren, Ane berniat ngembangin desain Agan, buat proyek desain web Ane…

Reply
- TWD Editorial says:
  
  April 16, 2015 at 12:13
  
  Desain yang mana maksudnya ya?
  
  Reply
Alam Wisata.Com says:

April 18, 2015 at 15:08

Tutorial yg bermanfaat buat newbie. Terus menyimak.

Reply
Eza Dwi Anandharizky says:

April 24, 2015 at 12:00

Terima kasih infonya bermanfaat,

Reply
Obat Koleterol Tinggi Herbal says:

May 11, 2015 at 15:52

Terimakasih agan informasinya :)

Reply
adit says:

May 12, 2015 at 11:27

mw tanya gan, artikel ini kan dari segi coding, kalau responsive dari segi desain (tampilan) bagaimana? thanks

Reply
- TWD Editorial says:
  
  May 13, 2015 at 11:12
  
  responsive itu memang koding, karena itu terletak pada css nya :) mungkin nanti pembahasan tentang ini akan kami kembangkan lagi agar lebih lengkap
  
  Reply
3 Langkah Dasar Membuat Desain Web Responsive | Tutorial Web Design says:

June 10, 2015 at 08:18

[…] Itulah beberapa tahap penting untuk membuat website menjadi responsive, jadi perlu diperhatikan adalah bagian meta tag dan media query di css agar website bisa tampil proporsional, ini tentu hanya teorinya saja, untuk cara contoh cara membuatnya Anda bisa baca tulisan sebelumnya yang berjudul Tutorial Cara Membuat Desain Web Responsive. […]

Reply
Bli Putu Bali says:

July 8, 2015 at 16:40

Sangat bermanfaat dan terimakasih boss… :-)

Reply
teguhsiswanto says:

July 12, 2015 at 12:30

mathur suwun mas tipis&carane ,
s1j

Reply
- teguhsiswanto says:
  
  July 12, 2015 at 12:32
  
  typo * tipis&carane ,
  
  Reply
kaos anak says:

November 26, 2015 at 22:35

makasih gan, web saya mau saya jadiin responsiv

Reply
Sayyid says:

December 4, 2015 at 14:56

Gan kalau ane lihat itu posisi menu ada di sebelah kiri, bagaimana kalau kita ingin merubah agar blok menu posisinya ada di sebelah kanan, apa yang harus dirubah gan? Tq atas jawabannya

Reply
Alsaskar says:

March 17, 2016 at 15:54

Terima kasih gan atas tutorialnya, sangat bermanfaat sekali.

Reply
toro says:

March 18, 2016 at 20:05

keren gan… di tunggu kunbalnya…

Reply
Santri Drajat says:

April 14, 2016 at 20:43

Izin download mas… :)

Reply
Gps Tracking says:

May 2, 2016 at 16:36

Mantapp sob. Website responsive sangat membantu untuk pengguna gadget dan device elektronik.

Reply
Alvie says:

August 5, 2016 at 08:46

Thanks banget untuk tutorialnya, sangat bermanfaat tentunya…
Skrng web responsif penting banyak, soalnya internet diakses dari berbagai macam gadget

Reply
ambar says:

September 17, 2016 at 10:05

izin download ya, maksih

Reply
Joe says:

December 9, 2016 at 12:34

Bang. script nya saya copy ke notepad saya dan jika dijalankan ko nggak bagi 3 yaa?

Reply
warung belajar says:

January 4, 2017 at 08:18

gan ini gak pakai bootstrap ya ? berarti bener bener pure di css dan htmlnya ya mas ?

Reply
- TWD Editorial says:
  
  January 7, 2017 at 22:11
  
  Betul sekali, ini murni dan tidak menggunakan framework
  
  Reply
Aneuk Santri says:

January 13, 2017 at 13:56

Izin copy dan sya praktek,, dan izin sya untk men download nya

Reply
ulakgutul says:

February 21, 2017 at 18:45

Gan, ini berlaku gak untuk web wordpress…?

Reply
dian says:

March 1, 2017 at 18:48

Izin download yah, saya mau coba tutornya min

Reply
Ulakgutul says:

March 18, 2017 at 12:14

Makasih gan…
sangat berguna untuk penyusunan tugas akhir saya hehehe

Reply
Jijin says:

March 18, 2017 at 12:15

Apakah kode ini bisa di pergunakan untuk Web statis gannn?

Reply
- TWD Editorial says:
  
  March 29, 2017 at 00:25
  
  Bisa
  
  Reply
Farras Alhafizh says:

July 21, 2017 at 23:56

Terimakasih untuk tutorialnya min ..sangat bermanfaat bagi saya pribadi…

Reply
w_laoli says:

August 18, 2017 at 14:00

ijin sedot dan ijin meresapi webnya gan ….

Reply
hendra says:

February 10, 2018 at 21:57

terima kasih atas tutorialnya min.sangat berguna sekali untuk saya.ijin download ya min.

Reply
Cara Manual says:

March 20, 2018 at 15:01

ukurang max-width yang responsive berapa aja sih? saya rasa 780px masih terlalu lebar ini cocok untuk tablet, kalau untuk smartphone ukuran 4-6 inch berapa pixel ya?

Reply
- TWD Editorial says:
  
  March 25, 2018 at 20:57
  
  Untuk smartphone biasanya mulai dari 480 kebawah
  
  Reply