Berhubung banyak yang request kepada saya untuk membuat tutorial responsive web design, maka dengan sangat terpaksa saya membuat tutorial tersebut. (Bercanda.. :p)
Apa Itu Responsive Web Design
Menurut contekan saya, yaitu wikipedia, definisi dari responsive web design atau kalau disingkat RWD adalah:
“A web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”
Nah, yang artinya… (buka kamus dulu) Suatu pendekatan desain dengan menciptakan website yang dapat memberikan pengalaman visual yang optimal, yaitu mudah dibaca dan mudah berpindah halaman dengan meminimalkan aksi user untuk melakukan zoom-in, zoom-out, menggeser-geser halaman, bahkan melakukan scrolling halaman, dan pengalaman yang optimal tadi dapat dinikmati bukan hanya di desktop, namun di semua device, termasuk tablet dan mobile device.
Nah loh tambah pusing kan? Intinya responsive web design itu suatu teknik baru untuk membuat website menjadi enak dilihat dan dinikmati oleh user bukan hanya di browser komputer, tapi juga di browser semua device baik itu tablet seperti ipad, galaxy tab, juga di mobile device seperti iphone, ipod, dsb.
RWD sebetulnya bukan teknik yang benar-benar baru, kalau tidak salah sudah ada sekitar 2 atau 3 tahun yang lalu, namun baru trend akhir-akhir ini, penyebabnya adalah.. Jeng-jeeeng.. karena sekarang device mobile, baik itu tablet ataupun mobile phone semakin tinggi tingkat penggunaannya dan juga penjualannya meningkat drastis, dan hal itu telah menyadarkan para pengembang website untuk menciptakan suatu teknik yang dapat memberikan user suatu pengalaman yang maksimal ketika membuka website dari mobile device mereka.
Logika Teknik RWD
Nah setelah mengetahui apa itu teknik RWD sekarang saya akan coba jelaskan seperti apa sih logika teknik ini.
Sebetulnya simple sekali, logikanya seperti ini…
Browser pertama kali harus cek ukuran browser (terutama lebarnya), kemudian menyesuaikan lebar tiap-tiap elemen yang ada di dalam website dengan ukuran lebar browser tersebut.
Contoh, apabila kita punya satu elemen image dimana lebarnya adalah 960px. Kemudian apabila dibuka di iphone (portrait), yang akan dilakukan oleh browser adalah mengecek ukuran screen iphone tersebut, browser kemudian menyadari.. oh.. ternyata ukuran lebar iphone adalah 640px, kemudian otomatis mengubah ukuran image yang semula lebarnya 960px menjadi 640px. Simple kan?!
Nah sebetulnya ukuran image tidak harus mengikuti ukuran lebar layar iphone, dapat disesuaikan sesuai keinginan kita. Namun pada umumnya RWD akan menyesuaikan dengan lebar layar device.
Bagaimana Caranya?
Ada 2 cara untuk implementasi teknik RWD ini, yang pertama adalah dengan cara manual, yang kedua dengan menggunakan framework RWD yang berserakan di dunia maya.
Dengan cara manual, kamu diharuskan untuk membuat framework css sendiri, biasanya cara manual dilakukan dengan meng-set width dari setiap elemen kedalam satuan persen (%), sehingga lebar dari elemen selalu mengikuti lebar parent element. Misalkan suatu div diberi lebar 100%, maka jika kamu me-resize browser, maka lebar div tersebut akan mengikuti lebar browser.
Pada tutorial kali ini saya tidak akan menggunakan cara pertama.. Hehe biasa agak malas aja kalau harus bikin framework sendiri. Oleh karena itu saya akan menggunakan satu framework yang memang sebagian besar project responsive web design saya tangani dengan framework ini.
Kita sebut saja namanya.. Bunga!! Lhoh (Kaya reportase kriminal nih)
Framework yang saya gunakan bernama “Skeleton” kamu bisa download di http://www.getskeleton.com. Sekarang download dahulu framework tersebut dan kita akan mulai tutorialnya.
Yuk Kita Mulai Dari Nol Ya!
Pertama kali kamu download framework skeleton, maka akan ada beberapa struktur file yang sudah tersedia disana.
Jika kamu langsung ingin mengunduh tutorial ini, kamu dapat mengunduhnya di link ini.
Di bagian “Project Files”, kamu dapat lihat bahwa ada 2 folder yang telah disediakan, yaitu folder “images” yang menyimpan file-file image, beberapa image sudah saya hapus, karena memang saya tidak memerlukannya pada tutorial ini, sedangkan ada 1 tambahan image dari saya, yaitu “banner.jpg”, kamu bisa mendapatkannya dari satu paket zip yang saya sertakan pada tutorial ini.
Kemudian folder kedua adalah folder “stylesheet”, folder ini berisi 3 file, yaitu:
- Base.css
Base css merupakan style normalize atau lebih dikenal dengan style reset. - Layout.css
Layout css merupakan style untuk menangani antar muka atau tampilan pada device yang berbeda-beda. Sebagai contoh misalkan kamu ingin menyembunyikan menu ketika website dibuka di ipad, maka kamu dapat mengaturnya di css ini. - Skeleton.css
Skeleton css ini merupakan core css dan harus ada, style ini secara otomatis akan mengatur layout tampilan website kamu, dan ini merupakan “embah” nya RWD website kita..![:)]()
Nah itu kok ada satu style lagi namanya “style.css”?! Oh iya.. itu style yang saya tambahkan sendiri untuk mengatur style website yang nanti kita akan buat. Jika di tempat kalian belum ada, maka tambahkan saja style tersebut.
Cepetan Sih!
Saya sudah mulai ngantuk nih harus jelasin satu-satu.. tapi ya demi teman-teman yang request saya lanjutin deh.. (bikin kopi dulu ya..)
Nah ngga usah berlama-lama, pada tutorial kali ini, kita akan membuat website dengan teknik RWD, tampilannya seperti ini:
Ngga susah kan? Saya coba buat sesederhana mungkin agar kalian dapat mengikuti tutorial ini dengan sukses.
Apa yang perlu kalian pelajari terlebih dahulu sebelum memulai tutorial ini? Yang paling utama adalah kalian harus tahu konsep “grid system” atau “960 grid system”. Jika kalian masih belum pernah mendengar konsep ini, saya sarankan kalian baca-baca dulu di google tentang konsep ini. (Saya tidak akan menjelaskan disini karena terlalu luas cakupannya, ngga cukup untuk dibahas sekaligus pada tutorial ini, dan juga saya tadi cuma buat kopi satu gelas, ngga cukup kayanya.. :p)
Intinya dengan grid system, kita dapat membuat layouting website menjadi sangat mudah, karena dari sisi designer dan developer web dari segi pengaturan layoutnya sudah sinkron.
Seruput Your Coffee and Let’s Start!
Sekarang buka file index.html, disana sudah tersedia struktur html dari framework skeleton. Nah di tempat saya beberapa script sudah saya hapus karena memang beberapa tidak berguna di tutorial ini.
Berikut kalian bisa lihat struktur index.html setelah saya sederhanakan.
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <!--<![endif]--> <meta charset="utf-8" /> Tutorial Responsive Web Design (RWD) <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link href="stylesheets/base.css" rel="stylesheet" /> <link href="stylesheets/skeleton.css" rel="stylesheet" /> <link href="stylesheets/layout.css" rel="stylesheet" /> <link href="stylesheets/style.css" rel="stylesheet" />
Nah sebelum kita lanjutkan untuk membuat layout di html, mari kita lihat struktur website kita terlebih dahulu:
Ada 8 block yang harus kita kerjakan di website kita nanti:
- Merupakan header, dan di dalam header akan ada block navigation yang berisi menu-menu utama website.
- Block navigation yang berisi menu-menu website.
- Banner yang berisi image banner website.
- Block Our Service.
- Block Connect With Us.
- Block Testimonials.
- Block Blog Feed, ceritanya akan menampilkan feed blog.
- Block Footer.
Setelah kita tahu struktur website kita, sekarang mari kita buat layout htmlnya dimulai dari block paling atas yaitu nomor 1 sampai block terakhir yaitu nomor 8. Fiuuh.. kita bakal melewati perjalanan yang panjang.. 
Block Header
Block header terdiri dari title website, dan navigation. Sekarang kita buat dulu titlenya. Buat satu kontainer.
</pre> <div class="container"> <div class="sixteen columns header"> <h1>Responsive Design</h1> </div> </div> <pre>
Nah mumpung sedang awal tutorial dan lagi hot-hotnya saya jelaskan sedikit tentang penggunaan grid system, pada tutorial ini menggunakan system 960 grid.
960 artinya bahwa width default website adalah 960px. Sedangkan grid system artinya di dalam width 960px tersebut dibagi menjadi beberapa kolom/grid. Pada framework skeleton secara default width 960px dibagi menjadi 16 kolom.
Setiap layout dibungkus oleh class “container” ini wajib ada. Sedangkan jika kamu ingin membuat 16 kolom, maka buat sebuah div dan beri kelas “sixteen columns”.
Contoh lain jika dalam satu kontainer kamu ingin membuat dua kotak yang sama lebar, berarti dari 16 kolom dibagi 2, yaitu masing-masing 8 kolom. Jadi kamu tinggal buat dua buah div, dan masing-masing div diberi class dengan nama “eight columns”.
Contoh lain lagi, jika dalam satu kontainer kamu ingin membuat 3 kotak, kotak pertama 3 kolom, kotak kedua 10 kolom, dan kotak ketiga 3 kolom. Maka kamu perlu membuat tiga buah div, div pertama diberi class “three columns”, div kedua diberi class “ten columns” dan div ketiga diberi class “three columns”.
Mudah bukan!
Block Navigation
Okay sekarang kita buat navigationnya. Karena navigation merupakan bagian dari header, maka saya masukkan ke dalam container yang sama dengan container title.
Jadi sekarang dibawah container “header” tambahkan container navigation sehingga script menjadi seperti berikut:
</pre> <div class="container"> <div class="sixteen columns header"> <h1>Responsive Design</h1> </div> <div class="sixteen columns navigation"> <ul> <li><a class="active" href="javascript:void(0);">Home</a></li> <li><a href="javascript:void(0);">About Us</a></li> <li><a href="javascript:void(0);">Blog</a></li> <li><a href="javascript:void(0);">Contact Us</a></li> </ul> </div> </div> <pre>
Okay, setelah selesai membuat block header, sekarang coba lihat di browser. Pasti tampilanya ancur lebur.. Haha..
Iya soalnya kita belum membuat stylenya. Sekarang coba buka file style.css, kemudian tambahakan style berikut ini.
body {
font-family: Arial;
font-size: 12px;
}
.header h1 {
font-family: "Calibri";
font-size: 38px;
padding: 10px 0px;
}
.navigation {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
.navigation ul {
margin: 0px;
padding: 0px;
}
.navigation li {
list-style: none;
list-style-type: none;
position: inline;
float: left;
margin: 0px;
padding: 2px;
margin-right: 5px;
}
.navigation li a {
padding: 5px 10px;
text-decoration: none;
background-color: #ccc;
}
.navigation li a:hover, .navigation li a.active {
background-color: #aaa;
}
Sekarang coba refresh browser dan lihat hasilnya. Jreng jreeeng.. sudah bagus kan headernya.
Block Banner
Oke sekarang kita lanjutkan ke block banner. Buka file index.html, dan kemudian tambahkan script berikut dibawah block “container” sebelumnya.
</pre> <div class="container"> <div class="sixteen columns banner"><img alt="" src="images/banner.jpg" /></div> </div> <pre>
Sekarang coba refresh browser dan lihat hasilnya. Tampilan akan menjadi lebih cantik karena ada banner imagenya sekarang.
Sekarang mari kita mencoba percobaan sederhana yang akan menghancurkan tampilan yang sudah kita buat..
Coba resize browser menjadi lebih kecil dari sebelumnya, maka yang terjadi adalah, ukuran banner akan tetap, dan tidak berubah yang menyebabkan tampilan banner seperti terpotong.
Nah tampilan seperti banner seperti ini bukanlah tampilan yang responsive, karena untuk disebut responsive, banner harus dapat menyesuaikan ukurannya dengan ukuran layar atau ukuran browser.
Untuk membuatnya responsive, mari kita tambahkan satu script di style.css kita.
Tambahkan style berikut:
.banner img {
width: 100%;
}
Simpan style.css dan refresh browser. Kemudian coba resize ukuran browser. Maka yang terlihat sekarang adalah ukuran banner akan mengikuti atau menyesuaikan dengan lebar browser. Inilah salah satu contoh “Responsive yang benar”
Block Our Service, Connect With Us dan Testimonials
Untuk ketika block diatas, karena berada di dalam satu container, maka saya jadikan satu sub judul biar ngga pusing.
Okay sekarang buka file index.html dan tambahkan script berikut dibawah “container” terakhir.
</pre> <div class="container mid-content"> <div class="one-third column"> <h1>Our Services</h1> Adipiscing vel augue ridiculus nascetur etiam natoque magna, hac! In facilisis augue duis placerat elementum aliquet quis, platea ut purus lacus egestas pulvinar natoque non a montes lorem penatibus magnis egestas ridiculus facilisis.</div> <div class="one-third column"> <h1>Connect With Us</h1> Adipiscing vel augue ridiculus nascetur etiam natoque magna, hac! In facilisis augue duis placerat elementum aliquet quis, platea ut purus lacus egestas pulvinar natoque non a montes lorem penatibus magnis egestas ridiculus facilisis.</div> <div class="one-third column"> <h1>Testimonials</h1> Adipiscing vel augue ridiculus nascetur etiam natoque magna, hac! In facilisis augue duis placerat elementum aliquet quis, platea ut purus lacus egestas pulvinar natoque non a montes lorem penatibus magnis egestas ridiculus facilisis.</div> </div> <pre>
Nah sekarang lompat lagi ke 960 grid system, selain menggunakan jumlah kolom yang fixed atau pasti seperti “sixteen columns”, “ten columns”, “three columns”, kita juga dapat menggunakan class jumlah kolom yang tidak fixed, seperti contoh diatas, ketiga block menggunakan class “one-third column”. Artinya 1/3 dari total kolom yaitu 16.
Oke, sekarang kita tambahkan style untuk ketiga block tersebut. Buka style.css dan tambahkan style berikut:
.mid-content h1, .blog-feed h1 {
font-family: "Calibri";
color: #333;
font-weight: bold;
font-size: 20px;
padding: 0px;
margin: 0px;
}
.mid-content {
margin-bottom: 10px;
}
Refresh browser, dan lihat hasilnya. Bagaimana? Mudah bukan menggunakan grid system. Layout langsung tertata rapi.
Block Blog Feed
Sekarang kita akan tambahkan block berikutnya yaitu block “Blog Feed”. Buka index.html, dan tambahkan script berikut setelah container terakhir.
</pre> <div class="container blog-feed"> <div class="sixteen columns"> <h1>Blog Feed</h1> A platea diam! Et magna, purus in montes aliquam magnis elementum ac rhoncus tempor, cum turpis elementum platea rhoncus tincidunt nec sit magna. Tincidunt porta dictumst? Sit lectus ac, augue et porta! Turpis nisi sagittis ridiculus nunc lectus natoque, parturient pellentesque parturient mattis augue montes pellentesque cum sagittis, augue facilisis a, adipiscing nunc tempor amet, natoque. Placerat aenean, diam, placerat porttitor nisi pulvinar non platea mauris magnis natoque platea, habitasse porttitor, sociis hac pulvinar, lorem, adipiscing sit scelerisque pulvinar magna ut amet lacus, eros habitasse, augue cum pulvinar, porttitor. Habitasse tortor sociis scelerisque urna! Porttitor dis a eu dapibus arcu magna sit porttitor a pellentesque duis pellentesque, integer amet nisi? In. Phasellus placerat? Rhoncus egestas cursus et. Natoque. Eros.</div> </div> <pre>
Sekarang buka style.css dan tambahkan style berikut.
.blog-feed {
background-color: #f1f1f1;
margin-bottom: 20px;
}
Simpan dan refresh browser untuk melihat hasilnya.
Block Footer
Setelah melewati beberapa langkah-langkah yang menegangkan.. hayaah.. Sekarang kita menuju ke langkah terakhir, yaitu membuat block footer.
Buka index.html dan tambahkan script berikut setelah container terakhir.
</pre> <div class="container footer"> <div class="sixteen columns">Copyright 2013 © All Rights Reserved</div> </div> <pre>
Sekarang tambahkan stylenya di file style.css
.footer .columns {
text-align: center;
font-size: 14px;
font-weight: bold;
font-family: "Calibri";
}
Perfectionist.. Boleh Dong!
Sudah selesaikah kita? Hmm.. saya rasa, kita harus cek lagi untuk memastikan tampilan kita benar-benar bagus. Bagaimana menurut kalian? ☺
Okay, sekarang yang saya lakukan adalah dengan melakukan resize browser dan melihat apakah ada yang kurang enak dilihat, dan saya menemukan 2 hal yang tidak enak dimata saya ketika browser diresize ke ukuran yang lebih kecil.
Nah sekarang kita lihat screenshot dari website untuk tiap-tiap lebar browser.
Coba dilihat, apakah ada yang aneh dan kelihatan ngga enak dilihat?
Kalau saya ada dua hal, dan semuanya ada di tampilan paling akhir. Yang pertama adalah “tidak adanya jarak” antara navigasi atau menu dengan banner website.
Coba lihat screenshot berikut.
Seharusnya ada jarak antara menu dengan gambar banner. Oke sekarang kita tambahkan style untuk mengatasi hal ini.
Buka folder “stylesheets” dan buka file “layout.css”. Sebelum kita tambahkan style baru, saya mau jelaskan fungsi dari layout.css dahulu. Ketika kalian buka dan lihat scriptnya, terdapat beberapa style template yang sudah tersedia, yang kita perlu perhatikan adalah bagian “media query”
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
Nah tiap-tiap media query sudah ada keterangannya, pada kasus kita kali ini, kita akan tambahkan style pada media query “All Mobile Sizes”, yaitu browser atau device dengan lebar kurang dari 767px. Artinya apabila terdeteksi ukuran layar device kurang dari 767px, maka style yang ada di dalam media query tersebut akan dijalankan.
Okay sekarang tambahkan style berikut:
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.banner img {
margin-top: 15px;
float: left;
}
}
Refresh browser dan lihat hasilnya. Sekarang sudah ada ruang pemisah antara navigasi dengan banner.
Ada satu lagi yang saya kurang suka dengan tampilan terakhir, yaitu pada bagian “blog feed”. Jarak antara tulisan dan kotak terlalu kecil, sehingga terlihat kotak jadi sangat sempit.
Sekarang kita tambahkan lagi style di layout.css, tepat dibawah style yang sebelumnya.
@media only screen and (max-width: 767px) {
.banner img {
margin-top: 15px;
float: left;
}
.blog-feed {
padding: 10px;
}
}
Sekarang refresh browser. Tampilan blog feed jadi lebih enak dilihat.
Let’s Take A Break
Selesai sudah tutorial panjang kita kali ini untuk membuat sebuah website sederhana dengan teknik Responsive Web Design atau RWD. Untuk melihat hasil keseluruhannya, kamu bisa resize browser dari ukuran default hingga ukuran yang lebih kecil, maka website akan secara otomatis menyesuaikan tampilan sesuai dengan lebar browser.
Dengan menggunakan framework RWD yaitu “skeleton”, kita dapat membuat layout responsive dengan sangat mudah. Tentu saja tutorial kali ini sangat sederhana jika dibandingkan dengan project RWD yang ada di industri web di luar sana. Namun paling tidak kita dapat mengerti apa itu responsive web design dan seperti apa penerapannya. Semoga tutorial kali ini bermanfaat buat kalian.
Selamat Mencoba!
Download file tutorial ini pada link ini.
The post Tutorial Responsive Web Design appeared first on Stoepy.