Merhaba sevgili blog okuyucuları. Duyarlı tasarımın Rus İnternetinde giderek daha popüler hale gelmesi şaşırtıcı değil. Ve elbette, mizanpaj tasarımcılarının bunu incelemesi gerekiyor. Duyarlı tasarım yakında neredeyse tüm sitelerde olacağından, giderek daha fazla insan mobil cihazları kullanıyor.

Ve şunu söylemek istiyorum ki, bu tür cihazlarda okumak için siteler onsuzdan çok daha uygun.

Bugün size, siteyi uyarlanabilirlik açısından kontrol edebileceğiniz 5 çok kullanışlı ve harika hizmet sunmak istiyorum.

Hadi gidelim.

Uyarlanabilirlik için siteyi kontrol edebileceğiniz 5 hizmet.

www.responsivedesigntest.net

Siteleri kontrol etmek için iyi bir hizmet. Hem tabletler hem de telefonlar için birçok ekran çözünürlüğü vardır.

mattkersley.com

Matt Kersley'den basit bir web sitesi denetleyicisi. Mobil cihazların tüm popüler çözünürlükleri de mevcuttur.

ekran sorgusu.es

Herhangi bir siteyi kontrol edecek çok güzel bir hizmet. İşlevselliğinin yanı sıra tasarımını da çok beğendim.

quirktools.com

Çok güzel ve işlevsel bir hizmet. Sitenin TV'de nasıl görüneceğini kontrol etmek bile mümkün :-)

Duyarlı bir web sitesini nasıl test ederim? Web sitelerini farklı cihazlarda test ederken karşılaşılan zorluklar nelerdir? Bir web sitesini masaüstü monitörde test etmek, cep telefonu gibi elde taşınabilir bir cihazda test etmekten nasıl farklıdır? Duyarlı web sitelerini test etmek için hangi araçları kullanabiliriz? bizim

Duyarlı Web Tasarımı Nedir?

Duyarlı Web Tasarımı (RWD), en uygun deneyim için web siteleri oluşturmayı amaçlayan bir web tasarım yaklaşımının tanımıdır - minimum boyutta kolay okuma ve gezinme, çok çeşitli cihazlarda (masaüstü bilgisayar monitörlerinden cep telefonlarına kadar) kaydırma ve kaydırma ...

RWD ile oluşturulmuş bir site, akıcı, orantılı ızgaralar, esnek görüntüler ve CSS3 medya sorgularını kullanarak düzeni aşağıdaki şekillerde görüntüleme ortamına uyarlar:

• Akışkan ızgara konsepti, sayfa öğesinin piksel veya nokta gibi mutlak birimler yerine yüzdeler gibi göreli birimlerle boyutlandırılmasını gerektirir.
• Esnek görüntüler, kapsayıcı öğenin dışında görüntülenmelerini önlemek için göreli birimlerde de değerlendirilir.
• Medya sorguları, bir sayfanın sitenin görüntülendiği cihazın özelliklerine, çoğunlukla tarayıcının genişliğine bağlı olarak farklı CSS stil kuralları kullanmasına izin verir.

Duyarlı web tasarımını test etmenin zorlukları

Günümüzde pek çok kişi web sitelerine erişmek için cep telefonlarını veya tabletlerini kullanıyor, bu nedenle mobilde kullanıcı deneyimi masaüstünden çok farklı olduğu için duyarlı web tasarımını test etmek önemlidir.

Uygun bir web sitesini test etmenin belki de en zor yanı, web sitesinin birden fazla cihazda ve platformda beklendiği gibi çalışmasıdır, ancak aslında piyasadaki tüm mobil cihazlarda test yapmak çoğumuz için pratik değildir.

Duyarlı web tasarımını test etmeye başlayan birçok test uzmanı, genellikle tarayıcı penceresini mobil, tablet ve masaüstü görünüm penceresinin boyutuna uyacak şekilde yeniden boyutlandırarak başlar. Bu yöntem genellikle bir web sitesinin farklı görüntüleme bağlantı noktalarında hızlı görsel denetimi için uygundur ve tarayıcı penceresini küçültürken veya büyüttüğümüzde altta yatan görüntüleme sorunlarını belirlememize yardımcı olur.

Ancak gerçek mobil cihazlarda test yapmak tamamen farklı bir deneyimdir.

