Bir Sitenin Uyarlanabilir Mi Yoksa Duyarlı Mı Bulunduğu Nasıl Anlaşılır?

Bir Sitenin Uyarlanabilir Mi Yoksa Duyarlı Mı Bulunduğu Nasıl Anlaşılır? Bazen, bir sitenin hangi mobil yapılandırmayı kullandığını saptamak zor olabilir. Neyse ki, köşe yazarı Bryson Meunier, duyarlı ve uyarlanabilir mekanları ayırt etmek amacıyla detaylı teknikler paylaşıyor.

SEO’ların fazlasının şu an farkında bulunduğu gibi, mobil internet sitesi içeriğini sunmak amacıyla üç ana teknik bulunmaktadır: duyarlı dizayn, uyarlanabilir dizayn (hareketli sunum da adı verilir) ve ayrı mobil URL’ler.

Ayrı mobil URL’leri sadece tarayıcınızın adres çubuğuna bakarak açıklamak basit olsa da, duyarlı ve uyarlanabilir sitelere tek tek bilgi vermek biraz daha çok araştırma gerektirebilir.

Benim içinde mobil atölye ile Shari Thurow SMX West ve SMX Gelişmiş at bu yılın başlarında, katılımcıların birçoğu birbirinden duyarlı ve adapte mobil yapılandırma anlatmak için nasıl olarak karıştı. Bu sebepten bugün tarif edeceğim alıştırmadan geçtim. Umarım, bazılarınızın ayrım yapmanıza yardımcı olur.

Baktığınız sitenin uyumlu veya uyumlu olup olmadığından emin değilseniz, kendinize şu soruları sorun:

Tarayıcınızı bir masaüstü bilgisayardan tekrardan ebatlandırdığınızda şekil değişiyor mu?

Duyarlı sitelerin tarayıcı penceresinin ebatına (sistemi ne olursa olsun) dayalı sistemi değiştirmek, uyarlamalı siteler ise bir mobil aygıtta bulunduğunuzu algılar ve buna göre değişik HTML’ler verir. Bu amaçla, bir sitenin mobil oluşturulandırması amacıyla ayrı URL’ler kullanmadığını biliyorsanız, siteyi masaüzerinde ziyaret edip tarayıcı pencerenizi tekrardan ebatlandırdığınızda ne olacağını görerek, yinelde duyarlı ve uyarlanabilir olarak söyleyebilirsiniz.

Bunu test etmek ister misiniz? Aşağıdaki adımları izleyin:

1. İstediğiniz tarayıcıda WebMD.com ya da mw.com adresini açın (alttaki videolar Chrome kullanıyor). Tarayıcı pencerenizin tam ekran olmadığından emin olun – diğer bir söyleyişle, masaüstünüz gerisinden görebilmeniz gerekir.
2. İmlecinizi tarayıcı penceresinin sağ kıyı üstüne getirin ve pencereyi cep telefonu ekranının ebatına göre yeniden boyutlandırın.
3. Gördüğünüz gibi, sistem, masaüzerinde bile, tarayıcı pencerenizin ebatına göre değişir. Bu, bu sitelerin duyarlı bulunduğu manasına gelir.
4. Buna karşılık, Amazon.com ile aynı şeyi uyumlu bir masaüzerinde yaparsanız, uyarlanabilir, ekranın sağ doğrultusundaki içerik tekrardan ebatlandırılmak ya da diğer bir yere taşınmak yerine kolayca gizlenir.

Ana sayfa kaynak kodunda “responsive” ya da “@media” sözcüğünü bulabilir misiniz?

Duyarlı sitelerin, HTML kaynak kodlarında, adapte sitelerin vakıf olmadığı belirli unsurları bulunmaktadır. Bu elemanları denetim etmek için aşağıdaki adımları izleyin:

1. WebMD.com’u Chrome’da mobil ya da masaüzerinde açın.
2. Masaüzerinde, sayfanın kaynak kodunu görüntülemek için CTRL + U (Windows) ya da Option + ⌘ + U (Mac) tuşlarına basabilirsiniz. Mobil kullanıcılar için, adres çubuğuna gidip manzara kaynağı: kök tesir bölümünden evvelce ekleyebilir ve açık kaynak kodunu girmek amacıyla enter tuşuna basabilirsiniz.
3. Sayfayı, cevap veren şablonları ve stil sayfalarını çağırmak için sayfada tespit edilen “cevap veren” sözcüğünü arayın. Tıklanabilir bir bağlantı olması gereken duyarlı stil sayfasına tıklayın.

