Web Site Mobil Görünümlerini Chrome Tarayıcı ile İnceleme

Web sitenizin Mobil görünümlerini, bilgisayarınızda bulunan Google Chrome tarayıcı “ Google Develeopers Tools ” geliştirici modülü ile ko...

...

Web sitenizin Mobil görünümlerini, bilgisayarınızda bulunan Google Chrome tarayıcı “Google Develeopers Tools” geliştirici modülü ile kontrol edebilirsiniz. Kişisel bilgisayarınızda Chrome tarayıcı kullanıyorsanız web sitenizin değişken mobil görünüm özelliklerini de görebileceksiniz demektir. Kişisel bilgisayarınızda Google Chrome tarayıcı kurulu değilse bağlantı linkini açın veya mevcut tarayıcınız ile, Chrome tarayıcı'yı aratarak bilgisayarınıza indirip kurulum işlemini yapabilirsiniz. Chrome Tarayıcı Kaldırılma-Yükleme gibi sorunlarınız varsa, bağlantı linki ile sorunlarınızın çözümlerini okuyun.

Aşağıda Mobil yapılandırma ile ilgili kısa bir açıklamadan sonra “Google Develeopers Tools” geliştirici modülünü kullanarak Web sitenizin Mobil görünümlerini, Chrome tarayıcı ile İncelemeye başlayaabiliriz.

Mobil web sitenizi oluşturmanın 3 yolu :

Web sitesi oluştururken her tür ve boyuttaki ekrana uygun kullanabileceğiniz üç ana yöntem vardır. Bunlar;

1. Duyarlı web tasarımı: Kullanıcının cihazından (masaüstü, tablet, mobil, görsel olmayan tarayıcı) bağımsız olarak aynı HTML kodunu aynı URL'den sunar, ancak ekran boyutuna göre görüntüyü farklı olarak (yani "duyarlı" bir şekilde) oluşturabilir. Duyarlı tasarım, Google'ın önerilen tasarım kalıbıdır.

2. Dinamik sunum: Cihazdan bağımsız olarak aynı URL'yi kullanır, ancak sunucuda kullanıcının tarayıcısı ile ilgili bulunan bilgilere dayanarak farklı cihaz türleri için farklı HTML sürümü oluşturur.

3. Ayrı URL'ler: Her bir cihaza ayrı URL'lerden farklı kod sunar. Bu yapılandırma, kullanıcının cihazını tespit etmeye çalışır ve sonra kullanıcıyı, Vary HTTP üst bilgisi ile HTTP yönlendiricileri kullanarak uygun sayfaya yönlendirir.
Sayfaların ve sayfa öğelerinin tamamı tüm Googlebot kullanıcı aracıları tarafından erişilebilir olduğu sürece Google'ın, belirli bir URL biçimi için özel bir tercihi olmaz.

Chrome tarayıcı “Google Develeopers Tools” geliştirici modülü kullanımı:

1. Chrome Geliştirici Araçları içinde bir “mobil cihaz emülasyonu” özelliği bulunur. Bu araçlara ulaşmak için;

2. Chrome tarayıcı sağ üst kısımda bulunan yatay üç çizgi icon’a dokunun. Chrome menüsü altındaki bulunan, Diğer araçlar → Geliştirici Araçları'na web siteniz açıkken dokunan.

Chrome tarayıcı “Google Develeopers Tools” geliştirici modül görünümü

3. Web siteniz açıkken, açmış olduğunuz Geliştirici modu üst menüde, yukarıda mavi çerçeve içine alınmış Mobil görünüm seçenler simgesine tıklayın. Açılan pencere üst menüde ilk seçenek “sizde farklı çıkabilir” Galaxy S5 mobil görünümü göreceksiniz.

Hemen alt kısmında bölümlere ayrılmış yatay uzun bir çizgi mevcut. Yatay bölümlere ayrılmış her bölüme tıklayın. Farklı mobil görünümleri izlemiş olmalısınız.