Öykünücüleri kullanma

Mobil emülatör web sitelerinin ve uygulamaların mobil ortamda nasıl görüntüleneceğini ve çalışacağını gösteren bir web simülasyonudur.

Emülatörler size tam olarak ihtiyaç duyacağınız test araçlarını sağlamayabilir, ancak yine de bir web sitesinin işlevselliğini yüksek düzeyde test etmek için uygun maliyetli bir çözümdür.

Google Geliştirme Araçları

Google Chrome DevTools, duyarlı projeleri test etmek ve hata ayıklamak için yararlı araçlarla yüklenen cihaz modu adlı bir özelliğe sahiptir.

Ekranınızı basitçe yeniden boyutlandıran diğer duyarlı tasarım test araçlarının çoğundan farklı olarak, bu araç aslında mobil cihaz davranışını, özellikle dokunma ve kaydırma gibi dokunma etkileşimlerini doğrudan web tarayıcınızda taklit eder.

Duyarlı web tasarımını test etmek için bazı genel kurallar:

1. Metin, kontroller ve resimler doğru hizalanmış
2. Uygun tıklama bölgesi
3. Renk, gölgeleme ve gradyan eşleşmesi
4. Kenarların doğru doldurulup doldurulmadığını kontrol edin
5. Metin, resimler, kontroller ve kenarlıklar ekranın kenarlarına sığmıyor
6. Yazı tipi boyutu, stili ve rengi her metin türü için uygundur
7. Kayan metin (veri girişi) doğru görüntüleniyor

Modüller küçüldükçe ve tarayıcı penceresi genişledikçe veya mobil cihazınızı döndürdüğünüzde modüllerin konumunu kontrol edin. Masaüstünden mobile geçiş yaparken çeşitli modüller kaybolabilir, ancak hangi modüllerin hangi görünüm alanında görünmesi gerektiğini tam olarak bildiğinizden emin olun.

En sonunda

Web uygulamanızın nasıl kullanıldığını öğrenin. Müşterilerinizin web sitenize erişmek için hangi cihazları kullandığını öğrenmek için Google Analytics'ten çok sayıda bilgi alabilirsiniz. Temel doğrulama ve üst düzey işlevsel testler gerçekleştirmek için otomatik araçları ve öykünücüleri kullanın ve bunu gerçek manuel cihaz testiyle birleştirin.

Web teknolojilerinin gelişmesiyle birlikte web geliştirme gereksinimleri de artmaktadır. Hepsinden önemlisi, web geliştiricileri, mizanpaj tasarımcıları veya bugün ön uç geliştiriciler olarak adlandırılanlar kendilerini hissediyorlar.

Bu yazıda, günümüzde çok değer verilen bir "hile" olduğu için, duyarlı düzen hakkında biraz konuşacağız. Uyarlanabilir yerleşim söz konusu olduğunda, tüm kategorilerdeki yerleşim tasarımcıları, müşterilere veya proje yöneticilerine, en hafif tabirle kötü niyetle bakarlar, çünkü bunun ne kadar zor olduğunu anlarlar.

Birçok kişi duyarlı düzeni akıcı düzen ile karıştırmaya başlıyor, bu yeni başlayan düzen tasarımcıları için çok yaygın bir hatadır. Sorduğunuz fark nedir?

Sizin için net olması için başlayalım ve tabiri caizse yukarıdaki tüm noktaları ortaya koyalım ve ne tür düzen olduğunu düşünelim.

4 tip düzen vardır:

1. Sabit düzen
2. Kauçuk düzeni
3. Uyarlanabilir düzen
4. Duyarlı düzen

Tüm türleri daha ayrıntılı olarak ele alalım.

1. Sabit düzen

Bloklar genişliklerini değiştirmez. Düşük çözünürlüklü monitörlerde yatay bir kaydırma çubuğu görünür.

2. Kauçuk düzeni

Bloklar, tarayıcı penceresinin boyutuna bağlı olarak genişliklerini değiştirir. Maksimum ve minimum değerler alabilir (max-width özelliği). Ancak ekran küçülürken %50'den %100 yapmak imkansız.

3. Duyarlı düzen

