Layout responsive adalah tampilan layout web yang akan mengalir mengikuti ukuran layar yang digunakan oleh pengunjung web tanpa membuat layout jadi berantakan. Membuat layout responsive sudah menjadi standar design web saat ini. Jika berbicara tentang desain web, maka tentulah yang dimaksud adalah desain web yang responsive.

Masa Sebelum Desain Responsive

Mungkin perlu sedikit kilas balik tentang desain responsive. Sebelum muncul teknik desain layout responsive, setiap pemilik web harus mendesain web-nya untuk berbagai macam ukuran resolusi layar komputer. Saat itu, satu-satunya alat yang digunakan untuk mengakses web adalah layar komputer desktop atau laptop. Ukurannya layar saat itu relatif seragam pada resolusi 800×600 px atau 1024×768 px.

Masalah kemudian muncul saat handphone bisa digunakan untuk mengakses internet. Layar handphone yang kecil dengan resolusi 320x240px atau lebih kecil lagi tentu akan membuat pengunjung web harus melakukan scroll ke kiri dan ke kanan untuk membaca content web itu. Sangat tidak nyaman. Solusi saat itu, membuat web untuk berbagai macam layar yang berbeda. Tentu ini sangat mahal biaya maintenancenya.

Masa Layout Desain Responsive

Dengan munculnya HTML 5 dan CSS 3, maka desainer web semakin dimudahkan. Karena cukup mendesaian web yang berjalan di semua resolusi layar. Mulai dari layar handphone, smartphone, tablet, sampai layar komputer desktop. Desain layout yang bisa merespon perubahan resolusi disemua rentang resolusi layar ini, disebut sebagai design responsive atau web responsive. Tentu ini akan lebih murah dan lebih mudah baik bagi perusahaan ataupun bagi pengembang web. Nah, bagaimana membuat membuatnya?

Materi Layout Web Responsive

Sebulan terakhir ini saya rutin menimba ilmu dari Team Treehouse , yaitu sebuah online learning yang lagi booming saat ini. Belajar di Team Treahouse membuat saya mengetahui  cukup banyak perkembangan ilmu css dan html saat ini dibandingkan dulu saat saya belajar HTML 1. Metode pelajarannya berdasarkan track. Jika tujuanmu ingin menjadi web desainer, maka akan langsung diberikan track pembelajaran yang harus kamu selesaikan. Jika kamu ingin menjadi PHP programmer, maka kamu akan diberikan track untuk menjadi programmer PHP yang handal, dst. Sepertinya sama dengan online learning biasa? Ga kok, ini benar-benar berbeda. Apa aja?

• Desain web adalah ilmu yang selalu berkembang dengan sangat cepat. Saat ini desain responsive menjadi trend. Mungkin tahun depan akan menggunakan flexbox, svg, dan sederet istilah alien lainnya. Team treehouse selalu melakukan update pada modul pembelajaran mereka.
• track yang jelas dalam mencapai tujuan pembelajaran. Ini akan sangat membantu kita dalam mengaitkan materi-materi yang telah diterima untuk mencapai tujuan awal kita belajar.
• video dengan subtitle. Ya, ini salah satu kendala kita kebanyakan orang indonesia yang tidak biasa mendengarkan orang asing (native speaker) berbahasa inggris. Termasuk saya. Tapi dengan adanya subtitle, benar-benar sangat membantu memahami pelajarannya.
• Quiz dan latihan setiap beberapa materi selesai. Sebaiknya kamu jangan melewatkan quiz dan latihan ini. Untuk menjamin bahwa kamu benar-benar memahami materi pelajaran yang diberikan.
• Success story. Banyaknya sukses story para murid team treehouse membuat saya yakin kualitas pelajaran yang diberikan.

