Pendahuluan

Desain web yang responsif adalah tentang membuat halaman lancar yang merespons kebutuhan pengguna Anda—halaman yang sesuai dengan orientasi dan ukuran layar perangkat mereka. Anda dapat membuatnya dengan mudah di AMP. AMP mendukung semua kategori perangkat dan layar, serta menyediakan komponen bawaan yang responsif.

Dalam panduan ini, kami akan menunjukkan cara menerapkan dasar-dasar komponen responsif tersebut di AMP dengan mudah:

Mengontrol viewport

Guna mengoptimalkan halaman sehingga konten diubah skalanya dan menyesuaikan jendela browser untuk semua perangkat, Anda harus menentukan elemen viewport meta. Elemen viewport memberikan petunjuk ke browser tentang cara mengubah skala dan menyesuaikan ukuran area yang terlihat (viewport) dari halaman.

Namun, nilai apa yang harus digunakan? Di AMP, nilai tersebut sudah tersedia untuk Anda. Sebagai bagian dari markup yang diperlukan untuk halaman AMP, Anda harus menentukan viewport berikut:

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

Setelan tersebut adalah setelan viewport umum yang digunakan untuk situs responsif. Meskipun initial-scale=1 tidak diperlukan untuk halaman AMP yang valid, komponen ini direkomendasikan karena akan menetapkan level zoom ke 1 saat halaman dimuat pertama kali.

Membuat tata letak responsif

Dengan desain yang responsif, Anda dapat menggunakan kueri CSS @media guna menyesuaikan gaya halaman untuk berbagai dimensi layar, tanpa harus mengubah konten halaman. Di AMP, Anda tetap dapat menggunakan kueri @media CSS yang sama. Selain itu, agar elemen AMP mendapakan kontrol yang lebih baik, Anda dapat menentukan atribut media pada elemen. Cara ini khususnya berguna saat Anda perlu menampilkan atau menyembunyikan elemen berdasarkan kueri media. Lihat bagian Mengubah gambar responsif dari suatu gambar untuk mengetahui contoh penggunaan atribut media.

Mengubah ukuran setiap elemen agar sesuai dengan ukuran layar bisa jadi rumit*. Tapi di AMP, Anda dapat membuat elemen responsif hanya dengan menentukan atribut "layout=responsive" beserta atribut width dan height elemen. Saat Anda menerapkan tata letak responsive ke sebuah elemen, elemen tersebut otomatis akan berubah ukurannya sesuai dengan lebar elemen penampungnya, dan tinggi elemen akan berubah berdasarkan rasio tinggi lebar yang ditentukan oleh width dan height elemen. Hampir semua elemen AMP mendukung tata letak responsive; buka dokumentasi referensi elemen untuk mengetahui tata letak apa saja yang didukung.

Meskipun Anda dapat membuat elemen responsif dengan mudah menggunakan "layout=responsive", Anda tetap harus mempertimbangkan tampilan elemen di semua ukuran layar--termasuk desktop dan tablet. Kesalahan umum yang dilakukan adalah memungkinkan gambar memiliki lebar layar maksimum, sehingga ukuran gambar melebihi batas ukuran yang ditentukan, yang menyebabkan pengalaman buruk bagi pengguna perangkat berlayar lebar. Secara default, elemen dengan layout=responsive akan menyesuaikan lebar maksimum penampung elemennya, yang sering kali ukuran lebarnya tidak dibatasi (contohnya, width=100%). Anda dapat menyempurnakan tampilan gambar dengan hanya membatasi lebar penampungnya. Misalnya, dengan menetapkan aturan "max-width" pada "body" atau "main", Anda dapat membatasi ukuran semua gambar ke lebar maksimum tertentu.

Misalnya: Membatasi lebar gambar responsif

Pada contoh berikut, kami memiliki gambar bunga (640x427 piksel) yang ingin ditampilkan di semua ukuran layar, jadi kami menentukan width dan height, lalu menetapkan tata letak ke responsive.

Tampilkan kode lengkap

Namun, kami ingin gambar tersebut tidak berukuran melebihi batas yang ditentukan, jadi kami menetapkan max-width di penampung sebesar 700 piksel melalui CSS kustom:

<style amp-custom>
.resp-img {
    max-width: 700px;
  }
</style>

Mengubah skala media untuk halaman

Aspek yang paling menantang saat membuat desain responsif kemungkinan adalah menampilkan media dengan benar di halaman sehingga media tersebut dapat merespons karakteristik layar. Pada bagian ini, kita akan mengetahui cara menyematkan video dan gambar responsif di halaman AMP.

Menyematkan video

Saat menyertakan video di halaman, Anda ingin memastikan bahwa pengguna dapat melihat konten video dan kontrol video (yaitu, tidak ada overflowing). Biasanya, Anda memerlukan gabungan kueri media CSS, penampung, dan CSS lainnya untuk mencapai tujuan tersebut. Di AMP, Anda hanya perlu menambahkan elemen video ke halaman dan menentukan layout=responsive di elemen—tanpa memerlukan CSS tambahan.

Contoh: Menyematkan video YouTube

Pada contoh berikut, kami ingin menampilkan video YouTube tersemat yang dapat disesuaikan dengan ukuran dan orientasi layar perangkat. Dengan menambahkan "layout=responsive" ke elemen amp-youtube, ukuran video akan berubah agar sesuai dengan ukuran layar perangkat, dan rasio tinggi lebar video akan disesuaikan dengan width dan height yang ditentukan.