Site bir mobil aygıtta (ya da Googlebot akıllı telefon gibi bir mobil kullanıcı aracısı kullanırken) değişik bir içerik ya da değişik bir sistem işaret ediyor mu?

Uyarlanabilir siteler, ekran ebatına bakılmaksızın, kullanıcının aygıtına dayanan bir sayfa amacıyla değişik HTML oluşturur. Bu, bir mobil aygıttaki uyarlanabilir bir siteye – büyük ekrana sahip bir siteye – bakıyorsanız, tekrar de belirli mobil içeriğe hizmet verileceği manasına gelir.

Uyarlanabilir mobil sayfaları masaüstü tarayıcı üstünden denetim edebiliriz. Bu, bir siteyi mobil aygıt kullanıyormuşsunuz gibi görüntülemenizi gerçekleştiren bir tarayıcı uzantısı kullanılarak gerçekleştirilir.

Uyarlamalı bir sayfayı Chrome’da bir kullanıcı aracısı değiştirici uzantısıyla nasıl test edeceğiniz aşağıda açıklanmıştır:

1. Masaüzerinde Chrome’u açın, sonrasında bir kullanıcı aracısı değiştirici uzantısını indirin ve yükleyin. Google Chrome amacıyla Kullanıcı Aracısı Değiştirici’yi tavsiye ederim.
2. Uzantı yüklendikten sonra, www.amazon.com adresine gidin.
3. Sağ üst köşedeki uzantı sembolüne tıklayın, sonrasında kullanıcı aracısını Android Mobile’deki Chrome gibi tanınmış bir mobil kullanıcı aracısına değiştirmek amacıyla açılır menüyü kullanın.
4. Kullanıcı aracısını değiştirdiğinizde navigasyonun değiştiğine ve başlık görüntüsünün ebatının küçüldüğüne ilgi edin. Tarayıcı penceresini tekrardan ebatlandırdığınızda – çok genişlettiğinizde bile – akışkan bir biçimde değişmez fakat aynı görüntünün çevresinde daha çok beyaz alan oluşturur. Bu, kullanıcı aracısına göre sistemini değiştiren uyarlamalı bir sitedir.
5. Birçok sitenin aygıt cinsini hatırlamak amacıyla çerezleri sakladığını unutmamalısınız; bu bu nedenle, kullanıcı aracısını değiştirdikten sonra tarayıcı geçmişinizi temizlemek için kullanıcı aracısını kullanırken en iyi uygulamadır.

Ek sorular

İşte bu hususta da dikkatinizi çekebilecek alakalı birkaç soru:

Duyarlı sitelerden uyarlanabilir bulunduğunu söylemek amacıyla Chrome Geliştirici Araçları’nı kullanabilir misiniz?

Evet, fakat aygıt cinsini Masa-üzerinden Mobil’e ya da tersi yönde değiştirmeden evvelce göz atma işlemişinizi temizlediğinizden emin olun. Daha sonra , bu işlemi takip edin:

1. Amazon.com’u masaüstünde Chrome’da açın.
2. Tarayıcının sağ üst köşesindeki üç dikey noktaya tıklayarak ve sonrasında Diğer Araçlar> Geliştirici Araçları opsiyonuna ilerleyerek Chrome Geliştirici Araçları’nı açın.
3. Geliştirici Araçları’na girdikten sonra, Adım 2’de tıkladığınız noktaların derhal altındaki üç dikey noktaya tıklayın ve Cihaz türü ekle’yi seçin.
4. Aygıtı “Duyarlı” ve Aygıt Türünü “Masaüstü” olarak ayarlayın. Bu, kaydırıcıyı sağa çekerek tarayıcıyı yeniden boyutlandırmanıza izin verir, yukarıdaki bir alıştırmayı taklit edebilirsiniz. Ayrıca, aygıt türünü masaüstünden cihaza değiştirebilirsiniz; bu, ayrı bir kullanıcı aracısı değiştiricisi kurmadan yukarıdaki üç egzersizi taklit etmenizi sağlar. Yukarıdaki gibi, mizanpaj masaüstü ve mobil kullanıcı aracılarından farklı görünüyorsa uyarlanabilir ve site, pencerenin köşesini çekerken ekrana sığacak şekilde yeniden boyutlandırılırsa, aynı zamanda duyarlıdır.