Membuat halaman AMP responsif

Pendahuluan

Desain web yang responsif adalah tentang membangun halaman web yang luwes yang menanggapi kebutuhan pengguna Anda—halaman yang pas dengan orientasi dan ukuran layar perangkat pengguna. 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
• Membuat tata letak responsif
• Mengubah skala media

Mengontrol viewport

Bagian ini hanya berlaku untuk cerita, iklan, dan situs web AMP.

Membuat tata letak responsif

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.

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 pada sebuah elemen, elemen tersebut otomatis akan berubah ukurannya sesuai dengan lebar elemen penampungnya, dan tinggi elemen akan berubah berdasarkan rasio aspek 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 ini, ada gambar bunga (640x427 piksel) yang ingin kita tampilkan di semua ukuran layar, jadi kita menentukan width dan height, lalu menetapkan tata letak menjadi responsive.

<div class="resp-img">
  <amp-img
    alt="flowers"
    src="/static/inline-examples/images/flowers.jpg"
    layout="responsive"
    width="640"
    height="427"
  ></amp-img>
</div>

However, we want the image to not stretch beyond its intended size, so we set the max-width on the container to 700 px via custom CSS:

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

Mengubah skala media untuk halaman

Probably the most challenging aspect of responsive design is displaying media correctly on the page so that it responds to the screen's characteristics. In this section, we'll look at how you can embed responsive videos and images on AMP pages.

Menyematkan video

When you include a video in your web page, you want to ensure that the user can see the contents of the video and the video's controls (i.e., no overflowing). Typically, you'll achieve this with a combination of CSS media queries, a container, and other CSS. In AMP, you just need to add the video element to your page, and specify layout=responsive on the element—no extra CSS.

Contoh: Menyematkan video YouTube

Pada contoh berikut ini, kita ingin menampilkan video YouTube yang disematkan 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 aspek video akan disesuaikan dengan width dan height yang ditentukan.

<amp-youtube
  data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315"
>
</amp-youtube>

Banyak jenis video yang dapat Anda tambahkan ke halaman AMP. Untuk mengetahui selengkapnya, kunjungi daftar komponen media yang tersedia.

Menampilkan gambar responsif

Images make up a large part of a web page (approximately 65% of the page's bytes). At minimum, your images should be visible on various screen sizes and orientations (i.e., the user doesn't have to scroll, pinch/zoom to see the entire image). That's easily done in AMP via the "layout=responsive" attribute (see Include Images in AMP). In addition to the basic responsive image, you might want to serve multiple image resources to:

• Menayangkan gambar tajam untuk resolusi yang sesuai
• Mengubah gambar responsif dari suatu gambar
• Memberikan format gambar yang dioptimalkan

Menayangkan gambar tajam untuk resolusi yang sesuai

For high-resolution screens (e.g., Retina display), you should provide images that look crisp and sharp; however, you don't want to use that same image on low-res devices because that'll cause unnecessary extra load time. In non-AMP and AMP pages, you can serve the correct image for the screen's pixel density by using srcset with the width descriptor ( w ).

Contoh: Menampilkan gambar tajam yang sesuai dengan ukuran layar

Dalam contoh berikut ini, ada beberapa berkas gambar dengan rasio aspek yang sama, tetapi resolusinya berbeda. Dengan menyediakan berbagai resolusi gambar, browser dapat memilih gambar yang paling sesuai dengan resolusi perangkat. Selain itu, kami telah menentukan ukuran untuk merender gambar di:

• 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.

<amp-img
  alt="apple"
  src="/static/inline-examples/images/apple.jpg"
  height="596"
  width="900"
  srcset="/static/inline-examples/images/apple-900.jpg 900w,
            /static/inline-examples/images/apple-800.jpg 800w,
            /static/inline-examples/images/apple-700.jpg 700w,
            /static/inline-examples/images/apple-600.jpg 600w,
            /static/inline-examples/images/apple-500.jpg 500w,
            /static/inline-examples/images/apple-400.jpg 400w"
  sizes="(max-width: 400px) 100vw,
            (max-width: 900px) 75vw, 600px"
>
</amp-img>

For example, say we have a device that has a viewport width of 412 px and a DPR of 2.6. Based on the code above, the image must be displayed at 75% of the viewport width, so the browser chooses an image close to 803 px (412 _ .75 _ 2.6), which happens to be apple-800.jpg.

Mengubah gambar responsif dari suatu gambar

Art direction refers to adapting an image's visual characteristics for certain breakpoints. For example, instead of just scaling an image as the screen narrows, you might want to serve a cropped version of the image that narrows the focus of the image or you might want to serve completely different images at the different breakpoints. In HTML, you can accomplish this by using the picture element. In AMP, art direction can be achieved by using the media attribute.

Contoh: Gambar berukuran berbeda untuk breakpoint yang berbeda

Pada contoh berikut ini, ada 3 gambar kucing yang dipangkas, yang ingin kita tampilkan 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)

<amp-img
  alt="grey cat"
  media="(min-width: 670px)"
  width="650"
  height="340"
  src="/static/inline-examples/images/cat-large.jpg"
></amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 470px) and (max-width: 669px)"
  width="450"
  height="340"
  src="/static/inline-examples/images/cat-medium.jpg"
></amp-img>
<amp-img
  alt="grey cat"
  media="(max-width: 469px)"
  width="226"
  height="340"
  src="/static/inline-examples/images/cat-small.jpg"
></amp-img>

Memberikan format gambar yang dioptimalkan

Menampilkan halaman yang dimuat dengan cepat memerlukan gambar yang dioptimalkan--baik dari segi ukuran, mutu, maupun format. Selalu kompresi ukuran berkas ke tingkat kualitas terendah yang dapat diterima. Ada berbagai fitur yang dapat Anda gunakan untuk "mengompresi" gambar (cth.: ImageAlph atau TinyPNG). Dari segi format gambar, beberapa format gambar menyediakan kemampuan kompresi yang lebih baik dibandingkan yang lainnya (ch.: WebP dan JPEG XR vs JPEG). Anda pasti ingin memberikan gambar yang paling dioptimalkan bagi pengguna, serta memastikan gambar tersebut didukung oleh browser pengguna (yaitu 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.

Di AMP, ada dua cara untuk mencapai penayangan gambar yang optimal:

• Pengembang yang menggunakan format gambar yang tidak didukung secara luas, seperti WebP, dapat mengonfigurasi server mereka untuk memproses tajuk Accept browser dan merespons dengan byte gambar serta tajuk Content-Type yang sesuai. Hal ini untuk menghindari browser mengunduh jenis gambar yang tidak didukungnya. Baca lebih lanjut tentang negosiasi konten.

 Accept: image/webp,image/apng,image/_,_/\*;q=0.8 

• Berikan fallback gambar bertingkat, seperti contoh di bawah ini.

Contoh: Menampilkan format gambar yang berbeda

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

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp"
>
  <amp-img
    alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"
  ></amp-img>
</amp-img>

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

Contoh yang dapat Anda gunakan sebagai inspirasi

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

Produksi

• Getty Images "2016 in Focus"
• BRIT + CO's holiday gift guide
• The Guardian

Dibuat oleh AMP

• Examples
• Templates
• AMP Conf Workshop Codelab: Making beautiful AMPs

• Written by @bpaduch
  with contributions from @pbakaus