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.

CSS Medya Sorguları & Boş Alanların Değerlendirilmesi

Bu paylaşımımızda CSS-Tricks websitesinde anlatılan bir konuyu türkçeleştirerek yabancı kaynaklardan faydalanabilme imkanı verebilmeyi amaçlıyoruz. Orijinal yazıya bu linkten ulaşabilirsiniz.

Bu yazımızda tasarım dokunuşlarına biraz daha küçük bir pencereden bakacağız. Aynı zamanda bu mobil uyum medya sorgularını tek bir “stylesheet” üzerinde inceleyeceğiz.

Harici bir “stylesheet” çağırımı CSS medya sorgusu kalıplarında aşağıdaki gibidir:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />



Linkin “media” özelliğine aşina olabıilirsiniz, “screen”, “print” ve hatta arada bir virgül ile “screen, projection” şekilinde kullanıldığı dahi oluyor. “media” özelliği doğrudan CSS içerisine şu şekilde dahil edilebilir:

@media screen {
  body {
    width: 75%;
  }
}
@media print {
  body {
    width: 100%;
  }
}

Buna benzer şekilde daha ileri bir CSS medya sorgusuyla aşağıdakini de yazabilirsiniz:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

CSS dosyasında dilediğiniz kadar medya sorgusu kullanabilirsiniz. Şunu da unutmamak gerekir ki, “&” ve operatörüyle birden fazla medya sorgusunun doğruluğunu test ederken “,” veya operatörüyle gruplama,  not anahtar kelimesiyle de mantık işlemleri yapılabilir.

Örnek

Farz edelim ki duyarlı en (width) tasarımımızda web sayfasının %35’inde yanal bar var (sidebar). Bu yanal barın sitenin genişliğine göre oldukça dar veya geniş olabileceğini gösterir; bu durum duyarlı tasarımın doğasında vardır. CSS medya sorgularını kullanarak, “tarayıcı ekranı darsa bunu yap, genişse bunu yap, gerçekten çok geniş ise bunu yap” diyebiliriz. Ayrıca, genişlikle oynamak medya sorgularıyla yapılabilen işlerden yalnızca biridir.

Örnek yan barımızda “Süper Takım” adlı isim listesini email linkleri şeklinde tanımlayacağız. HTML oldukça basit:

<ul id="nav">
   <li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
   <li><a data-email="elisabeth@moss.com" href="mailto:elisabeth@moss.com">Elisabeth Moss</a></li>
   <li><a data-email="amanda@righetti.com" href="mailto:amanda@righetti.com">Amanda Righetti</a></li>
</ul>

Yalnızca link listesi. “href” özelliği “mailto:” linki. Gözünüzü ısıran tek bir şey varsa o da “data-email” kısmıdır. HTML5’te veri saklamak için “attribute”lar (özellik olarak bahsedildi) kullanılabilir.

Varsayılan liste CSS’i aşağıdaki gibidir:

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

Dar tarayıcı ekranlarında varsayılan tasarım kodları geçerli olur: Yalnızca link listesi. Ancak tarayıcı ekranı genişledikçe, örnekte 520px ile 699px aldık, açılan ekstra boşluğu mail ikonlarını yerleştirmeye kullanacağız.

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

700px’den 1000px’e doğru ilerlerken yine ekstra boşluğu yalnızca ikonu kullanarak değil bir de “Email:” yazısı ekleyerek değerlendireceğiz.

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

Hala geniş ama 1001px’in üzerine çıktığımızda gerçek anlamda email adresleri linklerin yanlarına yazdıracağız. İşte tam olarak burada HTML5 veri özelliğini(attribute) kullanacağız.

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

Ve gerçekten büyük genişliklerde, 1151px üzeri, tekrar ikonları link ve email adreslerinin yanlarına ekleyeceğiz. İşin güzel yanı, tekrar aynı kodları yazmak zorunda kalmıyor oluşumuz. Tek yapmamız gereken medya sorgusuna yenisini virgül kullanarak eklemek.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Şimdi hepsi birden!

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Tarayıcı desteği

Medya sorguları için tarayıcı desteği şaşırtıcı bir şekilde yaygın. Yukarıdaki örneği Firefox, Safari(Mobili dahil), Chrome ve Opera destekliyor. IE 9 ve sonrası destekleyecek ancak 8 ve düşük versiyonlar desteklemiyor. Olur da IE 8’e uygun yazmak isterseniz JavaScript kullanabilirsiniz.

Farklı sorgularda deneyimlerin farklı olacağını da unutmayın. Örneğin iPhone tüm genişlik sorgularını desteklerken cihaz oryantasyonunu desteklemiyor. iPadlerde sorun yok.

Medya sorgularına eklemeler

Genişliği ölçmek pratik açıdan güzel bir örnek ancak tek kullanım da bunla sınırlı değil. Aşağıda bazı alternatif kullanımları görebilirsiniz. Tamamı daha fazla.

