Websitenizi AMP’ye nasıl geçirirsiniz?

 

AMP’li sayfalar maksimum 1 saniye içinde açılır. AMP olmayanlar ise minimum 2 saniye  içerisinde ortalama ise 3 3,5 saniye yalnız %300 gibi bir değişiklik olduğundan kullanıcı deneyimini mükemmele taşıyor. İnternette değil de dosyalar arasında geçiş yapıyorsunuz gibi oluyor. Bunun yapılmasının temel nedeniyse progressive web app dediğimiz gelecek web teknolojisi. İleride mobil uygulamalar olmayacak. Web siteleri birer mobil uygulama olacak. Uygulamalar da kimse beklemek istemez pat pat pat kullanmak ister 🙂 O deneyimi şu anda AMP kısıtlı olarak yaşatıyor işte.

Bugün sizlere AMP (Accelerated Mobile Pages)  uyumu konusunda videolu, görsel bir eğitimde bulunacağım.

AMP Genel Mantık

Şimdi Javascript websitenizde sepete eklerken, bir şeye tıklanıldığında sayfa yenilenmeden işlemleri gerçekleştiren tarayıcının programlama dili oluyor. Bizim web sitemizde bir çok <script> etiketi var bunları gerçekleştiren. Yine CSS Stil şablonu yani bir tamamen stil özelliklerini tarayıca anlatan dosya. İşte hem bu <script >etiketlerinden hem de bu stil şablonu dosyasından tek bir adet istiyor. Bunu da yalnızca kendi versiyonu ile istiyor. Tamamen kendi kurallarını kullanarak ve bu kurallar içerisined hem Javascript, hem CSS hatta HTML tarafında (img etiketi yok misal amp-image etikei var) yalnızca kendi etiketleri var. Sayfaların en başında  <html> etiketi bulunur. Bu html etiketini <html amp> yapıyoruz ve o andan itibaren tarayıcı o sayfayı amp özelliklerine göre derliyor. Yani demem o ki bizim bu AMP’ye geçmemiz için tüm özelliklerimizi yeni baştan AMP’ye göre oluşturmalıyız.

 

  1. Tüm <script> etiketlerini kaldırın
  2. Yalnızca bir adet CSS olabilir. Bu da
    <style amp-custom> 
    </style>

    şeklinde koyulabilir. Tüm CSS’leri bir araya getirin ve bu CSS dosyasının boyutu 50 kb’yi geçmesin

  3. Belgenin başına <!doctype html> ekleyin
  4. Html etiketinin AMP  <html amp> özniteliğini ekleyin
  5. <link rel="canonical" href="$SOME_URL" /> $SOME_URL web sitenizde bulunduğunuz sayfayı gösterir.
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width,minimum-scale=1">
  8. <style amp-boilerplate>body{-webkit-animation:-amp-start 8s
    steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end)
    0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal
    both;animation:-amp-start 8s steps(1,end) 0s 1 normal
    both}@-webkit-keyframes
    -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
    -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
    -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
    -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
    -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
    amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  9. <script async src="https://cdn.ampproject.org/v0.js"></script>

WordPress için

İşte hazır bir altyapı kullanmanın avantajlarından bir tanesi! Popüler içerik yönetim sistemlerle ilgilenen geliştiriciler de fazla olurlar. Bu nedenle bir güncelleme olduğunda eklentiye çok hızlı bir şekilde ulaşabilirsiniz.

WordPress’in kendi yayınladığı AMP eklentisi
WordPress AMP eklentileri içerisinde popüler olan

Joomla için

Joomla AMP eklentisi

 

 

 

Türkiye’deki kullanıcı deneyimi yüksek mobil websiteleri

Mobil uyum temelde içerik sitelerinde reklam geliri artışı, e-ticaret sitelerinde ürün satışı ve marka/banka gibi sitelerde kullanıcıya verilen değeri diğer bir manada “marka değerini” oluşturur. Bir websitesinin mobil kullanıcı deneyiminin yüksek olması ise genel olarak şu parametrelere bağlıdır.

www.isbank.com.tr en fazla dikkat çekeceği ve özellikle vurgulanması gereken web siteleri kullanıcının hata yapma payının azaltılması veya daha fazla satış yapan web siteleridir. Satış yapan web sitelerinde birbirinden farklı sayfa sayısının fazla olması her sayfa için titiz bir çalışma gerektirir.

Türkiye’de de kullanıcıya oldukça basit, herkesin kullanabileceği mobil versiyon / responsive web sitelerini sizler için derledik. İşte en beğendiklerimiz;

hepsiburada.com.tr


n11.com


netinternet.com.tr


www.isbank.com.tr


sm724.com

AMP (Accelerated Mobile Pages) Google için neden önemli?

Accelerated Mobile Pages Project

AMP daha hızlı dolayısıyla daha iyi bir mobil kullanıcı deneyimi oluşturmak amaçlı bir yöntem.

Bu yöntem sadece temel HTML özelliklerini kullanarak mümkün olduğunca gereksiz yüklemelerden sizi kurtarıp direkt olarak zengin içeriğe odaklamayı hedefliyor.

Bunla da kalmıyor, girdiğiniz sayfaların önbelliğini alıyor ve daha sonra girdiğinizde sayfayı tekrar yüklemek yerine önbellek üzerinden alıp yalnızca içeriği değiştiriyor. Bu şekilde içeriğin temiz ve direkt olarak yüklenmesi sağlanıyor.

Google için neden önemli?

Google için önemli olan içeriktir. Daha doğrusu kullanıcısına vereceği maksimum faydadır. Bu fayda içerisinde en çok kullanılan ürünü ve gelir kapısı Google Aramadır.