Tampilkan kode lengkap

Ada banyak jenis video yang dapat Anda tambahkan ke halaman AMP. Untuk detailnya, lihat daftar komponen media yang tersedia.

Menampilkan gambar responsif

Gambar menghasilkan byte paling besar dari keseluruhan halaman (sekitar 65% dari byte halaman). Setidaknya, gambar harus terlihat di berbagai orientasi dan ukuran layar (misalnya, pengguna tidak perlu melakukan scrolling, mencubit/melakukan zoom untuk melihat keseluruhan gambar). Hal ini dapat dilakukan di AMP dengan mudah menggunakan atribut "layout=responsive" (lihat Menyertakan Gambar di AMP). Selain gambar responsif dasar, Anda mungkin ingin menampilkan beberapa resource gambar untuk:

Menayangkan gambar tajam untuk resolusi yang sesuai

Untuk layar beresolusi tinggi (misalnya, tampilan Retina), Anda harus memberikan gambar yang tajam; namun, sebaiknya jangan menggunakan gambar yang tajam di perangkat beresolusi rendah karena akan menyebabkan waktu muat jadi lebih lama. Di halaman non-AMP dan AMP, Anda dapat menampilkan gambar yang sesuai untuk kepadatan piksel layar menggunakan atribut srcset dengan deskripsi lebar (w).

Contoh: Menampilkan gambar tajam yang sesuai dengan ukuran layar

Pada contoh berikut, ada beberapa file gambar yang memiliki rasio tinggi lebar yang sama, namun memiliki resolusi yang berbeda. Dengan menyediakan berbagai resolusi gambar, browser dapat memilih gambar yang paling cocok dengan resolusi perangkat. Selain itu, kami telah menentukan ukuran untuk merender gambar :

  • Untuk lebar viewport hingga 400 piksel, render gambar 100% dari lebar viewport.
  • Untuk lebar viewport hingga 900 piksel, render gambar 75% dari lebar viewport.
  • Untuk lebar viewport di atas 900 piksel, render gambar dengan lebar 600 piksel.
Tampilkan kode lengkap

Misalnya, ada perangkat yang memiliki lebar viewport 412 piksel dan DPR 2,6. Berdasarkan kode di atas, gambar harus ditampilkan 75% dari lebar viewport, jadi browser akan memilih gambar yang ukurannya mendekati 803 piksel (412 * 0,75 * 2,6), yang akan disimpan sebagai apple-800.jpg.

Mengubah gambar responsif dari suatu gambar

Gambar responsif adalah penerapan karakteristik visual gambar untuk breakpoint tertentu. Misalnya, bukannya mengubah skala gambar saat ukuran layar mengecil, Anda mungkin ingin menampilkan gambar versi crop yang memperkecil fokus gambar, atau Anda mungkin ingin menampilkan gambar yang sepenuhnya berbeda pada breakpoint yang berbeda. Di HTML, Anda dapat melakukannya menggunakan elemen picture. Di AMP, gambar responsif dapat dicapai menggunakan atribut media.

Contoh: Gambar berukuran berbeda untuk breakpoint yang berbeda

Pada contoh berikut, kami memiliki 3 gambar kucing yang di-crop berbeda, yang ingin ditampilkan pada breakpoint yang berbeda. Jadi, jika lebar viewport sebesar:

  • 670 piksel atau lebih besar, tampilkan cat-large.jpg (650x340 piksel)
  • 470-669 piksel, tampilkan cat-medium.jpg (450x340 piksel)
  • 469 piksel atau lebih kecil, tampilkan cat-small.jpg (226x340 piksel)

Tampilkan kode penuh

Memberikan format gambar yang dioptimalkan

Menampilkan halaman yang dimuat dengan cepat memerlukan gambar yang dioptimalkan--baik dari segi ukuran, kualitas, dan format. Selalu lakukan kompresi ukuran file ke tingkat kualitas terendah yang dapat diterima. Ada berbagai fitur yang dapat Anda gunakan untuk "mengompresi" gambar (misalnya, ImageAlph atau TinyPNG). Dari segi format gambar, beberapa format gambar memberikan kemampuan kompresi yang lebih baik dibandingkan yang lainnya (misalnya, WebP dan JPEG XR vs JPEG). Anda pasti ingin memberikan gambar yang paling dioptimalkan bagi pengguna, serta memastikan gambar tersebut didukung oleh browser penggguna (misalnya, tidak semua browser mendukung semua format gambar).

Di HTML, Anda dapat menampilkan format gambar yang berbeda menggunakan tag picture. Di AMP, meskipun tag picture tidak didukung, Anda dapat menampilkan gambar yang berbeda menggunakan atribut fallback.

Contoh: Menampilkan format gambar yang berbeda

Pada contoh berikut, apabila browser mendukung WebP, tampilkan mountains.webp, jika tidak menampilkan mountains.jpg.

Tampilkan kode penuh

Sebagai tambahan yang menarik, beberapa cache, seperti Google AMP Cache, otomatis mengompresi dan mengonversi gambar menjadi WebP dan resolusi yang sesuai, jika Anda tidak melakukannya. Namun, tidak semua platform menggunakan cache, jadi Anda harus mengoptimalkan gambar secara manual sendiri.

Contoh yang dapat Anda gunakan sebagai inspirasi

Berikut beberapa contoh yang dapat Anda gunakan sebagai inspirasi untuk membuat halaman AMP responsif:

Produksi

Dibuat oleh AMP