Ana İçeriğe Geç

Blogunuzun mobil tasarımını optimize etmek için 6 ipuçları

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Mobil trafiğe göre veri tüketimi, 74’in% 2015, aynı dönemde satılan bir milyardan fazla cihazla ve trend hala değişiyor. Tasarımlarınızı mobil trafik için optimize etmenin önemini vurgulamak için tek başına bu yeterli olacaktır.

Bazı WordPress temaları, küçük çözünürlükleri işlemek için daha iyi optimize edilmiştir, ancak bu tamamen kendinize güveneceğiniz mutlak uyumluluk anlamına gelmez. Aslında, web sitenizi mobil cihazlar için daha iyi optimize etmenize olanak tanıyan bir dizi düzeltme vardır.

Bu eğiticide, mobil cihazlara, görüntü optimizasyonuna, düzen tasarımına ve daha fazlasına özgü farklı ipuçlarını keşfedeceğiz.

1. İpucu: iOS simgeleri ve Açılış ekranları ekleyin

ios-simgeleri-sıçrama ekran

Android tarafından yapılan birçok ilerlemeye rağmen, iOS cihazları hala çok popüler ve aktif bir geliştiriciler topluluğunun desteğinden yararlanın. Mesele şu ki, ziyaretçilerinizin çoğu büyük olasılıkla bir Apple cihazına sahip olacak ve simgenizi ana ekranlarına kaydederek web sitenizden daha fazla keyif almak isteyeceklerse.

Bu olaya hazırlanmak için, size WordPress blog iOS simgelerini nasıl ekleyebileceğinizi gösterelim.

Önce dosyayı bulmanız gerekecek header.php temanız (veya alt temanız), etikete küçük bir kod eklememiz gerekeceğinden .

Burada eklemeniz gerekir kod:

 

Gördüğünüz gibi kod, iPhone'lar, iPad'ler ve Retina cihazları için belirli simgelerden bahsediyor; bunların hepsinden önce "call-touch-icon" değerine sahip rel özelliği gelmelidir.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Hazır oradayken, aşağıdaki kodla web siteniz için yepyeni bir iOS açılış ekranı da tasarlayabilirsiniz:


Not: Açılış ekranı, bir uygulamayı başlattığınızda görünen ekrandır. Bir uygulamanın yükleme ekranı gibidir.

2. İpucu: "Medya sorguları" ile ilişkili olarak birkaç resim boyutu kullanın

Çok resimli-boyutları-medya-sorguları

Elbette, " Medya-sorguları". Belirli bir senaryo ortaya çıktığında CSS'nize dahil edilen belirli tasarım kurallarını düşünün. Mobil tasarım söz konusu olduğunda, bu senaryolar farklı çözünürlükler, cihaz yönleri ve tarayıcı boyutlarıdır. İle ilgili sorun Medya-sorguları Bugün, birçok tasarımcı ve geliştirici ikincil bir mobil yaklaşımla web siteleri inşa ediyor, ancak bunun tersi olmalı.

Bu ikincil mobil yaklaşım içinde görülebilir Medya-sorguları Kılavuz olarak kullanılan popüler cihazların boyutlarını (ör. 320px, 480px, 768px) gördüğünüzde. Teoride bu iyi bir yaklaşım gibi görünse de, etkili olduğu için tüm cihazların yaratıldıkları sıklıkta değişen boyutlarını kullanmayı iddia edemezsiniz.

Bir dahaki sefere bir tasarım üzerinde çalışırken, mobil uyumluluğu öncelik haline getirin:

  • tasarımınızı "Sorguları" bu yüzden küçük kararlar üzerinde çalışın.
  • Kesme noktalarınızı bildirmek için piksel kullanmaktan kaçının. Bunun yerine, ile çalışmayı deneyin "Ems" ve yüzdeleri olabildiğince sık, böylece tasarımlarınız yakınlaştırmaya göre ayarlanabilir.
  • Ödemeyi unutma " Medya-sorguları Retina cihazlarına uyum sağlamaları için (minimum çözünürlük: 192dpi).

İpucu # 3: Resimlerinizi optimize edin

optimize-your-image

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Harika ve duyarlı bir tasarıma sahip olsanız bile, potansiyel ziyaretçiler web sitenizin yüklenmesinin uzun sürdüğünü fark ederlerse ve görsellerin bu açıdan büyük bir rol oynadığını fark ederlerse kaybolabilirler. Kullanıcılar, ancak çok hızlı yüklenen güzel resimler görmek isterler, bu nedenle resimlerinizi optimize etme ihtiyacı doğar.