Yardımla bedenlendi @medya veya komut dosyaları sayesinde. Bilinen belirli cihazlar için keskinleştirilmiştir (320, 768, 1024, vb.). Belirtilen seviyelerden birine ulaştıktan sonra, hamlelerde herhangi bir değişiklik meydana gelir. benzersiz bir şekilde uygun

4. Duyarlı düzen

Akışkan ve duyarlı düzenlerin bir birleşimidir. Uygulanması en zor olanı. Ancak sonuç en kabul edilebilir olanıdır. Sitenin herhangi bir cihaza uyum sağlayacağını söylemek güvenli.

Bu yüzden 4 tip site düzeninden bahsettik. Şimdi duyarlı düzen komut dosyası mucizemizin zamanı geldi. Umarım script'in hiçbir şeyi açıklamaya ihtiyacı yoktur, script oldukça basittir, sadece bir blok değiştirildiğinde bir yere karışacağını söylüyoruz ve bu kadar. Elbette bu CSS stilleri ile mümkündür, ancak bilmeniz gereken tüm yöntemler bazı yerlerde olur, bu işe yaramaz, ancak tam olarak doğru olduğu ortaya çıkar.

Uyarlanabilir düzen komut dosyası:

Bu kadar. Herhangi bir sorunuz varsa, yorumları gıcırdatın, gidin

Projenizi başlatmadan önce her tür kullanıcı ve cihaz için hazır olduğundan emin olmak hiç bu kadar önemli olmamıştı. Tasarımı her cihazda test etmek fiziksel olarak zor olsa da, farklı duyarlı senaryoları simüle etmenize yardımcı olacak bazı araçlar ve uygulamalar vardır.

Pek çok ücretsiz ve premium araç mevcut olduğundan, duyarlı tasarımları çevrimiçi yayınlamadan önce test etmemek için hiçbir neden yoktur. Yapmanız gereken birçok tasarım ayarlaması için bu bilgiyi kullanmayı unutmayın! Bugün size bir dizi duyarlı tasarım test aracı sunuyoruz.

1. Google Mobil Uyumluluk Testi

Google Mobil Dostu Test, bazı nedenlerden dolayı gözden kaçan araçlardan biridir. Arama görünürlüğüne yardımcı olmak için sitenizi Google standartlarına göre tasarlamanız gerekir ve bu kadar basit.

Aracın kullanımı kolaydır, sadece URL'yi girin ve sayfalarınızın mobil cihazlarda nasıl sıralandığını görün. Bu aracın en iyi yanı, hataları düzeltebilmeniz için sitenizin mobil cihazlarda nerede yavaş veya kötü görüntülenebileceğini tespit etmesidir.

Bugün artık kimseyi sitenin mobil versiyonuna olan ihtiyaç konusunda ikna etmeye gerek yok. Sonuçta, her gün akıllı telefonlardan ve tabletlerden daha fazla ziyaretçi var. Bu yazının yazıldığı sırada, blog ziyaretçilerimin yaklaşık %20'si göz atmak için mobil cihazları kullanıyor. Yani her beş kişiden biri web sitemi bir telefon veya tabletten ziyaret ediyor.

Birkaç yıl önce bu tür ziyaretçileri düşünmedim bile, ancak sayıları toplam sayının %10'unu aştığında, duyarlı bir düzen kullanmaya başladım. Bu, içeriğin mobil cihazlarda doğru bir şekilde görüntülenmesini ve hem ziyaretçilerin hem de arama motorlarının siteye olan bağlılığını artırmayı mümkün kıldı.

Sitenin mobil versiyonu ile responsive tasarımı aynı şey değildir. Bu makale, ziyaretçinin cihazının ekran çözünürlüğüne bağlı olarak site tasarımı değiştiğinde duyarlı düzeni test etmeye odaklanacaktır.

Sitenizin mobil cihazlarda doğru görüntülendiğinden emin olmak için kontrol etmeniz gerekir ve bunun için birkaç faydalı hizmet ve araç vardır.

Duyarlı düzen için hızlı kontrol

Popüler İnternet tarayıcısı (tarayıcı) Mozilla Firefox web sitesi tasarımının mobil cihazlarda görüntülenmeye uygunluğunun kontrol edilmesi için yerleşik araçlarla donatılmıştır. Kullanmak için "Menü" - "Geliştirme" - "Duyarlı Tasarım"a gidin. Veya klavyede aynı anda üç tuşa basın ++ [M]