Türler

HTML4’te medya tipleri mevcuttu: auralbraillehandheldprintprojectionscreentty, tv. HTML5 ihtiyaca göre ekleme yapabilir. “3d-glasses” özelliği dahil edildi, gerçekten harika. “all” kelimesi tüm sorguları dahil eder.

@media screen, projection { ... }

Boyutlar

Boy ve eni alabilirsiniz ama bu durumda tarayıcının o anki ekran boyutunu almış olursunuz. Kendilerini kullanabilirsiniz ama oldukça ender bir durum olması gerekir. Hem en hem boy (width, height) min/max değerler alırlar. Şu şekilde kullanılabilir: min-widthmax-widthmin-heightmax-height.

@media (min-device-width: 640px) { ... }

Oryantasyon ve Yön

Yöne ve oryantasyona göre sorgu yazılabilir: device-aspect-ratio.

@media screen and (device-aspect-ratio: 16/9) { ... }

Ya da ekran dik veya yatay konumdaysa:

@media (orientation:portrait) { ... }

Renk

Sorguyu ekranın rengine göre de yapabilirsiniz.

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

Diğer yerlerde medya sorguları

Makalenin orijinalinin alındığı linkten diğer developerların çalışmalarına yönlendirilmiş linkleri bulabilirsiniz: Buradan.

Simenty Resmi Simülasyon Aracı : Browserstack

 

http://www.bryntum.com/wp-content/uploads/2014/06/browserstack-logo-600x315.png
Web tasarımcılarının en büyük sorunlarından birisi oluşturulan tasarımın tüm tarayıcılarda aynı şekilde görünmemesidir. Bunun başlıca nedeni yazılan Html, CSS ve Javascript kodlarının farklı şekilde yorumlanmasıdır. Oluşturduğunuz siteyi kullanan kişiler Internet Explorer, Mozilla, Chrome, Firefox, Opera, Safari hatta iOS ve Android gibi farklı tarayıcılardan sitenize erişmek isteyebilir. Bu yüzden oluşturduğunuz sitenin bu tarayıcıların hepsinde düzgün bir şekilde çalışması gerekir.
Oluşturduğunuz herhangi bir veriyi değişik tarayıcılarda test etmek gerçekten zordur.Bunun için bir çok tarayıcıda , platformda manuel test yapmak gerekir.
Browserstack ise 300’den fazla farklı tarayıcıda test etme imkanı ile farklı işletim sistemi , farklı tarayıcılar , farklı sürümlerle sitemizi test edip, ekran görüntüsünü bizimle paylaşır.
Browserstack bu alanda oldukça iyi, ancak ücretli. Denemek için ilk yarım saat ücretsiz. Ancak Browserstack kullanıcılarından aldığı ücretin karşılığını detayları dahi değerlendirişiyle hak eder. Tüm tasarımların duyarlılığını test eder. Bu sistem telefon, tablet ve Pc gibi popüler cihazları içerir ve sürekli olarak pazar eğilimleri ve değişiklerini takip ederek listesini günceller.
Küresel anlamda 30.000 den fazla müşteri tarafından güvenilmeside buradan geliyor diyebiliriz. Bunun yanında isimlerini yakından tanıdığımız Microsoft, Adobe, Wikipedia gibi müşterilerini görmek güven duygusunu arttırıyor.
Browserstack’in test özelliğinin herhangi bir kurulum ve ya yapılandırma gerektirmemesi ve sorunsuz bir şekilde test etmesi verimliliği daha da yukarılara çekiyor.

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ı

Etohum Ortaklığı

Etohumla olan ortaklığımız 2016 Ocaktan itibaren başladı. Etohum türkiyedeki en büyük kuluçka merkezleri ve hızlandırıcılardan bir tanesi. Bu Simenty’nin büyüyebilmesi ve daha fazla müşteriye ulaşabilmesi için paha biçilemez bir fırsat. Önümüzdeki haftalarda yeni haberlerle, bizi takip edin.

2016.etohum.com

 

12650998_737641709669088_8442339191243369096_n CZ-iSI9WkAAbFLh

Responsive neden giderek önemli hale geliyor?

Açıldığı platforma göre tarayıcı boyutunu otomatik algılayan ilk site ‘Razorfish’ adlı firmada yaratılan bir takım ile 2001 yılının sonuna doğru yapılan Audi.com sitesiydi. Aslında her şey onlarla birlikte başladı. Web siteleri için yeni bir çağa girmiş olduk.

O site kullanılan herhangi bir cihazda sıvı gibi girdiği ekran büyüklüğüne kendini otomatik sığdırabiliyordu. Bu da demek oluyor ki siteyi rahatlıkla kullanabilmek için parmaklarımızla ekranı küçültüp büyültmekle uğraşmak zorunda kalmıyorduk. Her şey çok açık ve güzel dizayn edilmişti.

