Herhangi Bir Duyarlı WordPress Sitesini Önce Mobil Hale Getirin

Bu sefer, duyarlı herhangi bir WordPress sitesini ilk önce nasıl mobil hale getireceğinizi ve bunu neden yapmanız gerektiğini anlatacağız.

Mobil ve diğer elde taşınan cihazların yanı sıra oyunlar, uygulamalar, sosyal medya platformları vb.'nin muazzam büyümesiyle, duyarlı web tasarımı sitenizin diğerleri arasında öne çıkması için lüks değil zorunluluk haline geldi.

Duyarlı veya mobil uyumlu tasarımın, yalnızca iyi geliştirilmiş ve pahalı web siteleriyle ilgili birinci sınıf kalite olarak algılandığı günler geride kaldı.

Bugün, WordPress şablon deposu bu tür temalar açısından zengindir: hem ücretsiz hem de premium. SKT Themes'de tarafımızdan oluşturulan tüm şablonlar, aynı zamanda, ona dayalı herhangi bir tarafın farklı cep telefonlarında ve platformlarda doğru bir şekilde görüntülenmesine izin veren bu nitelikleri paylaşır.

Öyleyse, duyarlı veya mobil uyumlu tasarım yaygın olarak kullanılıyorsa ve sorunsuz çalışıyor gibi görünüyorsa, herhangi bir duyarlı WordPress sitesini önce mobil hale getirmeye çalışmanın amacı nedir ve bunun faydaları nelerdir?

Her şeyi sizin için netleştirmek için, bu iki tasarım yaklaşımı arasındaki farkları görebilmeniz için belirli noktaları birbiri ardına tartışalım.

Duyarlı web tasarımı nedir?

Özetle, duyarlı web tasarımı, her cihazda eşit derecede iyi çalışmaya ve herhangi bir ekran çözünürlüğüne uymaya uygun bir web sitesi oluşturmanın modern bir tekniğidir. Bu, hareket halindeki veya hareket halindeki mobil kullanıcılarınızın ihtiyaçlarını karşılamak için sitenizin ayrı bir mobil sürümünü oluşturmak zorunda olmadığınız anlamına gelir. Sitenizin duyarlı tasarımı, sitenizin mükemmel görünümü ve hissi için otomatik olarak ayarlanacak ve herhangi bir mobil cihaza veya cihaza uyum sağlayacaktır.
Dünyanın dört bir yanından milyonlarca insanın mobil İnternet'i kullanması ve saatlerce internette vakit geçirmesi nedeniyle, duyarlı ve çapraz mobil uyumlu bir web sitesine sahip olmak bir zorunluluktur.

Mobil ilk tasarım nedir?

Temel olarak mobil, modern web tasarımında kullanılan bir yaklaşımdır ve öncelikle mobil ekranlar için tasarım yapılması ve ardından diğer ekranların, tarayıcıların ve çözünürlüklerin geliştirilmesine geçilmesi anlamına gelir.

Responsive ve mobile first design yaklaşımları arasındaki farkı anlamanız için responsive tasarımın kusursuz bir masaüstü performansı için gereken her türlü karmaşıklıkla başladığını ve daha sonra mobil ve daha küçük cihazlar için bunları ortadan kaldırdığını belirtelim.

Önce mobil tasarıma gelince, önce mobil cihazlar ve daha küçük cihazlar için duyarlı tasarımın yapılması gerektiğini öne sürüyor.

Neden önce herhangi bir duyarlı WordPress sitesini mobil hale getirmeniz gerekiyor?

Projeye neden mobil konularla başlamanız veya herhangi bir duyarlı WordPress sitesini önce mobil hale getirmeniz gerektiğini merak ediyor musunuz? Mobil tüketim istatistiklerine bir göz atalım.

Şimdiye kadar tahminde bulunmuyorsanız, mobil internet kullanıcılarının masaüstü olanlara göre rakipsiz prevalansını kanıtlayan kesin yüzdeleri ve raporları İnternet'te arayın.

Günümüzde insanlar mobil ve cihaz uçlarından gerekli bilgiler için internette gezinmek için giderek daha fazla zaman harcıyorlar. Ve doğal olarak masaüstünden mobil kullanıma geçiş yakın gelecekte de devam edecek.

