Sayfa Gezinme

Son makaleler:

latest

YAYIN AKIŞI:

Tümünü Görüntüle

Blogger Blogunu Mobil uyumlu ve Hızlı Düzenleme İpuçları

21 Nisan 2015 Google Mobil uyumluluk süresinin son günü. Web site niteliğindeki Blogger ile oluşturulan blogunuzun Google arama sonuçlar...

...
21 Nisan 2015 Google Mobil uyumluluk süresinin son günü. Web site niteliğindeki Blogger ile oluşturulan blogunuzun Google arama sonuçlarında hatasız, hızlı ve mobil uyumlu çalışabilmesi için küçük ipuçları. Mobil uyumlu bir web site görünümü, kullanıcının mobil cebinde iken yatay kaydırma yapmadan dikey kaydırma ile siteleri hızlı ve doğru bir formatta görebilmesidir. Blogger şablon kodlarınızı açıp incelerseniz blogger genişlik ayarlarının sabitlendiğini ve bu kodların da yıllar öncesinden beri olduğunu anlayabilirsiniz. 

Bu kodlama aynı zamanda şablon mobil görünüm önizleme bölümündeki muhtelif temalar ile de desteklenmiş kullanıcının yapacağı hatalar burada bulunan temalar sayesinde pozitif duruma çevrilmesi sağlanmıştır. Ancak şablon özelleştirme bölümündeki genişlik ve sidebar ayarları tamamen kullanıcının insiyetifine bırakılmış. Zaman çok kısa olması nedeni ile günlerdir yazılan çizilen anlatılan uzun uzun konular için zamanınız yoksa aşağıda anlatılan işlemleri blogunuz da kontrol ederek hızlı ve mobil uyumlu duruma getirin.

Blogger blogunu Mobil uyumlu ve hızlı yapma ipuçları :

1. Blogger kumanda paneline giriş yapın.
2. Şablon → Mobil → Dişli çark tıklayın ve üst kısımdaki ilk seçeneği seçerek mobil görünüm aktif değilse aktif duruma getirin.
3. Mobil şablonu seçin : Bu kısımda Blogger’u ilk kurduğunuzdaki ayarlarlar varsayılan olarak gelmektedir. Bu ayarları değiştirdi iseniz Varsayılan olarak belirleyin. Önizleme yapın görünüm sizce doğru ise kaydedin. Doğru bir görünüm elde edene kadar temalar arasında gezinin. Uygun temayı yakaladığınızda kaydedin.
4. Blog’unuzun olması gereken şablon değerleri : Siz ne kadar büyük tema kullanırsanız kullanın şablon kod'larınıza eklenen özel mobil kodlar olması gereken değerleri gösterecektir.
Olması gerekenler nedir ? Merak ediyorsanız şu adımları takip edin. Şablon → Html’yi düzenle seçeneğini açın.
5. <head> başlangıç altındaki kodları incelediğiniz de şablonun 1100 Px. genişliğini geçmeyecek scala tabir edilen kodlamalar ile belirlendiğini görebiliriniz. Yani bu kodlar scala 1.0 minimum ve maximum, görüntülenme (viewport) değerleri ile komut olarak belirlenmiştir. Blogger şablon kod görüntüsüne tıklayıp aşağıdaki resmi inceleyin.
6. Blogger şablon → Özelleştir → Genişlikleri ayarla, Maximum genişlik 1100 px. geçmeyin.
7. 2 sütunlu sidebar kullanıyorsanız verilen genişlik boyut ayarını değiştirmeden sidebar genişliğini düzenlemeye çalışın. Genişlik ayarı olan 1100 px. değeri sabit olduğu sürece sidebar genişliği genel genişliği etkilemeyecek tema kendi içinde büyüyüp küçülecektir. Genişlik ve sidebar boyut resmini tıklayarak inceleyin.
8. Web siteniz bu ölçülerde kaldığı sürece Google Mobil uyumluluk teslerini geçebilirsiniz.
Blogger şablon kodları sayesinde blogunuzu ne kadar büyük yaparsanız yapın mobil görünüm ile uyumlu olacaktır. Ancak temanın büyük olması tarayıcı açılış hızını etkileceğinden birçok mobil cep telefonlarında görülemeyecek, bunun sonucu Web yönetici araçları → Arama trafiği → mobil kullanabilirlik bölümünde hatalı url olarak karşınıza çıkacaktır.

Sitenizin hızlı açılması ve mobil uyumluluk ipuçları :

1. Mümkün oldukca gereksiz aşırı eklentilerden kaçının.
2. Tarayıcıları zorlayan çok büyük resimler eklemeyin. Büyük resim ekleyecekseniz mutlaka resimlerinizi sıkıştıran siteleri kullanın.
3. Ana sayfanızda tarayıcıları etkileyen ses eklentileri gibi Javascript kodlardan kaçının.
4. Blog ana sayfanıza eklediğiniz haber sitelerinin banner resimleri web sitenize hiç değer katmadığını tam tersi banner’ini eklediğiniz sitelere link vererek kendi değerinizi düşürdüğünüzü bir kez daha hatırlatmak isterim. Banner veya haber sitelerinin görselleri ile arama sonuçlarında üst sıralarda görülmeniz sitenizin üst sıralara taşındığının ifadesi olmamakla beraber organik olmayan bir seo çalışması niteliği taşımaktadır. Sonuçlarda çıkan yazıya tıkladığınızda gidilen sayfa haber siteleridir. Bu durumda haber sitelerine çalışmış olmaktasınız. Karar ve sonuçlara katlanmak da sizin özgür düşünceniz ile sonuçlanacaktır.

Yukarıda anlatılan basit adımları takip ederek gereken düzenlemeleri yaptı iseniz ; Web site Hız ve Mobil uyumluluk testlerini kullanarak kendinizi sınayın.
PAGESPEED VE MOBIL UYUMLULUK TEST :
PageSpeed Insights Test Aracı
Mobil Uyumluluk Test Aracı

3 yorum

  1. Meraba,
    Bir yazınızda eski editör penceresine göre eklenen resimlerin;
    İlk resmin çok büyük, diğer resimlerin geniş olarak ayarlanması durumunda mobil görüntülemede sorun yaşanmayacağınızı yazmıştınız.
    Yeni tasarıma göre;
    Çok büyük=Orijinal boyut,
    Geniş=Büyük,
    Ebatlarına karşılık geliyor.
    Bu şekilde ayarlamamız mı gerekir yoksa ayar farklı mı olacak bilgilendirirseniz sevinirim. Teşekkürler.

    YanıtlaSil
  2. Meraba,
    Mobil sayfayı özele göre ayarladım, gelişmişten de 1100-300 şeklinde ayarladım.
    Hem masaüstü hem mobil görünüm 1100'e göre ayarlandı.
    Sizin site masaüstü görünümde 1100 den daha geniş bir alanı kullanıyor.
    Masaüstü için daha fazla genişliği farklı bir yerden mi ayarlıyorsunuz?
    Yoksa ikisi de aynı mı olmalı?

    Bir başka sorum özel ile diğer temalar arasındaki fark nedir? Özel tema gadgetlerin dizaynında kolaylık oluyor. Yoksa temanınki ile aynı mı olmalıdır?
    Teşekkürler.

    YanıtlaSil
  3. Bu yazıdaki bir çok kriter değişti. Resimlerim yerleştirilmesinde mobil uyuma dikkat etmek gerekir. Resim büyükse sola yanaştırmak gerekiyor.

    YanıtlaSil

Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.