Bu Duyarlı Tasarım nedir?

        Duyarlı Tasarım girdiğimiz web sitenin görsellerinin ve içindeki her şeyin kullanıldığı cihaza göre boyutu otomatik olarak algılayıp ona uygun bir şekil alan mucizedir. Bu da demek oluyor ki site dizayınını her platformdan aynı kalitede elde edebiliyorsunuz. Masaüstü bilgisayar ekranı gibi büyük ekranda site bilgilerini birkaç kolondan oluşan detaylı bilgi alabilirken telefon ya da tablet gibi küçük ekrandan oluşan cihazlarda aynı bilgi tek kolona indirilmiş şekilde ancak ona göre düzenlenmiş ve çözülmesi kolay hale getirilmiş olur.

Yukarıda açıkladığım şeye bakıldığında insanların kafasında bu yeni tasarım düzenini neden önemsemeliyiz ya da bunun avantajları nedir gibi soruları olabilir. Avantajlarına gelecek olursak;

  • Zaman Kazandırması

 Artık aradıklarımıza ulaşmaya çalışırken tonla veri dolmasını beklemek ya da küçücük ekranda yakınlaştırıp uzaklaştırma derdi kalmadı. Bu tarz eski düzene göre hazırlanmış bir siteye giren kullanıcı birkaç dakikasını o karmaşık düzende istediğini aramak için uğraştıktan sonra bunna değmeyeceğini farkedip araştırmasını orada sonlandırabilir. Biz bu durumun başımıza gelmesini istemeyiz.

  • Google tarafından tavsiye edilmesi

Biliriz ki  Google firması piyasanın büyük patronlarından biridir. Google 2013 yılında arama motoru piyasasının yüzde 67’sine sahipti. Hala daha yıldız gibi yükselmekte ve bunu en popüler arama motoru haline getirmektedirler. Onlar bir şey söylüyorsa, bunu dinlemekte fayda var.

Ama neden Google Duyarlı Tasarım’ı tercih ediyor? Bütün siteler bir tane URL ve aynı HTML’ e sahiplerdir bütün cihazlarda. Ana site yani masaüstü büyük ekranlara göre hazırlanmış siteler ve mobil siteler, farklı URL ve HTML’e sahiptirler. Bu durum Google firmasını aynı sitesinin birkaç versiyonunu bulundurmak zorunda bırakmakta.

Bunun dışında, eğer sadece tek bir sürüm olursa,  diğer kullanıcılarla paylaşmak çok daha kolay hale gelmekte. Google bunun tam bir hayranı, neden mi? Şu şekilde düşünün, birisi mobil içerik bulunduran bir site linki paylaştığında, karşı taraftan buna denk gelen ve masaüstü bilgisayarından açan diğer kullanıcı, mobil olarak tasarlanmış sitenin az öğesi yüzünden mutsuz olacaktır.

  • Daha Ucuz

Duyarlı Tasarıma sahip olmak demek tek bir siteye sahip olmak demektir. Diğer senaryo ise bir taneden daha fazla web sitesi bulunduracaksınızdır. Açıkça görüldüğü üzere bir site iki siteden haliyle daha ucuza mâl olacaktır.

Diğeri ise iki web sitesi sizi ikisininle de ilgilenmeye zorlayacaktır ve bu bir süre sonra karışık ve sinir bozucu hale gelecektir.

  • Düzenlemesi çok basit

Farklı platformlara özgün ayrı ayrı sitelere sahip olmak, ayrık bir SEO(Arama Motoru Optimizasyonu) gerektirmekte. Tek bir site ve SEO’yu idare etmek ayrı sitelere göre tabi ki daha kolay. Ayrıca duyarlı tasarıma sahip sitenin bize kazandırdığı bir şey daha var. Duyarlı sitemizi arama motorlarında popüler olan  kelimelerle en uygun hale getirebiliriz. Bu şu demek; örneğin, birisi gideceği restorantı araştırıyor ve “yakınlarda” anahtar kelimesini arama çubuğuna yazıyor. Buradan bizim uygun hale getirdiğimiz sitemiz aramada en üstte çıkıyor. Ancak, ayrı yaratılmış mobil sitelerde bu özellik malesef bulunmamakta.

DUYARLI TASARIMLA IYI GEÇINMELIYIZ

2001’in sonlarından bu zamana duyarlı tasarım için belki bizim için bir trend idi. Ancak artık değil, BİZİM İÇİN BİR ZORUNLULUK OLDU. Güzel dizayn edilmiş, tüm içeriklerin düzgün sıralanmış olduğu ve hangi platformu kullanırsa kullansınlar tüketicilere her yoldan ulaşma şansı sunabiliyoruz. Bu şansı kaçırmayın, hala daha iyisi olabilmek için vaktiniz var!