Mobil trafik artık küçümsenmeyecek kadar değere sahip bir güç olarak karşımıza çıkıyor. Son birkaç yılda, mobil İnternet kullanıcılarının sayısı , masaüstünde arama yapanların sayısını aştı . Artık, İnternet tüketiminin yarısından fazlası telefonlar, tabletler ve diğer mobil cihazlar aracılığıyla gerçekleşiyor. Bu aynı zamanda web geliştirme için mobil test araçlarını kullanmayı zorunlu hale getirdi.

 

Web sitelerinin mobil uyumlulukları Google’da bir sıralama faktörü haline geldi . Sonuç olarak, bir WordPress geliştiricisi veya bir WordPress web sitesinin sahibi olarak sitenizi mobil cihazlar için optimize etmekle uğraşmazsınız. Bunu gerçekleştirmek genellikle çok fazla test içerir. 

Piyasadaki çok sayıda telefon ve tabletle, web sitenizin hepsinde veya hatta çoğunda mükemmel görünmesini sağlamak zordur. Tarayıcı uyumluluğuna bağlı kalmak yeterince zor değilmiş gibi. 

Şansımıza, bir dizi mobil test aracı hayatımızı kolaylaştırmayı misyon edindi. Zorlukla kazandığınız parayı tüm Apple ve Android ürün serisine yatırmadan önce, bunların sizin için neler yapabileceğini görelim. Bugün burada, şu anda piyasada bulunan cihaz türlerinin çoğunu kapsaması gereken 12 seçeneği ele alıyoruz.  

Mobil Test için Tarayıcı Geliştirici Araçları 

Mobil cihazlar için optimizasyon söz konusu olduğunda masaüstü tarayıcıların başlamak için yanlış yer olduğunu düşünüyorsanız, tekrar düşünün. Tüm büyük tarayıcılar , mobil test için araçlar da içeren kendi geliştirici araçları servisiyle birlikte gelir . 

Bunları yalnızca sitenizin HTML ve CSS’sini incelemek için kullanmakla kalmaz, aynı zamanda farklı mobil cihazlarda nasıl görüneceğine dair canlı bir izlenim elde edersiniz. Burada Chrome, Firefox ve Safari’yi ele alacağız.  

1. Chrome Cihaz Modu 

Cihaz Moduna geçmek için önce geliştirici araçlarını etkinleştirmeniz gerekir. Sağ tık > İncele ile Geliştirici Araçları aracılığıyla ulaşabilirsiniz . Alternatif olarak sadece Ctrl+Shift+I tuşlarına basın . 

Bunlardan herhangi biri, ekranın sağ tarafında geliştirici konsolunu açacaktır. Gözlerinizi konsolun sol üst kısmına yönlendirirseniz, birbiri üzerine yığılmış bir akıllı telefon ve tablete benzeyen küçük bir simge bulacaksınız. Tıklandığında bu, Cihaz Modunu etkinleştirir . 

Cihaz Modu Nasıl Kullanılır 

Bu modda, şu anda bulunduğunuz web sitesi bir mobil cihazın sınırlarını yansıtan daha küçük bir çerçevede gösterilir (gerekirse biraz daha fazla alana sahip olmak için geliştirici araçlarını yana çekebilirsiniz). 

Ekranı kişisel ihtiyaçlarınıza uygun hale getirmek için çerçeveyi küçültün veya genişletin. Alternatif olarak, özel bir ekran boyutu yazmak için sol üst köşedeki sayıları kullanın. İçeriğin düzgün bir şekilde sığması için siteyi yeniden yüklemeniz gerekebileceğini unutmayın. 

Yine de Cihaz Modu ile ilgili en iyi şey , en üstte bulunan cihaz ön ayarlarıdır. Burada en yaygın mobil cihazlardan bazılarını seçebilirsiniz: Farklı iPhone ve Samsung Galaxy modelleri ile Amazon Kindle Fire gibi daha az yaygın olanlar bulunuyor. 

Örnek olarak, Chrome Geliştirici Araçları, web sitemizin bir iPhone X’te nasıl göründüğünü gösterir: 

Listeden bir şey seçtiğinizde, dikey ve yatay görünüm arasında geçiş yapmanızı sağlayan ek bir düğme görünür. 

İşin güzel yanı, bunun bir emülatör değil, yalnızca tarayıcı pencerenizin farklı bir görünümü olmasıdır. Bu, yerel geliştirme siteleri de dahil olmak üzere, istediğiniz herhangi bir web sitesinde gezinmeye ve onu görüntülemeye devam edebileceğiniz anlamına gelir . 

Chrome’un Cihaz Modu , fare yerine parmakla gezinmeyi de simüle eder. Sonuç olarak, imleci herhangi bir şeyin üzerine getirdiğinizde hiçbir vurgu veya renk değişikliği olmaz. Gerçek mobil deneyimi yaşarsınız. 

Kötü Bağlantıları Simüle Edin 