Bu nedenle, web sitenizin ziyaretçilerinin çoğunu hayal kırıklığına uğratmak ve masaüstü kullanıcılarının azınlığını sitenizde rahat hissettirmek istemezsiniz, değil mi?

Buna ek olarak, önce mobil yaklaşımını benimsediğinizde, kodlamada ellerinizi daha az kirleteceğinizi ve birlikte genişletmesi daha kolay olacak daha doğru ve kompakt web tasarımları tasarlayabileceğinizi göreceksiniz.

Önce küçük ekranlarla pikselin mükemmel eşleşmesini sağlamak ve ardından masaüstü ekranlarıyla ilgilenmek, sitenizin mobil performansını artırmanın ve mobil silahlı müşterileriniz için daha iyi bir kullanıcı ortamı sağlamanın nihai yolu olabilir.

Herhangi bir duyarlı WordPress sitesini önce nasıl mobil hale getiririm?

Siteniz zaten duyarlıysa ve önce onu mobile dönüştürmek istiyorsanız izlemeniz gereken 2 temel adım var. Her şeyden önce, küçük ekranlar için varsayılan stil yazmanız ve oluşturmanız gerekir.

Ardından, minimum genişlik kullanırken bir medya sorgusu eklemeniz ve duyarlı şablonunuzun varsayılan stilini buna kopyalamanız gerekir.

Sitenizin düzenine bağlı olarak, düzen stili şu türden olabilir:

başlık,
.ana,
altbilgi {
  genişlik: %96;
  maksimum genişlik: 1000 piksel;
  kenar boşluğu: 10 piksel otomatik;
  ikisini de temizle;
}
.içerik {
  genişlik: %60;
  sağ kenar boşluğu: %5;
  yüzer: sol;
}
.kenar çubuğu {
  genişlik: %35;
  Sağa çık;
}

Siteniz duyarlı olduğundan, bu stil aynı zamanda daha küçük ekranlar için medya sorgularını da içermelidir:

@medya ekranı ve ( max-width: 500px ) {

  başlık,
  .ana,
  altbilgi,
  .içerik,
  .kenar çubuğu {
    genişlik: %98;
  }
  
  .içerik,
  .kenar çubuğu {
    yüzer: yok;
    kenar boşluğu: 0 otomatik;
  }

}

Gördüğünüz gibi iki blok var: biri masaüstü için diğeri mobil için.
Önce mobil ile değiştirmek için her ikisini de silin ve küçük ekranlar için tanımlayıcı bir düzen ile başlayın:

başlık,
.ana,
altbilgi {
  kenar boşluğu: 10 piksel %1;
}

Şimdi, minimum genişlik kullanarak medya sorgusu oluşturma zamanı.

@medya ekranı ve ( min-width: 500px ) {

  başlık,
  .ana,
  altbilgi {
    genişlik: %96;
    maksimum genişlik: 1000 piksel;
    kenar boşluğu: 10 piksel otomatik;
    ikisini de temizle;
  }
 
  .içerik {
    genişlik: %60;
    sağ kenar boşluğu: %5;
    yüzer: sol;
  }
  .kenar çubuğu {
    genişlik: %35;
    Sağa çık;
  }
  
}

Gördüğünüz gibi, temelde sitenizin duyarlı stil sayfasında sahip olduğunuz stilin aynısıdır. Bununla birlikte, stildeki bu yeniden yazma ve yeniden düzenleme, daha iyi mobil performansla ilgilidir, çünkü daha küçük cihazlar artık üzerinden geçmek yerine onu ihmal edecek ve ardından duyarlı medya sorgusuna eklenen öğelerle üzerinden geçecektir.

Teorik olarak, mobil ilk tasarıma geçişimiz bitti. Belirli durumlarda, işlerin sorunsuz yürümesini sağlamak için ek ayarlara ve yapılandırmaya ihtiyacınız olabilir.

Bununla birlikte, deneyimli bir web tasarımcısı veya geliştiricisi olmasanız bile, WordPress sitenizi mobil hale getirme sürecinin tamamı sizin için geçilmez bir yol olmayacaktır.