WordPress'te "Dokunma Hedefleri Uygun Boyutta Değil" Sorunu Nasıl Düzeltilir

Lighthouse, web sayfalarınızın performansı hakkında yararlı bilgiler toplamanıza olanak tanıyan güçlü bir araçtır. İşaretlenen yaygın tasarım sorunlarından biri "Dokunma hedeflerinin uygun şekilde boyutlandırılmamasıdır" . Ancak bir web geliştiricisi veya tasarımcısı değilseniz bunun ne anlama geldiğini veya nasıl düzeltileceğini bilmiyor olabilirsiniz.

Neyse ki sayfalarınızı daha kullanıcı dostu hale getirmek ve bu özel Lighthouse sorununu çözmek nispeten basittir. Örneğin, dokunma hedeflerinin boyutunu veya aralarındaki boşluğu artırabilirsiniz.

"Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorununa giriş

"Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorununu incelemeden önce Lighthouse hakkında biraz bilgi sahibi olmanız gerekir. Bu açık kaynaklı araç, web sayfalarınızın kalitesini ve performansını değerlendirmenizi sağlar. Örneğin sitenizin erişilebilirliği, SEO, sayfa hızı, tasarımı ve daha fazlası hakkında bilgi toplayabilirsiniz.

Web geliştirme konusunda çok deneyiminiz varsa Lighthouse'u Chrome DevTools'ta veya komut satırından çalıştırabilirsiniz. Ancak PageSpeed ​​Insights aynı zamanda Lighthouse tarafından da desteklenmektedir ve genellikle yeni başlayanlar için iyi bir alternatiftir.

Web sitenizin gelişmiş bir değerlendirmesini almak için tek yapmanız gereken sitenizin URL'sini girip Analiz Et'e tıklamaktır:

Analiz kısa bir süre sonra başlayacak. Daha sonra web sayfanızın performansı ve optimizasyonuyla ilgili ayrıntıları görüntüleyebilirsiniz. PageSpeed ​​Insights, ayrıntıları net başlıklar altında kategorize ederek bunu kolaylaştırır.

Aşağıya doğru kaydırırsanız Mobil Uyumlu bölümünü bulacaksınız. Dokunma hedefleriyle ilgili bilgileri burada göreceksiniz:

Gördüğünüz gibi analizimiz "Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorununu ortaya çıkardı. Bölümü genişletirseniz dokunma hedeflerinizin her biri hakkında daha ayrıntılı bilgi bulacaksınız.

Dokunma hedefleri, web sayfanızda kullanıcıların dokunmatik cihazlarda etkileşimde bulunabileceği alanlardır. Örneğin ziyaretçiler resimlere, düğmelere, bağlantılara veya form öğelerine dokunabilir.

Deniz feneri bayrakları çok küçük hedeflere (48 x 48 pikselden küçük) dokunur. Ayrıca, hafifçe vurma hedeflerinizin çevresinde yeterli alan yoksa ve bu da hedeflerin çakışmasına neden oluyorsa uyarı mesajını görürsünüz.

Mobil deneyimi optimize etmeden web sitenizin masaüstü sürümünü oluşturduğunuzda bu sorunla karşılaşabilirsiniz. Masaüstünde tüm sayfa öğeleriniz bir arada güzel bir şekilde durabilir, ancak farklı ekran boyutlarına uyum sağlayamazlarsa bu sorunlara neden olur.

"Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorunu nasıl düzeltilir?

Artık Lighthouse ve "Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorunu hakkında daha fazla bilgi sahibi olduğunuza göre, bu sorunu düzeltmenin bazı kolay yollarına bir göz atalım.

1. Dokunma hedeflerinin boyutunu artırın
2. Dokunma hedefleri arasındaki boşluğu artırın

1. Dokunma hedeflerinin boyutunu artırın

"Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorununu düzeltmenin ilk yolu, hafifçe vurma hedeflerinin boyutunu artırmaktır. O halde, hafifçe vurma hedefi görevi gören bazı tasarım öğelerini ele alalım.

Bahsettiğimiz gibi bağlantılar, düğmeler, simgeler ve form öğelerinin tümü dokunma veya "dokunma" hedefleri olarak hizmet edebilir. Bu nedenle, bu tasarım özelliklerinin boyutunun 48 x 48 pikselin altına düşmediğinden emin olmanız gerekir. Bu bölümde sayfalarınızdaki düğmeleri ve bağlantıları nasıl yeniden boyutlandıracağınızı göstereceğiz.

WordPress'teki düğmelerin boyutunu artırın

Web sitenizdeki düğmeleri yeniden boyutlandırmak için WordPress Özelleştirici'yi açmanız gerekir. Bunu kontrol panelinizde Görünüm > Özelleştirici'ye giderek yapabilirsiniz. Ardından Düğmeler'i seçin:

Artık düğmelerin boyutunu artırmanın birkaç yolu var. İlk olarak, açılır kutuyu kullanarak Ağırlığı artırabilirsiniz. Bu, hafifçe vurma hedefinin boyutunu büyük ölçüde değiştirmez ancak ekstra hacim ve tanım katacaktır:

Dokunma hedefini daha da optimize etmek için Satır Yüksekliğini artırabilirsiniz. Bu, hedefin boyutunu dikey olarak artıracaktır. Ayrıca, Letter Spacing değerini düzenlerseniz düğmenin boyutunu yatay olarak genişletebilirsiniz:

Daha sonra değişikliklerinizi kaydetmek için Yayınla'ya tıklamayı unutmayın.

WordPress'teki bağlantıların boyutunu artırın

Bağlantılar, kullanıcıları web sitenizdeki diğer sayfalara yönlendirebilir. Bu nedenle ziyaretçilerin sitenizde daha uzun süre kalmasını teşvik edebilirler.

Ancak ziyaretçilerin bağlantı hedeflerinize "dokunabilmesi" veya dokunabilmesi için onları tıklanabilir hale getirmeniz gerekir. Bunu yapmanın en kolay yolu bağlantıların boyutunu artırmaktır.

Bunu doğrudan ilgili gönderi veya sayfadan yapabilirsiniz. Örneğin, kullanıcıların yayınlanan blog gönderilerinizin listesini görebilmesi için bir Sorgu Döngüsü bloğuna yer verebilirsiniz:

Bu senaryoda, yazı başlıklarınızın her biri bir bağlantı içerebilir. Bu arada, ziyaretçileri doğrudan gönderiye yönlendirmek için ek bir Devamını oku bağlantısı sunabilirsiniz.

Gönderilerinizin başlığında bağlantı kullanmanın en iyi yanlarından biri, hafifçe vurma hedefinin boyutunu artırmanın son derece basit olmasıdır. Tek yapmanız gereken bağlantı başlığına tıklamak. Ardından araç çubuğundaki Başlık düzeyini değiştir öğesine gidin:

Burada H1 veya H2 formatını seçerek bağlantı boyutunu artırabilirsiniz.

Ayrıca paragraf metninizde bağlantılar da olabilir. Öğeye tıklayarak bu hafifçe vurma hedeflerinin boyutunu artırabilirsiniz. Ardından Blok ayarlarında Tipografi'ye gidin:

Burada, Normal'den daha büyük bir ayara geçmek için BOYUT (PX) açılır menüsünü kullanın:

Daha sonra değişikliklerinizi kaydettiğinizden emin olun.

2. Hafifçe vurma hedefleri arasındaki mesafeyi artırın

Lighthouse'da "Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorununu çözmenin ikinci yolu, hafifçe vurma hedefleri arasındaki aralığı artırmaktır. Chrome, genellikle 8 pikselin yeterli olduğunu söylüyor. Ancak daha küçük dokunma hedefleri için Lighthouse denetimini geçmek için mesafeyi daha da artırmanız gerekebilir. Bunu yapmanın birkaç yolu var.

Dolgu özelliğini ayarlayın

Dokunma hedefleri arasındaki boşluğu artırmanın bir yolu, öğelerin dolgu özelliğini ayarlamaktır. Bu, öğenin kenar boşluklarına eklenerek hedefler arasındaki mesafeyi artıracaktır.

Bunu, WordPress Özelleştiriciyi açarak düğmelerinizle yapabilirsiniz. Ardından Buttons'a gidin. Dolgu özelliğini Genel ayarların üst kısmında bulacaksınız:

"Dokunma hedefleri uygun boyutta değil" sorununu çözmek için düğmenizin etrafındaki dolguyu artırmanız yeterlidir. EM veya REM'de değil, PX'te olduğunuzdan emin olun.

Önce her iki taraftaki dolguyu 10 piksel artırmayı denemek iyi bir fikir olabilir. Daha sonra gerekirse hedefler arasındaki boyutu daha da artırabilirsiniz.

Daha fazla dolgu eklemenin düğmelerinizden birini yeni bir satıra karıştırdığını görebilirsiniz. Bu durumda hedefleriniz arasında daha fazla boşluk bırakmak için üst ve alt kısımdaki dolgu değerini de artırabilirsiniz:

Değişikliklerinizi kaydetmek için Yayınla'yı tıkladığınızdan emin olun.

WordPress Spacer bloğunu kullanın

Sayfa öğeleri arasına boşluk eklemenin başka bir yaklaşımı da WordPress Spacer bloğunu kullanmaktır. Bunların tek yaptığı, sayfanıza bir miktar boş alan ekleyerek dokunma hedeflerinizi birbirinden daha uzak tutmaktır.

Örneğin, üst üste yığılmış iki düğmeniz olabilir:

Bu dokunma hedefleri arasında yeterli boşluk varmış gibi görünse de ön uçtaki düzeni önizlediğinizde düğmelerin neredeyse üst üste geldiğini görebilirsiniz:

Bu durumda, "Dokunma hedefleri uygun boyutta değil" sorununu düzeltmek için düğmelerin arasına bir Aralayıcı bloğu ekleyebilirsiniz. Blokların arasındaki + simgesine tıklamanız yeterlidir. Ardından “spacer” ifadesini arayın:

Bloğu sayfanıza ekleyin; bu, öğeleriniz arasında anında boşluk yaratır. Şimdi değişikliklerinizi kaydetmek ve ön uçtaki düğmeleri görüntülemek için Yayınla'ya tıklayın:

Gördüğünüz gibi artık hafifçe vurma hedefleriniz arasında daha fazla boşluk var.

Çözüm

Özetlemek gerekirse, bu sorunu çözmenin iki yolu vardır:

1. Dokunma hedeflerinin boyutunu artırın.
2. Dokunma hedefleri arasındaki mesafeyi artırın.

"Dokunma hedefleri uygun şekilde boyutlandırılmamış" sorununu nasıl çözeceğinizle ilgili sorularınız mı var? Aşağıdaki yorumlarda bize bildirin!