Tentu saja, ini tidak gratis 😀 . Minimal setiap bulan kamu perlu menyiapkan $25 atau sekitar Rp. 325.000 (kurs 13 ribu). Jumlah yang relatif cukup terjangkau untuk materi yang begitu melimpah. Ada ribuan dan kamu bisa mengaksesnya bahwa mendownloadnya untuk di tonton secara offline kalo mau.Biaya ini menurut saya cukup murah jika mau dibandingkan dengan beberapa kursus programmer di Jakarta.

Mungkin kamu bisa belajar secara otodidak, tapi tidak semua orang mampu belajar otodidak terutama saat mengalami kesulitan. Kemana harus bertanya? Bertanya di forum, itu pun terbatas karena semua menjawab dengan sukarela. Makanya saya memilih belajar di Team Treehouse  yang guru-gurunya sangat membantu jika kita mengalami kesulitan. Beberapa materi pelajaran di team treehouse akan saya gunakan untuk menjelaskan layout desain web responsive tapi saya rangkum saja. Hitung-hitung mengulang pelajaran 😉 Oh ya, kamu bisa lihat profile saya di Team Treehouse.

Untuk bisa mengikuti tutorial membuat layout web responsive ini, kamu bisa mendownload materi awal dibawah ini. Download file dibawah kedalam satu folder. Setelah download, hilangkan dulu extension odt. Maklum, wordpress gratisan ga terima file zip 😦

• tes.html rubah nama file menjadi tes.html
• tes.css rubah nama file menjadi tes.css
• normalize.min.css rubah nama file menjadi normalize.min.css
• free-picture2.jpg rubah nama file menjadi free-picture2.jpg

Membuat Layout Responsive

Flow kerja dalam membuat layout responsive adalah mendesain dari layar yang lebih kecil terlebih dahulu yaitu layar handphone. Secara umum 3 konsep yang harus kamu pahami dalam membuat web responsive adalah

1. Fluid Grids
2. Fluid Images
3. Media queries

Fluids Grids

Jika kamu ingin tampilan web yang mengalir dengan baik saat ditampilkan dengan layar yang kecil, maka sebaiknya kamu menghindari pemakaian unit atau satuan yang tetap seperti px (atau piksel). Unit yang sebaiknay kamu gunakan sebaiknya adalah % atau em untuk font.

Contoh: Buka file tes.css. Pada baris 27, saya telah merancang panjang menu sebesar 1152px  pada layar komputer yang saat ini saya gunakan. Tampilan menu di layar komputer saya adalah seperti gambar di bawah ini.

Saya harus mengkonversi panjang 1152px kedalam satuan % agar tampilannya relatif sama dengan lebar layar laptop saya. Layar laptop saya menggunakan resolusi 1280px. Maka untuk mengkonversinya adalah

Panjang menu / resolusi layar komputermu

(1152px / 1280px) x 100 = 90%

Jadi kamu harus mengganti satuan width: 1052px (pada baris 27) menjadi

width: 90%;

Bagaimana mengetahui resolusi layar komputermu? Liat di control panel dong 🙂

Sekarang saatnya kita mengetes, apakah menu yang telah dirancang akan responsive saat perubahan resolusi layar. Sebaiknya kamu menggunakan Firefox atau Google Chrome untuk melakukan pengetesan ini. Karena browser tersebut memiliki menu developer view. Karena saya menggunakan firefox, maka tinggal klik menu Developer » Responsive design view

Silahkan geser ke kiri dan ke kanan untuk melihat perubahan panjang menu. Panjangnya akan selalu sebesar 90% dari lebar layar bukan?

Fluid Images

Untuk membuat fluid image yang responsive terhadap perubahan resolusi layar maka kamu cukup menggunakan max-width: 100% pada element <img> Sekarang kamu tambahkan pada baris 75 pada file tes.css

max-width: 100%;

Silahkan di tes kembali, maka lebar gambar akan otomatis berubah menyesuaikan resolusi layar.

Media Query

