Mulai lebih cepat dengan template AMP Start yang baru

Diposting oleh Abby Beck, AMP Project UX lead, Google & Matt Ludwig, AMP Project marketing lead, Google

Dua pilar inti Accelerated Mobile Pages (AMP) Project adalah kecepatan dan pengalaman pengguna yang menakjubkan pada web. Dapat dikatakan, AMP Project juga peduli tentang cara supaya proses pembangunan halaman web lebih cepat dan lebih mudah. Karena itu kami membuat AMP Start, sebuah library dengan template berfitur lengkap dan elemen halaman biasa yang dibangun dengan AMP.

Setelah memilih template, Anda bisa mendownload kode lengkap untuk situs tersebut, yang berisi semua HTML, JavaScript dan CSS yang diperlukan untuk merender semua halaman dalam situs. AMP Start dibangun menggunakan Basscss, toolkit CSS tingkat rendah yang menyediakan banyak kelas utilitas CSS untuk menghindari kebutuhan akan CSS khusus. Dengan cara ini Anda bisa dengan cepat membuat halaman AMP yang responsif dan sangat cepat dengan konten Anda sendiri, tanpa perlu membangun elemen halaman dari awal.

Kami mengumumkan AMP Start pada bulan Maret, dan selama beberapa bulan terakhir kami telah bekerja sama dengan komunitas desain untuk membuat template tambahan dengan lebih vertikal, seperti retail dan travel.

Template e-commerce yang baru 😎

Hari ini kami meluncurkan AMP Start yang didesain ulang, agar Anda bisa dengan mudah menemukan template atau komponen yang Anda butuhkan untuk memulai dengan AMP. Ini termasuk template baru seperti Lune, yang menyorot satu lini produk dengan animasi scrolling mulus dan efek paralaks. Lune dirancang dengan nuansa modern untuk menampilkan detail item tertentu dan memberi pengunjung deskripsi dan informasi tentang produk dari toko tradisional.

Template pada AMP Start benar-benar interaktif dan dibangun sepenuhnya dengan AMP sehingga mereka sangat cepat di semua perangkat. Untuk memulai pembangunan pengalaman retail yang dinamis, lihat juga template Bike Shop yang baru, yang memungkinkan Anda memperlihatkan library produk dengan fitur seperti pengurutan produk, galeri gambar, dan alur checkout.

Karena template ini didesain sedemikian rupa, setiap elemen template tertentu, seperti gambar tokoh atau menu sidebar, juga bisa didownload dan disesuaikan agar pas dengan merek Anda. Hal ini untuk mempermudah pembuatan halaman yang dirancang dengan baik bahkan jika Anda sudah merampungkan sebagian besar situs Anda.

Berikutnya?

Template tambahan akan ditambahkan ke AMP Start dalam beberapa bulan mendatang, termasuk situs untuk menampilkan portofolio kreatif, situs berita dengan pemberian tag konten dan majalah digital, serta situs bisnis lokal. Untuk benar-benar memaksimalkan batas mengenai apa yang bisa dilakukan dengan AMP, kami bekerja sama dengan komunitas toko desain termasuk North Kingdom, MetaLab dan Grain & Mortar untuk membuat template ini. Tujuan kami adalah untuk menampilkan kemungkinan interaktif dan dinamis saat menggunakan komponen seperti amp-bind dan amp-animation.



Kami berharap perbaikan AMP Start ini akan mempermudah Anda untuk memulai AMP, baik ketika Anda sedang membangun situs baru atau menggunakan salah satu komponen bergaya untuk halaman yang ada. Seperti biasa, kami menyambut baik setiap komentar, masukan, dan kontribusi Anda. Untuk bagian AMP Project yang lain, kode untuk AMP Start seluruhnya terdapat di GitHub dan dapat diakses oleh semua orang di sini.