Aşağıdaki gibi bir şey görmelisiniz:

Ekranın çözünürlüğünü ve yönünü değiştirerek sitenizin mobil ziyaretçilere nasıl görüntüleneceğini kontrol edebilirsiniz.

Google Tarayıcı Krom ayrıca site tasarımının yanıt verebilirliğini kontrol etmek için yerleşik desteğe sahiptir. Bunu yapmak için menüye gidin, "Ek araçlar" öğesini ve ardından "geliştirici araçları" öğesini seçin (veya tuşuna basın ).

Bundan sonra, duyarlı tasarım simgesine tıklayın (veya aynı anda klavyeye tıklayın ++ [M]):

Ekranın ortasında, sitenizin mobil cihazların ekranlarında nasıl görüneceğini göreceksiniz:

Mobil tasarımın SEO testi

Bildiğiniz gibi, iki dünya arama lideri Google ve Yandex, sitenin mobil cihazların ekranlarında nasıl görünmesi gerektiği konusunda kendi arsız fikirlerine sahipler. Ve site mobil ziyaretçiler için uygunsuz olarak kabul edilirse, arama sonuçlarında aşağı iner. Dolayısıyla, SEO açısından bakıldığında, mobil ziyaretçileri kaybetmek istemiyorsanız, yalnızca responsive bir tasarıma sahip olmanız yetmez, aynı zamanda arama motorlarının da bunu mobil cihazlara uygun olarak düşünmesi gerekir.

Google hizmetini kullanarak uyarlanabilirliği kontrol etmek için aşağıdaki adrese gidin ve sitenizin adını yazın: https://www.google.com/webmasters/tools/mobile-friendly/.

Blogumu kontrol etmenin sonucu şöyle görünüyor:

Yandex ile biraz daha karmaşıktır, doğrulama için Yandex.Webmaster hizmetine kaydolmak ve arayüzün beta sürümünü kullanmak gerekir:

Uyarlanabilirliği test etmek için çevrimiçi hizmetler

Bu hizmetlerin ana görevi, sitenizin bir mobil cihazda nasıl görüneceğini sunmaktır (göstermektir). Bu tür işlevselliğe sahip birçok site var. Bunlardan sadece birkaçını vereceğim. Çoğu durumda, FireFox ve Chrome'un yerleşik işlevlerini çoğaltırlar.

Google yeniden boyutlandırıcı

Kendi duyarlı tanıtım hizmetine sahip Google ile tekrar başlayacağım: http://design.google.com/resizer/#

Quirktools ekran sineği

İkinci güzel hizmet ise http://quirktools.com/screenfly/. Sitenizin TV'de bile nasıl görünebileceğini size gösterecek!

Symby.ru adaptörü

Peki, "yerli üreticiyi" rahatsız etmemek için başka bir site örneği vereceğim: http://symby.ru/adaptest/. Bir sayfada, farklı ekran çözünürlüklerinde aynı anda birkaç görünüm göreceksiniz.

Sitenin mobil versiyonunun hızı

Sitenizin duyarlı olduğundan ve çoğu cihazın ekranlarında doğru görüntülendiğinden emin olduktan sonra, çalışma hızını kontrol etmelisiniz. Yine mobil ziyaretçilere uygulandı.

Sayfa Hızı Analizleri

Google, her zaman olduğu gibi diğerlerinden önde: https://developers.google.com/speed/pagespeed/insights/. Bu hizmet size sitenin telefon ekranında nasıl göründüğünü gösterecek ve mobil cihazlarda yükleme hızını artırmak için kodun nasıl optimize edileceğine dair önerilerde bulunacaktır.

Web Sayfası Testi

Ve sonuç olarak, sitenin sadece mobil cihazda nasıl göründüğünü değil, aynı zamanda çalışma hızını da gösterecek bir hizmet örneği vereceğim: http://www.webpagetest.org/

sonuçlar

Bence günlük işlerde site tasarımında değişiklik yaparken, FireFox ve Chrome tarayıcılarının yerleşik özelliklerini kullanmak daha kolay. Bundan sonra elbette arama motorlarının tasarımınıza olan sadakatini kontrol etmeniz gerekiyor. Ve ancak o zaman, ruhu sakinleştirmek veya gösteriş yapmak için çevrimiçi hizmetleri kullanabilirsiniz.