Desain yang kita buat diawal berdasarkan lebar layar komputer saya yaitu 1152px yang kemudian di konversi menjadi persentase. Tapi sangat jarang, bahkan tidak ada, layar smartphone yang lebar layarnya sampai 1152px. Pada bagian fluid design, kita telah  menyusun menu secara vertikal. Seharusnya kita bisa memanfaatkan tambahan resolusi layar dengan mengatur kembali menu menjadi horizontal saat lebar layar bertambah. Disinilah perlunya media query yang akan mendeteksi perubahan lebar layar. Jadi kamu tidak perlu lagi membuat script javascript untuk mendeteksi perubahan lebar layar. apalagi membuat sub domain sendiri utk responsive mobile. Cukup menggunakan css.

Untuk menggunakan media query, sebaiknya kita mulai dari lebar layar dari yang paling kecil sampai ke yang paling besar yaitu layar komputer desktop. Sejak awal, kita telah mendesain menu untuk layar handphone yang paling kecil dengan menyusun menu secara vertikal. Untuk memanfaatkan penambahan lebar layar, maka kita perlu mengatur media query sbb:

• mulai dari ukuran layar 480px  sampai dengan resolusi layar 767px untuk layar smartphone.
• mulai dari ukuran layar 768px untuk resolusi layar ipad, tablet, dan komputer desktop.

Buka kembali file tes.css dan tambahkan kode berikut ini pada baris 82 dibawah Media query

@media only screen and (min-width: 480px) {
  nav a {
    float: left;
    width: 30%;
    margin: 0 0 0 5%;
    padding: 25px 1%;
    margin-bottom: 0;
  }
  nav li:first-child a {
    margin-left: 0;
  }
  nav li:last-child a {
    margin-right: 0;
  }

}

Saya tidak akan menjelaskan arti masing-masing kode di atas, tapi saya akan menjelaskan bagian media query-nya. Untuk ukuran layar minimal 480px maka CSS akan menerapkan layout untuk menu dengan lebar masing-masing 30%. Tidak lagi mengikuti wrapper yang lebarnya 90%. Selanjutnya, kamu bisa mencari di google untuk arti dari float, margin, padding.

Selanjutnya, kamu perlu menambahkan code di bawah ini pada file tes.css

@media only screen and (min-width: 768px) {
  .title {
    float: left;
    font-size: 1.4em;
  }
  nav {
    float: right;
    width: 60%;
  }
  nav a {
    padding: 15px 1%;
  }
  .main article {
    float: left;
    width: 57%;
  }
  .main aside {
    float: right;
    width: 38%;
  }
}

Bagian ini akan mengatur kembali tag <title></title> dan <nav></nav>. Saat resolusi layar menjadi 768px maka title akan menjadi terletak di bagian kiri dan menu nav akan terlatak di bagian kanan. Selain itu ada peningkatan ukuran huruf title. Lebar menu juga akan bertambah menjadi 60% untuk memanfaatkan pertambahan resolusi layar. Kamu bisa mendowload file akhirnya di sini.

• tes.html.final  ubah nama file menjadi tes.html
• tes.css.final ubah nama file menjadi tes.css
• normalize.min.css.final ubah nama file menjadi normalize.min.css
• free-picture2.jpg.final ubah nama file menjadi free-picture2.jpg

Pertanyaanya, bagaimana menentukan ukuran layar 480 untuk smartphone, 768 untuk Ipad, dst? Kamu bisa mengecek di sini http://screensiz.es/

Perubahan Workflow pada Mendesain Web Responsive

Teknik web responsive ini mengharuskan kita untuk mendesain mulai dari layar paling kecil yaitu handphone. Maksudnya agar para desainer web bisa lebih fokus untuk menghadapi keterbatasan ukuran resolusi layar yang terbatas. Layar yang sangat kecil sehingga tidak mungkin menggunakan sidebar. Semua elemen harus disusun secara vertikal. Selanjutnya elemen-elemen itu di atur kembali jika resolusi layar membesar dengan menggunakan media query.