AMP Tasarım İşlevselliği: Çerçeveyle Başka Neler Mümkün?

Etkileyici tasarım karmaşıklığı seviyelerine ulaşmış olsa da, yine de bazıları AMP'yi sınırlı bir çerçeve olarak görüyor. Savunmalarında, AMP stili, yükleme hızını artırmak için sayfaları sınırlamaya odaklanarak başladı. Ve hız nihai hedefi olmaya devam ederken, tasarım sınırlamaları çok daha az hale geldi.

Tasarımcılar artık AMP ile statik içerik yayınlamakla sınırlı değil. Bugün, sağlam tasarımı destekleyen çok yönlü bir çerçevedir. Uzun zaman önce, zaman ayırmaya değmeyecek katı ve çıplak bir çerçeve olarak yazdıysanız, bu derleme sizi duruşunuzu yeniden düşünmeye zorlayabilir.

Bilmediğiniz 9 AMP tasarım yeteneği

(AMP ile ilgili olasılıklar hakkında daha fazla ayrıntı için, AMP ile ilgili yaygın yanlış kanıları tartışacağımız gelecek web seminerinde bize katılın. AMP Projesine öncülük eden bir uzmandan tüm AMP sorularınızı yanıtlayın.)

1. Aşamalı bir web uygulaması (PWA) oluşturun

Mobil web uzun bir yol kat etmiş olsa da, daha kat etmesi gereken uzun bir yol var. Raporlar, en iyi 1.000 mobil web sitesinin en iyi 1.000 mobil uygulamadan 4 kat daha fazla kişiye ulaşırken, kullanıcılarla 20 kat daha az dakika etkileşim kurduğunu gösteriyor. Mobil siteler ziyaretçileri çekiyor, ancak yerel bir uygulamanın sezgisel kullanılabilirliğini sağlayamıyorlar. Progresif web uygulamalarının devreye girdiği yer burasıdır.

Aşamalı web uygulamaları, kullanıcıları bir mobil siteye götüren ve ana ekranlarında yerel bir uygulama gibi yaşayan bir simge indirmelerini isteyen karma bir deneyim sunarak kullanılabilirlik sorununu çözmeye çalışır. Deneyim açıldığında, yerel mobil uygulamaların yaptığı gibi görünecek ve davranacak şekilde tasarlanmıştır.

AMP ile birlikte bu PWA'lar yüksek hıza çıkarılabilir. Bunları birlikte kullanmanın birkaç yolu:

PWA olarak AMP

Aşamalı web uygulamanız AMP tarafından kısıtlanmış kodlama dillerinin tam kullanımına ihtiyaç duymuyorsa, çerçeve kendi PWA'nızı oluşturmak için ihtiyacınız olan her şeyi sağlayabilir. Aslında, "Örnekle AMP", kombinasyonun çalışan bir vitrinidir:

PWA AMP

AMP ve PWA'lar ya hep ya hiç değildir. PWA'nızın bir kısmı için bir AMP düzeni kullanamazsınız, ama hepsi değil. Aşamalı web uygulamanızın AMP CSS kodlama kısıtlamaları altında çalışamadığını fark ederseniz, "Gölge AMP" adlı çerçeve formunu kullanabilirsiniz. Bu, AMP'nin web sitenizin diğer bölümlerine yerleştirilmesine olanak tanır, böylece istediğinizi AMP'yi yapabilir, istemediğinizi değil.

PWA AMP

PWA'nızın AMP'nin kısıtlamaları altında çalışabileceğini düşünmüyorsanız bile, kullanıcıları buna çekmek için AMP stilini kullanabilirsiniz. AMP'nin arama motorlarındaki görünürlük artışıyla, çerçeve ile haber ve blog gönderileri yayınlamayı zahmetsiz hale getirir. AMP sayfanıza tıkladıklarında, ziyaretçilerden PWA'nızı indirmeleri istenir.