Bir muamma gibi görünse de, bu sonuçları elde etmenize yardımcı olabilecek birçok araç var. Listenin en başında bizde EWWW Image Optimizer et WP Smush , yüklendikten sonra, WordPress sitenize yüklenen her görüntü için otomatik olarak kaliteli kayıpsız sıkıştırma teknikleri uygulayacaktır ve WordPress siteniz daha önce yüklenen görüntüleri optimize etmek için medya kitaplığınızdan bile geçebilir.

Web sitenize başka bir eklenti eklememeyi tercih ederseniz, her zaman TinyJPG et TinyPNG, resimlerinizdeki renklerin sayısını seçmeli olarak azaltarak ve ayrıca metayı soyarak (gereksiz verileri kaldırarak) EWWW Image Optimizer ile aynı işi yapar. Bu, neredeyse tespit edilemeyen birçok değişiklikle birlikte oldukça küçük bir dosya boyutu anlamına gelir ve bu ideal bir uzlaşmadır.

İpucu # 4: SVG'yi kullanmayı düşünün

animasyonlu-svg-logo-ile-css-küçük resim

Ölçeklenebilir Vektör Grafikleri (SVG) göz önünde bulundurmanız gereken şık bir araçtır. İsmin ne anlama geldiğine rağmen, bir görüntü formatı yerine bir tür XML biçimlendirme dili kullanıyorlar ve özellikle logolar, simgeler, infografikler ve diğer uygulamalar gibi basit grafikler için kullanışlıdırlar.

« Neden SVG bu kadar kullanışlı?"Makul bir şekilde merak edebilirsiniz. Yeni başlayanlar için genişletilebilirler, bu da farklı pencerelere uydurma konusunda endişelenmenize gerek kalmayacağı anlamına gelir. Bunun da ötesinde, CSS kullanılarak kolayca canlandırılabilirler.

Bu format için destek içeren Adobe Illustrator, Inkscape ve Sketch gibi araçlara aşina olmalısınız, bu yüzden onları deneyin!

5 İpucu: iyi fontları seçmek

pick-sağ yapıyor

Mobil tasarım tamamen görsellerle ilgili değildir. Çoğu site, birincil bilgi aktarma yöntemi olarak metin kullandığından, hangi yazı tiplerinin kullanılacağını seçmek, tasarımlarınız üzerinde grafikler kadar (daha fazla değilse) etkisi olabilir.

Bir tasarımcının bakış açısından bu, aşağıdakileri içeren doğru yazı tiplerini seçmek anlamına gelir:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • Çok ince veya karmaşık yazı tiplerini kullanmayın. Kullanıcıların sizi daha iyi okuyabilmeleri için yakınlaştırmayı ayarlamasını istemiyorsanız, fontunuz mobil cihazlarda kolayca görülebilir olmalıdır.
  • Daha iyi okunabilmesi için harfler arasında çok az boşluk bulunan yazı tiplerinden kaçının.
  • Kullanırsanız Medya-sorgu Metniniz için, boyutlar için piksel yerine ems kullanın.
  • Çoğu çözünürlüğe daha iyi uyma eğiliminde olduklarından, sans serif yazı tiplerini kullanmayı düşünün.

6. İpucu: Metni kullanıcı arayüzünün bir parçası olarak değerlendirin

Metin parçalı arayüzü

Tipografi üzerinde olduğumuz için, dikkate alınması gereken tek şeyin yazı tipi olmadığını ve tek başına okunabilirlikle ilgili olmadığını bilmelisiniz. Çok çeşitli pencerelerle çalışacağımız için, tasarımınızın okunabilirliği en üst düzeye çıkarmak için metni kullanıcı deneyiminin ayrılmaz bir parçası olarak görmesini istiyorsunuz, bunun anlamı:

  • Kullanımı " Medya-sorguları "Satır başına yönetilebilir bir karakter sınırını korumak için (piksel yerine ems kullanmayı unutmayın!). Genel olarak kabul edilen miktar, 45-75 karakterleri arasında bir yerde ayarlanır.
  • Vw, vh ve vhmin'i kullanmayı unutmayın (Bunların hepsi görüntüleme yüzdesi ile ilgilidir) Yazı tipi boyutunu izleyici boyutuna göre veya belirli pencerelerde tutmak için CSS3 değerleri.

Yönetici Özeti

Bu makale boyunca, mobil trafiğin, web sitesi tasarımındaki her geliştirici için bir öncelik olması gereken, giderek daha az önemsiz hale geldiğini gördük. Bu nedenle, mevcut web sitenize uyacak şekilde blogunuzda uygulayabileceğiniz bazı ipuçlarınız var " cep dostu".

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer