Web Siteni Mobil Responsive Yapma Kodları

Cepten girenlerin sayısı çığ gibi büyüdüğü bu günlerde web sitesi olanların, mobil uyumlu siteler kervanına katılma zamanı gelmiş demektir.Ayrıca mobil tema desteği olan siteler arama motorlarınca önemsendiği için sıralamada öncelik veriliyor.Son zamanlarda Responsive tema ön plana çıktığı için kısaca bu konu hakkında bilgi vermek istiyorum.

Responsive Tasarım Nedir?

Responsive Tasarım:
Kullanıcının girdiği ekran boyutlarına uyumlu tasarımlardır. Yani siz tablet,telefon bilgisayardan girdiğinizde o cihaza uyumlu hale gelen, yapılan tasarım ekrana tam olarak oturan  tasarımlardır.
Responsive tasarım 3 aşamada yapılır.
Bilgisayar ekranlarına uyumlu responsive tasarım
Tablet boyutlarına uyumlu responsive tasarım
Telefon boyutlarına uyumlu responsive tasarım

Mobil Site Hız Testi Nasıl Yapılır?

Mobil sitenizin hızını test etmek artık çok kolay. testmysite.withgoogle.com/intl/tr-tr/
sayfasına site ismini yazarak mobil hızını ve uyumluluğunu analiz edebiliyorsunuz.

Bedava Sitem Kullanıcılarına Mobil Site Desteği Veriyor

Benim sitenin uzantısı gibi sonu tr.gg ile biten bütün sitelerde mobil uyum desteği var.Eğer kullanıcılar isterse mobil site kısmını kendileri de özelleştirebilirler.

Bedava Sitem Mobil Temanın ilgili ID ve CLASS etiketleri şunlardır. Bu etiketleri kullanarak BS mobil tasarımı özelleştirebilirsiniz. İlgili CSS kodlamalarınızı Tasarım > Mobil Tasarım > Bir alt sayfanın içerik metni (örneğin CSS kodu kullanılabilir) bölümüne yerleştirmelisiniz.
Etiketler şunlardır:

.ui mobile .ui header { } İsminden de anlayacağınız üzere en üstteki menü ve sitenin isminin de yer aldığı yatay alan. 
.ui-footer-fixed { } Yine isminden de anlayacağınız üzere en alttaki bazen reklamların yer aldığı yatay alan. 
.ui-body-c { } veya .ui-overlay-c { } Mobil tasarımın vücudu, yani sıklıkla arkaplanı boşlukları ayarlamak için kullanılan etiket. 
.ui-content { } Mobil tasarımda sayfa içeriklerinizin yer aldığı alan. 
#nav-panel { } Sol taraftaki menü panelinin etiketi. 
.ui-link-inherit { } Menüde yer alan linkler için düzenleme yapabileceğiniz etiket. 
#add-form { } Sağ taraftaki + butonuna tıklayınca açılan alan. 

Not: Kodlama bilgim olmadığı için örnek kodlama için dönüş bekliyorum.

isacotur Blog Mobil Site Görünümü

Accelerated Mobile Pages (AMP) Nedir?

Google’ın Ekim 2015’te açıkladığı “Hızlandırılmış Mobil Sayfalar Projesi” (Accelerated Mobile Pages Project kısa adıyla AMP) yoğun mobil İnternet kullanıcılarında etkin hale gelmeye başladı.

Accelerated Mobile Pages, yani Hızlandırılmış Mobil Sayfalar sayesinde google kullanıcı tarafında daha hızlı yüklenerek mobil İnternet kullanıcı deneyimini artırmayı hedefler.Kısaca mobil sayfaların daha hızlı açılmasını sağlayabilecek kodlama yöntemidir. Google AMP yönergelerine uygun ve doğrulanmış sayfalar Google önbelleğinde saklamaya devam eder.

AMP Ne Gibi Faydalar Sağlar?

Mobil bazlı organik trafik ve daha yüksek reklam dönüşüm performansı ön plana çıkıyor. AMP projesini uygulamaya başlayarak ziyaretçilerinizi tekrar kazanmayı deneyebilirsiniz. Özellikle mobil cihaz kullanıcılarını hızlı açılan metin reklamlar ön plana çıkıyor.

Mobil uyumluluğun bir sıralama faktörü olduğunu düşünürsek, AMP kullanımı yaygınlaştıkça Google AMP versiyonuna sahip sayfaları daha üst sırada göstermek için algoritması ile sizde üst sıralarda olabilirsiniz.

Web sitenizin AMP Hatalarına Nereden Bakılır?

Web sitenizin veya sitenizde bulunan bir sayfanın amp görünümü merak ediyorsanız yapmanız gereken şey linkin sonuna /amp yazıp enter tuşuna basmanız yeterlidir.

Bu yazının amp görünümü şu şekildedir.

https://isacoturoglu.com.tr/code/mobil-responsive-yapma-kodlari.html/amp

Ayrıca sitenizde oluşan ve farkında olmadığını AMP hatalarını ise google tools uygulamasında arama bölümü kısmı içinde bulunan hızlandırılmış mobil sayfalar kısmından takip edebilirsiniz.

GOOGLE 1. SAYFADA ÇIKMAK

Google 1. sayfada çıkmak için kendi denediğim ve çok başarılı sonuçlar aldığım ve bir çok web sitesinde olmayan o çok özel detayları sizlerle de paylaşıyorum.Detaylar için şu linke tıklayabilirsiniz.
https://isacoturoglu.com.tr/code/google-1-sayfada-cikmak.html