2. Bir ödeme sayfası oluşturmak için

AMP, daha çeşitli işlemleri etkinleştirmek için çalışmaya devam ederken, artık AMP tarafından tasarlanmış sayfalarda ödeme kabul edebilirsiniz. Basit formlarla ad, adres, kredi kartı bilgileri gibi ödeme için gerekli bilgileri toplayın ve hatta promosyon kodlarını kabul edin:

AMP ekibi için bir sonraki büyük öncelik, kullanıcılar için "daha sağlam" bir ödeme bileşeni olacaktır. Ürün yol haritalarında şunları yazıyorlar:

AMP şu anda Ödeme İsteği API'si ile amp-iframe gibi yalnızca sınırlı bağlamlardaki işlemleri desteklemektedir - ancak bu, birçok önemli kullanım durumunu atlamaktadır. Bu etkinlik, potansiyel olarak üçüncü taraf ödeme işlemcileri, widget'lar, cüzdanlar vb. ile entegrasyonlar dahil olmak üzere AMP'de daha sağlam bir ödeme bileşeni uygulayacaktır (bunlar ne olursa olsun bir şekilde desteklenmelidir).

3. Bir yorum bölümü oluşturmak için

Doğru yapıldığında, bir yorum bölümü verimli tartışma, içerik fikirleri ve hatta olası satışların kaynağı olabilir. Ve şimdi, AMP ile tasarımcılar, kullanıcıların bu tartışmaya katılabilecekleri ve hatta oturum açma gerektirebilecekleri bir yorum bölümü oluşturabilir, bu da kullanıcıların daha kişisel bir şekilde tartışmalarına olanak tanır:

4. AMP Hikayeleri

Snapchat, Instagram veya Facebook hikayeleri gördüyseniz, AMP hikayeleri çok tanıdık gelecektir. Google'da AMP Ürün Müdürü Rudy Galfi'ye göre, hikayeler yayıncılara "haberleri ve bilgileri görsel olarak zengin, doğrudan geçişli hikayeler olarak sunmak için mobil odaklı bir format" sunuyor:

Galfi'ye göre CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media ve The Washington Post gibi yayıncılar, formatın erken geliştirilmesine dahil oldu. Artık tüm kullanıcılar tarafından kullanılabilir ve keşfedilebilirlik söz konusu olduğunda, AMP hikayelerini Google Görseller, Keşfet, Arama ve Haberler'de bulabilirsiniz.

İşte birinin nasıl görünebileceğine dair bir örnek:

5. Bing'de ek görünürlük elde edin

Yakın tarihli bir blog gönderisinde, Bing'in Baş Program Yöneticisi Fabrice Canel, şirketin arama motoru için yeni bir özellik duyurdu:

2016'da Bing, nerede olursanız olun ve bilgi ararken herhangi bir cihazda aramaları "bulmanıza" ve "yapmanıza" yardımcı olmak için Hızlandırılmış Mobil Sayfalar (kısaca AMP) açık kaynak çalışmasına katıldı. Bugün, AMP özellikli web sayfalarının doğrudan Bing'in mobil arama sonuçlarından çalışmasını sağlayan ve Bing'in Bing kullanıcılarına daha hızlı mobil deneyimler sunmasına olanak tanıyan Bing AMP görüntüleyici ve Bing AMP Önbelleği'nin piyasaya sürüldüğünü duyurmaktan mutluluk duyuyoruz.

Bu görüntüleyici, AMP özellikli içeriği belirtmek için şimşek işaretli resimler içeren bir atlıkarınca olan Google'a benziyor:

Artık, Google'dan gelen arama motoru trafiğine ek olarak, AMP kullanıcıları Bing'in arama motoru sonuç sayfalarında öncelikli gayrimenkul bekleyebilirler.

6. Kaydırmalı efektler oluşturun