Daha da karmaşık bir özellik, ağ simülasyonudur. Bunu anlamak için, mobil ziyaretçilerin WiFi’de olmadıklarında genellikle daha yavaş ağ bağlantılarına sahip olacağını unutmamalısınız. 

Chrome’un mobil test aracı bunu simüle edebilir. En üstte öğesinin yanındaki başka bir açılır menüde, 2G/3G/4G üzerinden GPRS’den WiFi bağlantısına kadar herhangi bir ağ hızını seçebilirsiniz. 

Bu şekilde, hızı engellenebilecek mobil ziyaretçilerin kullanıcı deneyimini daha iyi anlayabilirsiniz. Daha az güçlü bağlantılarda yüklenmesi yavaş olan büyük görüntüler veya diğer öğeler gibi darboğazları anlamanıza olanak tanır. 

Daha da iyisi, bu ön ayarların yalnızca etkin sekmeniz için geçerli olmasıdır. Chrome’un geri kalanında yine normal şekilde göz atabilirsiniz. 

Genel olarak, Chrome Cihaz Modu , özellikle ücretsiz bir tarayıcının özelliği olduğunu aklınızda bulundurduğunuzda, mobil testler için oldukça harika bir araçtır. 

2. Firefox Mobil Tasarım Görünümü 

Firefox, Chrome’a benzer bir araç sunar. Rakibi kadar çok işlevi olmasa da, WordPress web sitenizin mobil özelliklerini test etmek için oldukça kullanışlıdır. 

Menüye ve ardından Sağ Tık> Denetleye tıklayarak veya açık durumdayken geliştirici araç çubuğundaki ilgili simgeye tıklayarak etkinleştirebilirsiniz . 

Alternatif olarak Ctrl-Shift+M kullanın

Mobil görünümünün arayüzü oldukça tanıdık. Tıpkı Chrome’da olduğu gibi, ortak önceden ayarlanmış boyutlar ve bunlarla ilişkili cihazlar için bir açılır menünüz vardır. 

Mevcut seçenekler ihtiyaçlarınızı karşılamıyorsa, özel boyutlarda ayarlayabilir ve bunları kendi önayarınız olarak kaydedebilirsiniz. Bunun yanı sıra, görüntüleme çerçevesini manuel olarak küçültmek ve genişletmek de mümkündür. 

Daha önce olduğu gibi, Mobil Görünüm tarayıcınızın bir parçasıdır, yani istediğiniz herhangi bir web adresinde gezinebilirsiniz. Ayrıca fare ile gezinmek yerine dokunma kontrolünü taklit edebilir. Ağ daraltma simülasyonu da mevcuttur. 

Firefox’un kendi başına yaptığı bir başka şey de, alttaki geliştirici araç çubuğunu kapatabilmeniz ve yine de mobil test aracını kullanabilmenizdir. Bu beni Chrome da rahatsız eden bir özellik. 

Ayrıca, boyutundan bağımsız olarak yatay ve dikey arasında geçiş yapabilir ve otomatik olarak indirme klasörünüze gelen mevcut görünümün ekran görüntülerini alabilirsiniz. 

3. Safari Mobil Tasarım Modu 

Esas olarak bir Mac üzerinde çalışıyorsanız, yerel tarayıcı Safari’de yerleşik olarak bulunan Mobil Tasarım Modunu kullanabilirsiniz. Kullanmaya başlamak için Safari > Tercihler > Gelişmiş seçeneğine gitmeniz yeterlidir . Ardından, menü çubuğunda Geliştirmeyi Göster menüsünün yanındaki kutunun işaretli olduğundan emin olun .  

Geliştirme menüsü artık menü çubuğunda görünmelidir. Tıklayın ve Mobil Moduna Gir’i seçin .  

Artık web sitenizi, üst kısımda listelenen çeşitli seçeneklerle mobil bir görünüm içinde görmelisiniz. Boyutları manuel olarak değiştirebilir, simüle etmek için bir tarayıcı görünümü veya bir cihaz seçebilirsiniz. Ancak, aygıt ön ayarlarının tümü Apple ürünleridir. Bu nedenle, Android çalıştıran cihazların görünümünü kontrol etmek istiyorsanız boyutları manuel olarak girmeniz gerekir.  

6. Opera 

Kesinlikle en popüler tarayıcı olmasa da, Opera hala çok sayıda mobil cihazda, özellikle de eski modellerde kullanılmaktadır. Genellikle Opera, bu cihazlar için mevcut en iyi tarayıcı seçeneğidir. Sonuç olarak, web sitenizin içinde düzgün şekilde yüklenip yüklenmediğini test etmeniz gerekir.  

Opera Mobile Emulator artık geçersiz olsa da, Android cihazlarda Opera Mini tarayıcısını indirmeye devam edebilirsiniz. Bu, web sitenizin nasıl yüklendiğini ilk elden test etmenize olanak tanır. En azından Opera mobil, klasik tarayıcıyı çalıştıranların sitenize geldiğinde neler yaşadığına dair bir fikir verecektir.  

