Cara Membuat Elemen Halaman AMP Lebih Responsif - Peteng Pikir : Artikel Seputar SEO, Film, Webiste, HTML, Gadget, dan Masih Banyak Lagi

Post Top Ad

Tuesday, 7 November 2017

Cara Membuat Elemen Halaman AMP Lebih Responsif

Cara Membuat Elemen Halaman AMP Lebih Responsif

Saya telah membicarakan proyek Apa AMP Google di  Accelerated Mobile Pages (AMP)? dan Membuat artikel Konten AMP. Hari ini saya ingin menyoroti beberapa perbedaan antara Accelerated Mobile Pages (AMP) dan Responsive Web Design (RWD) serta bagaimana cara mencapai layout responsif di halaman AMP Anda.
Cara Membuat Elemen Halaman AMP Lebih Responsif

AMP vs. RWD

Sementara kedua halaman Percepatan Seluler dan yang dibangun dengan menggunakan teknik Desain Responsif akan ditampilkan di browser seluler, Proyek AMP dan Desain Web Responsif memiliki tujuan yang sangat berbeda:
  • Responsive Web Design adalah metode pengorganisasian dan perancangan sebuah situs web sehingga terlihat bagus pada perangkat apapun, dari komputer desktop hingga ponsel. Dalam hal ini, RWD difokuskan pada fleksibilitas.
  • Proyek AMP adalah kerangka web yang dirancang untuk menyampaikan konten ke pengguna ponsel secara instan. Ergo, ini berfokus pada kecepatan.
Perbedaannya tidak berakhir disana:
  • AMP bisa bekerja dengan website yang ada, RWD membutuhkan beberapa desain ulang.
  • Tidak perlu mengganti situs web yang ada dengan AMP. Meskipun dimungkinkan untuk menggunakan AMP secara eksklusif, AMP juga dapat ditambahkan ke situs web yang tidak responsif (atau responsif) yang ada, tanpa perancangan ulang situs. Sebaliknya, penerapan RWD memerlukan desain ulang situs web.
  • AMP saat ini hanya bekerja dengan konten statis, RWD dapat digunakan untuk situs web manapun.
  • Untuk saat ini, penggunaan ideal untuk AMP adalah artikel berita, entri blog, halaman informasi, dan konten publikasi lainnya. RWD lebih siap untuk hal-hal seperti bentuk web dan aplikasi kustom.

Adding Responsiveness to your AMP Pages

Meskipun tujuan utama AMP adalah memuat halaman web seketika, tidak ada alasan mengapa Anda tidak dapat menerapkan teknik RWD ke halaman AMP Anda. Sebenarnya, ini cukup mudah dilakukan. AMP mendukung daya tanggap dalam tiga cara:
  1. Anda dapat terus menggunakan kueri CSS @media yang sama seperti di laman web reguler Anda.
  2. Untuk kontrol yang lebih baik terhadap elemen AMP, Anda dapat menentukan atribut media pada elemen. Ini sangat berguna bila Anda perlu menampilkan atau menyembunyikan elemen berdasarkan kueri media.
  3. AMP menyediakan komponen responsif built-in untuk disertakan di halaman web Anda.

The layout Attribute

Styling dan layout pada halaman HTML AMP sangat mirip dengan halaman HTML biasa - dalam kedua kasus tersebut, Anda akan menggunakan CSS. Namun, AMP membatasi beberapa penggunaan CSS untuk alasan kinerja dan kegunaan, sekaligus memperluas kemampuan desain responsif dengan fitur seperti placeholder & fallbacks, arah seni lanjutan melalui srcset dan atribut tata letak untuk kontrol yang lebih baik mengenai bagaimana elemen Anda ditampilkan.
Daripada mengatur gaya responsif di dalam stylesheet Anda, pendekatan yang lebih baik di halaman AMP adalah menerapkan gaya pada tingkat elemen. Elemen AMP menerima atribut tata letak, yang memberi Anda kontrol per elemen yang mudah atas bagaimana elemen Anda harus ditampilkan di layar.
Mari kita menerapkannya ke elemen DIV dan melihat apa yang dilakukannya.

<div class="square">
<amp-fit-text height="200" layout="responsive" width="300">
    Lorem ipsum dolor sit amet, 
    has nisl nihil convenire et, 
    vim at aeque inermis reprehendunt.
  </amp-fit-text>
</div>
Ada beberapa hal yang perlu diperhatikan dalam markup di atas: Pertama, ada atribut layout = "responsive". AMP memiliki sejumlah tipe tata letak yang berbeda, tapi yang paling umum adalah layout "responsif". Bila elemen diberi tinggi, lebar, dan nilai atribut tata letak "responsive", AMP menghitung rasio aspek dari tinggi dan lebar, dan skala timah yang sesuai dengan elemen yang sesuai dengan lebar elemen induk. Fitur lain yang patut dicatat dalam kode di atas adalah komponen amp-fit-textcomponent. AMP akan mencoba menemukan ukuran font terbaik agar sesuai dengan semua konten di dalam ruang yang tersedia untuk elemen amp-fit-text element. Jika konten teks amp-fit ​​masih melimpah ruang yang tersedia bahkan pada ukuran font minimum, konten yang meluap akan terputus dan disembunyikan. Browser berbasis WebKit dan Blink akan menampilkan elipsis dalam kasus ini.
Kita dapat mengatur dimensi DIV awal menggunakan CSS khusus:
 
<style amp-custom>
  div.square {
    width: 200px;
    height: 200px;
    background-color: grey;
    padding:2px;
  }
</style>

Berikut adalah perkiraan bagaimana DIV kami akan merender di halaman bertenaga AMP:
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Di bawah selimut, ada banyak hal yang terjadi. AMP menambahkan kelas kustom, elemen i-amphtml-sizer, dan bahkan salinan konten amp-fit-text kami yang tersembunyi!
 

<div class="square">
  <amp-fit-text width="300" height="200" layout="responsive"
   class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout">
    <i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
    <div class="i-amphtml-fill-content i-amphtml-fit-text-content" style="z-index: 2;">
      <div style="line-height: 1.15em; font-size: 21px;">
        Lorem ipsum dolor sit amet, 
        has nisl nihil convenire et, 
        vim at aeque inermis reprehendunt.
      </div>
    </div>
    <div style="position: absolute;top: 0px;left: 0px;z-index: 1;visibility: hidden;line-height: 1.15em;font-size: 21px;">
      Lorem ipsum dolor sit amet, 
      has nisl nihil convenire et, 
      vim at aeque inermis reprehendunt.
    </div>
  </amp-fit-text>
</div>

Jika Anda bertanya-tanya, elemen yang diawali dengan i-amp- adalah internal AMP dan tidak boleh diubah dengan stylesheet atau skrip.

Kesimpulan


Dalam tutorial hari ini kita melihat bagaimana mencapai tata letak responsif di halaman AMP memerlukan pendekatan yang berbeda dari pada halaman web tradisional. Daripada menerapkan gaya menggunakan kueri media, di halaman AMP, lebih baik menerapkan gaya pada tingkat elemen dengan memasukkan kombinasi atribut / nilai layout = "responsif" pada tag pembuka. Karena itu, ada beberapa kasus di mana kueri media masuk akal di halaman AMP. Kami akan menjajaki beberapa dari mereka dalam angsuran berikutnya.

Sumber Artikel : https://www.htmlgoodies.com/beyond/mobile/making-amp-page-elements-more-responsive.html
Penulis : Rob Gravelle

No comments:

Post a comment

Post Bottom Ad