İsaCoturBlog

Siteni Mobil Responsive Yapma Kodlari

Web Siteni Mobil Responsive Yapma Kodları

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.

Responsive Tasarım Nedir

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

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

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.En kısa zamanda sitemize eklenecek.

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

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

Konuyla İlgili Diğer Sayfalar "Google İlk Sayfada Çıkmak İçin Neler Yapılmalı?"

Google 1.Sayfada Olmanın Sırrını açıklıyoruz  SEO Nedir  Özgün İçerik Yazmak  SSL Sertifakası Nedir  Telif Hakkı   Warez Nedir / Spam Nedir/ Banlamak Nedir  Arama Motorlarına Ping Atmak  Resimlere Alt ve Title Eklemek  H Tagları Ne İşe Yarar  Bedava Sitem Kullanıcıları SiteMaps Nasıl Ekler  Hit kazanma yolları neler  Pinterest Siitenize Hit Almak  Yorum Getir ile Hit kazan  Ücretsiz BackLink Nasıl Kazanılır?  Linkedin Makale Yaz BackLink Kazan  E-Posta Abone Sayısını Nasıl Artırılır  Yandex Orijinal İçeriklere Nasıl Destek Veriyor  Yandex Metrica Fareyi Takip Eden Sayaç Kodu  Baner Takas Ağı Siteleri Hangileridir  ReklaMap Reklam Yarışması  TrustRank nedir  Hemen Çıkma Oranını Düşürme   Site İçi Arama Motoru Kodu Ekle  Web Sitene 404 Hata Sayfası Ekle  Favicon Nedir Nasıl Kullanılır   Siteni Mobil Responsive Yapma Kodları  




Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

Sosyal Medyada Bizi Bulun

  •  
  • Linkedin instagram Pinterest foursquare

    E-Posta Abonesi 265 Takipci

  • e-posta aboneliği
           
       
       


  • 125x125 REKLAM ALANI

  • => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=