7. Browserstack 

Browserstack, web sitelerini farklı ortamlarda, işletim sistemlerinde, tarayıcılarda ve mobil cihazlarda test etmek için araçlar içeren web tabanlı bir platformdur. Farklı işletim sistemlerinde 50’den fazla mobil cihaza erişimi olan ücretli bir çözümdür. Bunu çeşitli şekillerde kullanabilirsiniz.  

Örneğin, web sitelerini canlı tarayıcı testi ile test edebilir, daha büyük ölçekli projeler için otomatik testler yapabilir veya görsel testler yapabilirsiniz. Veya uygulamaları test etmeniz gerekiyorsa, uygulamaları simüle edilmiş mobil cihazlarda canlı testler yapmak veya otomatik testler yapmak için App Live özelliğini kullanabilirsiniz. Fiyatlandırma aylık 29$’dan başlar, yıllık faturalandırılır.  

8. LambdaTest 

WordPress web sitenizi test etmenin başka bir tarayıcı tabanlı yolu LambdaTest’tir. 2.000’den fazla farklı tarayıcı ve işletim sistemi kullanan bulut tabanlı otomatik bir tarayıcı test aracıdır. Bu numara, sitenize nasıl erişilirse erişilsin sitenizin harika göründüğünden emin olmanızı sağlamalıdır.  

Simüle edilmiş mobil tarayıcılarda Selenium test otomasyonu gerçekleştirebilir, yerel olarak barındırılan siteleri test edebilir, coğrafi konum testi gerçekleştirebilir ve hatta hata ayıklama gerçekleştirebilirsiniz.  

9. Mobil Uyumluluk Testi 

Google’ın mobil uyumluluğa devam eden vurgusu ile, sitenizin ne kadar iyi performans gösterdiğini analiz etmek için bir araç çıkarmaları gereklidir. Bir URL yazdıktan sonra, mobil test aracı sitenizi yalnızca yanıt verme hızı açısından değil, aynı zamanda sayfa yükleme süresi gibi diğer mobil uyumlu işaretler açısından da kontrol edecektir. 

10. MobileTest.me 

Bu hizmet, sitenizi HTC One, Google Nexus 7 ve Apple iPad Mini gibi altı farklı popüler cihazda test etmenize olanak tanır. Tek yapmanız gereken birine tıklamak, bir web adresi yazmak ve hazırsınız. Bu en güncel test seçeneği değil, ancak cüzdanınızı açmanıza gerek kalmadan birkaç eski cihazda uyumluluğu test etmenin kesinlikle hızlı ve kolay bir yolu.  

11. Responsinator 

Sırada Responsinator var. iPhone 5’ten “berbat Android cihazı” (sic!) üzerinden Nexus 4’e kadar birçok farklı Android ve iOS cihazı için testler sunar. Her zamanki gibi, herhangi bir adresi yazın ve ilgili web sitesi seçilen ekranın ekranızda görünecektir. Çevirme seçeneği yoktur, ancak her cihaz için yatay görünümleri de seçebilirsiniz. 

12. Screenfly 

Mobil test araçları listemizdeki son giriş, Screenfly’ın TV’ler ve masaüstü bilgisayarlar da dahil olmak üzere oldukça güzel bir cihaz yelpazesi sunmasıdır. Bununla birlikte, listede çok sayıda tablet ve telefon da var. Kullanımı ücretsizdir ve arayüz çok sezgiseldir. Bazı hızlı kontroller yapmanız şiddetle tavsiye edilir! 

Tüm İhtiyaçlar İçin Mobil Test Araçları Mevcuttur 

Mobil cihazlardaki kullanıcılardan gelen trafik, bir web sitesi işleten herkes için inanılmaz derecede önemli hale geldi ve önemi artmaya devam edecek. Bu nedenle, web siteleriyle profesyonel olarak ilgilenen kişiler, bu sitelerin ziyaretçilerinin telefonlarında ve tabletlerinde nasıl iyi görüneceklerini ve düzgün şekilde nasıl çalışacaklarını bildiklerinden emin olmakta zorlanırlar. 

Her araç kendi güçlü ve zayıf yönleriyle birlikte gelir. Yine de çoğunun ortak noktası, gerçek hayattaki cihazlara yatırım yapmaktan kesinlikle daha ucuz olmalarıdır. 

Yukarıdaki çözümler, çoğu kullanım durumu için test etmek için yeterli olmalıdır. Hangisini seçeceğiniz kendi ihtiyaçlarınıza ve tercihlerinize bağlıdır. Sonunda, önemli olan tek şey sonuçtur. Mobil ziyaretçileriniz size teşekkür edecek. 

“Mobil test araçları” konulu yazımızı keyifle okuduysanız “Kullanıcı deneyimi testleri” hakkındaki içeriğimiz de tam size göre, ux testleri hakkında daha fazla bilgi öğrenmek için göz atmayı unutmayın!