Google Arama günümüzde 200’den fazla sinyal alıp bir sıralama gerçekleştirir. Bu sıralamayı sağlayan temel faktörler güncellik, içerik ve temel olarak güvenilirliktir. İçerik en can alıcı noktalardan biridir. Google web sitelerinde her içeriği anlamlandıramayabilir. Halbuki scheme yapıları içerisinde içeriği zenginleştirdiğimizde Google anlamadan biz içeriğimizi göstermiş oluruz.

AMP sayfalar hem yalınlık, hem de zenginleştirilmiş içeriklere sahiptirler, işte tam bu nedenle Google mobil aramalarda hem kendi aramalarını geliştirip hem de kullanıcı deneyimini iyileştirecek bir çözüm oluşturabilir.

Şu anda AMP’nin internette yaygınlığı çok yaygın değil. Muhtemelen AMP bir yıl sonra mobil uyumlaşacak, daha fazla yaygınlaşacak. Sonuçta internetin devi Google, bizler ise Google’ın müşterisiyiz.

Güncelleme : 01.06.2017

Bu konuda Google için herhangi bir yaptırım (AMP yapan siteleri öne çekme) yok. Fakat öyle tahmin ediyorum ki kulislerde ne zaman bir yaptırım uygulasak diye konuşuyorlardır veya hala erken görüyorlardır. Yani demem o ki birgün mutlaka AMP gerekli olacak. Şimdiden geçmeniz sizin yararınıza.

Responsive mobil web sitelerin küçük püf noktaları

Bu resim ironegg.com adresinden alınmıştır.
Bu resim ironegg.com adresinden alınmıştır.

Normal web sitesine geri dön

Backto website

Bazı web sitelerinde kullanılan Iframeler nedeniyle bunu mutlaka koymalıyız. Öyle ki bağlanılan başka bir web sitesi eğer mobil uyumlu değilse ve responsive yapıdan kurtulamıyorsak web sitesinin işlevini tamamen yitirmiş oluyoruz. Ayrıca güncelleştirmeler çoğu zaman her haliyle test edilmez veya buglar keşfedilebilir. Bu nedenle bir takım sayfalarda sorun yaşandığında geçiçi çözüm yolu olarak kullanılabilir. Bunu da Cookie ile sağlayabiliriz.

Menülerin animasyonu pozisyonlara göre konumlanmalı

İnsanlar aslında teknik insanlardan ziyade buttonun aslında <button> olduğunu bilmezler. Kullanıcı için button’un anlamı başka bir hissiyat taşır. Tıklandığında fiziksel bir takım etkileşim yaşar ve buna göre pozisyon almasını ister.

true-mobile-experince

Üst bölümde olan menülere tıklandığında menünün animasyonu yandan değil üstten gelmelidir. Çünkü bizler bugüne kadar bu tür evrimsel süreçten geçtik ve bir anda bıraktığımız şeyler aşağıya düştüler. Hatta zamanınız varsa button gerçekten button gibi davranarak menün altından animasyon ile çıkmalı.

Yan menüler ancak aşağıdaki gibi kullanmalı. (Yan menü butonu varsa)

SideMenü
SideMenu

Mobil uyumlu <table>

Table mobil uyum süreci için her zaman sıkıntılıdır.  Çünkü table gösterimler mobil için tasarlanmamışlardır. Bu durumun en kötü tarafıysa şu anda maalesef alternatif gösteriş şeklimizin olmayışı (En azından bilindik yok). Bu durumun nedeni table gösterimin gerek iş dünyasında gerekse karşılaştırmalı ifadelerde uzunca bir süredir kullanılıyor olması olarak düşünüyorum. Bu nedenle bu probleme çözüm bulmalıyız.

Düşündüğümüz ve kullanılan çözüm önerileri;

Mobil telefonlarda en fazla 3 adet kolon gösterilmelidir.
Google’ın bulduğu çözüm de 3’lü olmasını öneriyor. Ayrıca Google son kolonu kaydırır bir şekilde kullanıyor. İnsanlar şu anda kayan bir deneyime alışkın değiller ve menüyü kaydırmak psikolojik olarak insanlara zor geliyor. Bu nedenle önerimiz tam olarak son iki veya son kolonu açılır menü ile kullanıcıya sunmak yani şöyle bir şey;

Filament Responsive Table
Filament Responsive Table

LIVE DEMO

 

 

Google Arama Araçları Mobil Görünüm

Kayan çubuk

Google’ın mobilde de arama çubuğunun olduğunu biliyor muydunuz? Bilmiyordunuz! Çünkü öyle bir yere saklanmışkı varlığından habersizsiz.

google_search_metaTool

Mevcut mobil görünüm hali

içerik

Olması gereken:

google_search_lorem

Google şu anda halihazırda tarayıcı ve telefonlara göre farklı kullanıcı deneyimleri sunmakta; fakat Google gibi internete eş değer sempatik bir şirketten beklentilerimiz yüksek. Ayrıca bu hataların insanları yeni deneyimlere alıştırmak için yaptığına inanıyorum.

Son olarak web sitelerini tasarlayanlar site kullanıcılarının deneyimini baz alarak tasarlarlar.

Kullanıcı deneyiminin aldığı genel parametreler

  • Bilgisayar kullanma yetkinliği
  • Mesleği
  • Web sitesinden almak istediği
  • Çoğrafi etken
  • Yaş
  • İlgi alanı
  • Ekran boyutu

ve benzeri bir çok etkene dayanır. Fakat bunların hepsini bir araya topladığınızda genel olarak üç ana kategori belirlenir bunlar ise;

  • Rahat kullanım
  • Kulanıcının isteğini (Doğru sayfalarda veya ekran boyutlarında saptama) karşılaması