Çoğu zaman, kaydırmaya bağlı efektler, kullanıcı deneyiminin önüne geçer. Etkileyiciler, ancak olmasını istediğiniz şekilde değil. Bir sayfanın ana içeriğinden uzaklaşırlar ve efektin uygulanmasına bağlı olarak çok fazla sayfa ağırlığı ekleyebilirler.

Bazen, bir sayfanın hedef içeriği (ziyaretçinizin kesinlikle tüketmesini istediğiniz şey), efekt eklediğiniz görüntülerdir. Örneğin, bir serbest çalışanın çevrimiçi portföyünü veya bir web geliştirme ajansının web sitesini alın. Bu durumda, efektler tasarımcının yeteneğini gösterir.

Bununla birlikte, bu tasarım sağlıklı bir şekilde uygulanmazsa, sayfanın ağırlığını artırabilir, bu da yüklenmesini yavaşlatır ve olası bir olasılığın daha az kalmasına neden olur. Bu sorunu çözmek için, bir dizi ilgi çekici ancak hızlı yüklenen efekt oluşturmak için amp-position-observer ile amp-animasyonu birleştirebilirsiniz:

Kaydırmalı animasyon

Kaydırmalı animasyon, kullanıcı sayfanızda gezinirken resimlere hayat verebilir. Örneğin, kullanıcı kaydırdıkça dönen AMP ile oluşturulmuş bu stres çarkını ele alalım.

Soldurma ve kaydırma geçişleri

Soldurma ve kaydırma geçişleriyle, zamana duyarlı geçişler için zamana bağlı ve kaydırmaya bağlı efektleri birleştirebilirsiniz. Örneğin, o görüntü tam görünümdeyken metnin bir görüntünün üzerine kaydığı bir efekt oluşturabilirsiniz. Ve solma efektiyle, kullanıcı yaklaştıkça bu görüntüyü soldurabilir ve kullanıcı uzaklaştıkça karartabilirsiniz. Burada eylem halinde görün.

atlıkarınca

AMP atlıkarınca ile bir geçiş efekti de kullanılabilir:

Yukarıdaki örnekte nehrin görüntüsü kısmen gizlenmiştir. Ancak, eklenen kaydırma efektiyle, kullanıcı kaydırdığında tam görünümde sola yaslayarak yatay olarak kaydırılabilir olduğunu gösterir.

Paralaks pencereleri

Görüntüden daha küçük bir kırılma penceresi tanımlayarak paralaks efekti oluşturabilirsiniz:

Bu pencere görüntüden daha küçüktür ve kullanıcı kaydırdıkça pencere aşağı doğru hareket ederek görüntüdeki filin geri kalanını ortaya çıkarır.

7. E-postanızı AMPlify

Web sayfalarını hızlandırmayı biliyorsunuz, peki ya e-posta? E-posta için AMP, AMP sayfalarının aynı hızını ve kullanılabilirliğini Gmail'e getirmeyi hedefliyor. Geliştiricilerin AMP belgeleri olarak e-posta göndermesine izin veren AMP'nin e-posta için potansiyeli, kullanıcılar için zengin bir deneyim oluşturma yeteneğidir.

Gmail ve Chat Ürün Müdürü Aakash Sahney, e-posta spesifikasyonu için yeni AMP'nin "geliştiricilerin daha ilgi çekici, etkileşimli ve eyleme geçirilebilir e-posta deneyimleri oluşturması için güçlü bir yol" olacağını söylüyor. Bununla, kullanıcılar Gmail üzerinden bir etkinliğe LCV yanıtlama, randevu alma veya bir anket doldurma gibi görevleri tamamlayabilir.

Pinterest, Booking.com ve Doodle, e-posta spesifikasyonu için AMP'yi ilk test edenler arasındadır:

E-posta spesifikasyonu için AMP bugün mevcuttur, ancak yalnızca buradan kaydolarak geliştirici önizleme erişimiyle kullanılabilir.

8. Yüksek hızlı tıklama sonrası açılış sayfalarını kolayca oluşturmak için

