Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Pola Desain Web Responsif

Pola desain web responsif berkembang dengan pesat, namun ada beberapa pola yang sudah terbukti bekerja dengan baik di desktop dan perangkat seluler.

Kebanyakan layout yang digunakan oleh laman web responsif bisa dikategorikan ke dalam salah satu dari lima pola ini: mostly fluid, column drop, layout shifter, tiny tweaks dan off canvas. Pada beberapa kejadian, laman mungkin menggunakan kombinasi pola, misalnya column drop dan off canvas. Pola-pola ini, yang awalnya diidentifikasi oleh Luke Wroblewski, memberikan titik awal yang solid untuk setiap laman responsif.

Pola

Agar sederhana serta mudah dipahami, masing-masing contoh di bawah ini dibuat dengan markup sungguhan menggunakan flexbox, biasanya dengan tiga materi div yang ditempatkan dalam kontainer primer div. Setiap contoh tersebut ditulis dimulai dari tampilan terkecil terlebih dahulu, dan ditambahkan breakpoint bila diperlukan. Mode layout flexbox didukung dengan baik untuk browser modern, meskipun mungkin masih memerlukan awalan vendor untuk dukungan optimal.

Mostly Fluid

Pola mostly fluid utamanya terdiri dari grid yang cair. Pada layar besar atau medium, biasanya ukurannya tetap sama, hanya menyesuaikan margin pada layar yang lebih lebar.

Pada layar yang lebih kecil, grid yang cair menyebabkan materi utama untuk meng-ubah posisi/geometri, seiring kolom ditumpuk secara vertikal. Salah satu keuntungan utama dari pola ini adalah bahwa pola ini biasanya hanya membutuhkan satu breakpoint antara layar kecil dan layar besar.

Cobalah

Pada tampilan terkecil, masing-masing div materi ditumpuk secara vertikal. Saat lebar layar menyentuh 600 px, materi div utama tetap berukuran width: 100%, sedangkan div sekunder ditampilkan sebagai dua kolom di bawah div utama. Di atas 800px, lebar kontainer div menjadi konstan dan di tengah layar.

Situs yang menggunakan pola ini antara lain:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  .c3, .c4, .c5 {
    width: 33.33%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Kolom drop

Untuk layout multi-kolom lebar-penuh, column drop hanya menumpuk kolom secara vertikal saat lebar jendela terlalu sempit untuk materi.

Pada akhirnya proses ini mengakibatkan semua kolom ditumpuk secara vertikal. Memilih breakpoint untuk pola layout ini bergantung pada materi dan berubah untuk setiap desain.

Cobalah

Seperti kebanyakan contoh fluid, materi ditumpuk secara vertikal pada tampilan terkecil, namun ketika layar diluaskan melebihi 600px, materi div primer dan sekunder akan menggunakan lebar maksimal layar. Urutan div diatur menggunakan properti urutan CSS. Pada 800px ketiga materi div ditampilkan, menggunakan lebar layar penuh.

Situs yang menggunakan pola ini antara lain:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

Layout shifter

Pola layout shifter adalah pola yang paling responsif, dengan beberapa breakpoint melintasi beberapa lebar layar.

Kunci layout ini adalah tentang cara materi bergerak, bukan meng-ubah posisi/geometri dan menjatuhkannya di bawah kolom lainnya. Oleh karena perbedaan signifikan antara masing-masing breakpoint utama, itu lebih kompleks untuk mempertahankan dan mungkin melibatkan perubahan dalam elemen, bukan hanya layout materi secara keseluruhan.

Cobalah

Contoh yang disederhanakan ini menunjukkan pola layout shifter, pada layar yang lebih kecil materi ditumpuk secara vertikal, namun berubah secara signifikan ketika layar semakin besar, dengan div kiri dan dua div yang ditumpuk di sebelah kanan.

Situs yang menggunakan pola ini antara lain:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Tiny tweaks

Tiny tweaks hanya melakukan perubahan kecil ke layout, seperti menyesuaikan ukuran font, mengubah ukuran gambar atau memindahkan materi dengan sangat kecil.

Ini bekerja dengan baik pada layout kolom tunggal seperti situs web linear laman tunggal dan artikel yang mengandung banyak teks.

Cobalah

Sesuai dengan namanya, tidak banyak perubahan yang dilakukan dengan contoh ini ketika ukuran layar berubah. Ketika lebar layar bertambah besar, begitu juga ukuran font dan pengisi.

Situs yang menggunakan pola ini antara lain:

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

Off canvas

Bukannya menumpuk materi secara vertikal, pola off canvas menempatkan materi yang lebih jarang digunakan—mungkin navigasi atau menu aplikasi—yang tidak terlihat di layar, dan hanya menampilkannya ketika ukuran layar cukup besar, pada layar yang lebih kecil, materi hanya satu klik jauhnya.

Cobalah

Bukannya menumpuk materi secara vertikal, contoh ini menggunakan deklarasi transform: translate(-250px, 0) untuk menyembunyikan dua div materi dari layar. JavaScript digunakan untuk menampilkan div dengan menambahkan kelas terbuka ke elemen untuk membuatnya terlihat. Ketika layar semakin lebar, posisi off-screen akan dihapus dari elemen dan mereka ditampilkan dalam tampilan yang terlihat.

Perhatikan dalam contoh ini, Safari untuk iOS 6 dan Browser Android tidak mendukung fitur flex-flow: row nowrap dari flexbox, jadi kami terpaksa melakukan fallback ke pemosisian absolut.

Situs yang menggunakan pola ini antara lain:

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}