Dönüşüm oranlarını artırmak söz konusu olduğunda, tıklama sonrası açılış sayfasını optimize etmek bir öncelik olmalıdır. Ancak, AMP olsun ya da olmasın her promosyon için bir tıklama sonrası açılış sayfası oluşturmak, bir ekibin kaynaklarını hızla tüketebilir. Bu nedenle Instapage oluşturucuda AMP işlevselliği oluşturduk:

Artık yıldırım hızında yüklenen, yıldırım hızında AMP tıklama sonrası açılış sayfaları oluşturabilirsiniz. Öğeleri sürükleyip bırakın, düzenlemek için tıklayın ve gelecekteki sayfalara eklemek üzere herhangi bir öğeyi kaydedin.

Oluştururken, AMP'nin 75 kb'lik sayfa ağırlığı sınırını aşmaya yaklaşırsanız bilgilendirileceksiniz. Limitin %80'ine ulaştığınızda, ekranın alt kısmına yakın bir yerde bu uyarı göstergesi görünür:

Olmazsa, WordPress'te veya kendi özel alan adınızda yayınlayabilirsiniz:

9. Tıklama sonrası açılış sayfalarınızı optimize etmek için

Harika bir AMP tıklama sonrası açılış sayfası oluşturmak bir şeydir, ancak onu geliştirmek tamamen farklı bir şeydir. AMP tıklama sonrası açılış sayfanızın dönüşüm oranını artırmanın yollarını keşfetmeye gelince, başlamak için harika bir yer A/B testidir.

A/B testi, kontrol adı verilen orijinal bir sayfanın varyasyon adı verilen alternatif bir sayfaya karşı test edilmesini içerir. Çok basit bir ifadeyle, her birine eşit trafik çekildikten sonra kazanan, daha iyi sayfadır (daha ayrıntılı bir açıklama için Instapage A/B test kılavuzuna bakın).
Teoride kolay görünüyor, ama kesinlikle değil. Test tasarımı, geçerlilik tehditleri, yazılım ve daha fazlası hakkında bilgi gerektirir. Ve özellikle zor olan şey, yaptığınız her test için en az bir tamamen yeni sayfa oluşturmanız gerektiğidir.

Neyse ki Instapage, AMP tıklama sonrası açılış sayfanızı bir tıklamayla çoğaltmanıza olanak tanır:

Basitçe "A/B Testi Oluştur"u, ardından "Yeni Varyasyon"u seçin ve sayfanızı çoğaltıp oradan düzenleyin veya baştan başlayıp "Instablocks" kullanarak kayıtlı metin bloklarını, görüntü bloklarını, widget'ları ve daha fazlasını içe aktarın. özellik. Ardından testinizi çalıştırın ve kazanan tasarımı uygulayın.

Google AMP web seminerinde daha fazlasını elde edin

AMP'nin benimsenmesi yalnızca büyüyor. Şimdi, 31 milyondan fazla alan, 5 milyardan fazla AMP sayfası oluşturdu. Ve WPengine tarafından kıtalar arası bir araştırmaya göre, kullanıcıların %99'u kuruluşları için AMP kullanmanın faydalarını görüyor.

AMP artık sınırlı bir çıplak kemik çerçevesi değildir. Bugün, anında yüklenen tüm web siteleri oluşturma yeteneğine sahiptir. Ve ufukta daha sağlam bir ödeme sistemi, ek efektler ve bir Google Play Entegrasyonu oluşturma planları ile birlikte, yalnızca daha güçlü hale geliyor.

AMP'yi bildiğinizi mi düşünüyorsunuz? Özel web seminerimizde Instapage ve içerik oluşturucu Google ile çerçevenin efsaneleri hakkında daha fazla bilgi edinin. Ardından, buradan özel bir AMP demosu edinin ve ışık hızında AMP sayfaları oluşturmanın ne kadar kolay olduğunu görün.