Duyarlı web tasarımı, on yıl öncesinin vızıltı kelimesidir ve içinde yaşadığımız çok ekranlı dünya için idealdir. Bununla birlikte, daha büyük dosya boyutları nedeniyle bu işlemin gerçekleştirilmesi söz konusudur.
Bu, bazı uzmanların, Flash'ın ilk günlerinde olduğu gibi, duyarlı tasarımın, iyi bir sebepten ötürü heyecanlanabileceğimiz bir şey olduğunu söylemelerini istedi. Ancak, şu anda performans sorunları olsa da, bunlar bir miktar küçük ayarlamalar, sıkıştırma ve görüntü yeniden boyutlandırma ile bir ölçüde aşılabilir.
Duyarlı tasarım, tablet ve masaüstü dağıtımı için tasarlananlar dahil, her cihaz için aynı HTML öğelerini yükler. Bu, hangi cihazın görüntülendiğine bakılmaksızın, görüntüler ve komut dosyaları dahil olmak üzere tüm içeriğin genellikle teslim edildiği anlamına gelir.
Bir çalışma Geçen yıl yayınlanan yanıt veren sitelerin% 86'sının mobil cihazlara tam bir masaüstü sayfası sunduğunu gösterdi. Bu, şişirilmiş web sayfalarının yolundaki ilerlemeyi durduracak olursak, ele alınması gereken tasarım tekniğindeki bir eğilimdir.
Şu anda yanıt veren tasarım sayfa boyutlarını zorluyor ve bu özellikle, sitenin yüklenmemesi durumunda mobil kullanıcıların% 57'sinin ayrılacağını düşündüğünüzde, ele alınması gereken bir eğilim. 3 saniye içinde
Halihazırda bir tasarımı olan ve şimdi optimize etmek isteyenler için Mobitest devam edip ele almak için performansı ölçmek için kullanılabilir. Elbette, bir tasarım planlanırken, bu aşamada optimizasyon yapılması daha kolay olacaktır ve performans her zaman tasarımdan ziyade tasarımın vazgeçilmez bir parçası olarak düşünülmelidir.
Performansı artırmak için, sayfaların ve yüklenen kaynakların boyutunun azaltılması gerekir. Bu, sitenin görünümünü ve hissini ciddi bir şekilde değiştirmeden çeşitli teknikler kullanılarak gerçekleştirilebilir.
Göz önünde bulundurulması gereken ilk şey, yalnızca ihtiyaç duyulan kaynakların hedef cihaza gönderilmesini sağlamaktır. Bu, HTTP isteklerinin sayısını en aza indirerek yapılabilir, böylece kullanıcı DOM'ın yüklenmesini beklerken daha az zaman harcar. Bu, CSS ve Javascript kaynaklarının sıkıştırılmasıyla yapılabilir. Pusula - Açık kaynaklı bir CSS yazma çerçevesi - kullanılabilir. Bu, geliştiricilerin daha temiz işaretleme oluşturmasına ve en az yayılma ile sprite ve uzantılar oluşturmasına olanak tanır.
JavaScript ile ilgili olarak, araçlar UglifyJS kodu sıkıştıran kullanılabilir.
Bu, duyarlı bir tasarıma geldiğinde önemli bir teknik olarak düşünülebilir çünkü mobil ve akıllı telefon kullanıcılarının siteyi yavaşlatan veya kullanamayacakları yönlerini indirmediğinden emin olmak için kullanılabilir.
Koşullu yükleme, sosyal widget'lar, resimler, haritalar ve çok daha fazlası dahil olmak üzere her türlü içeriğin yüklenmesini durdurmak için kullanılabilir. Bu noktada, sitenin optimizasyonun her aşamasında kapsamlı bir şekilde test edilmesi gerektiğine dikkat çekmek önemlidir; böylece, ilerledikçe neyin fark yarattığını görmek kolaydır.
Hepimiz, görsellerin bir web sayfasındaki en büyük kilobayt miktarını almaktan genellikle sorumlu olduğunu biliyoruz. Bir masaüstü tarayıcısı için tasarlanan görüntülerin, bir mobil cihaza teslim edildiğinde düşük performans göstereceğini söylemek de güvenli.
Bir sitenin çok fazla eski içerik barındırması durumunda, bu, performansı daha da etkileyecek ve bu içeriğin yüklenmesini önlemek için bir şekilde uygulanacak. Bu, src veya img öğelerini değiştirerek işaretlemeyi değiştirerek yapılabilirken, PHP çözümü Uyarlamalı Görüntüler muhtemelen daha kolay. Yazılım, ekran boyutunu algılar ve işaretlemeyi değiştirmeye gerek kalmadan, uygun ölçeklenmiş gömülü HTML görüntülerini otomatik olarak oluşturur, önbelleğe alır ve sunar. Akışkan Görüntü teknikleriyle birlikte kullanılmak üzere, kullanışlı bir çözüm ve çok fazla zaman kazandıracak bir çözüm. Uyarlamalı Görüntüler, siteye gelen ziyaretçilerin ekran boyutunu belirlemek için bir htaccess dosyası, bir php dosyası ve tek bir Javascript satırı kullanır.
Metin de düşünmeye değer, çünkü cihaz daraltıldığında bu durum doğal olarak sarılacak ve görüntü sorunlarına neden olabilir. FitText bu adrese yardımcı olabilecek bir araçtır, izin verilen minimum ve maksimum boyutlar için seçenekler ile font boyutunu otomatik olarak güncelleyen bir jQuery eklentisi.
Bu, bir mobil aygıtta kötü görüntülenebilecek başlıklar için idealdir ve CSS3 belirtilen yazı tipi boyutunun göz ardı edilmesine izin verir. Ancak, FitText sadece başlıklar içindir ve paragraf metninde kullanılmamalıdır.
Duyarlı tasarım, nispeten yeni bir teknoloji ya da teknik gibi, problemlerine rağmen, bu şekilde bir site inşa etmeyi seçmeye değer. Kimse geriye gitmek istemez ve mobil bir web sitesi kurmak daha kolay olsa da, olabildiğince yenilikçi olmak daha iyidir.
Google kabul ediyor, onların tavsiyeleri Duyarlı tasarımı, mobil için tasarlamanın en iyi yolu olarak kullanmaktır. Tabii ki arama devlerine, bunun anlamı, esas olarak aynı sitenin çok sayıda URL'sinden ziyade, taranacak tek bir URL’ye sahip oldukları anlamına geliyor.
Ancak, bu sefer sosyal paylaşım maniasında, mobil kullanıcılar bir sayfayı masaüstünü kullanarak bir sayfayı paylaşabileceğinden de mantıklıdır. Tekdüze bir deneyim yaratmak için, bu aynı içeriği sunmalıdır.
Dahası, duyarlı bir alana sahip olmak, işgücünde üretkenliği artırır, çünkü daha çok yapılması gereken daha az şey vardır. Bu içerik, güncellemeler ve SEO için geçerlidir, çünkü farklı siteler oluşturulduğunda bunun ayrı ayrı yapılması gerekecektir.
Mobil cihazlar ve tabletler, internete bağlanma ve hemen hemen post-PC döneminde internete bağlanmak için norm haline geliyor. Dünya genelinde tablet satışları, bir yıl içinde, o anda iki kattan fazla artış gösterdi ve artık pek çok tüketici, Android'i ve iOS'u çalıştıran farklı cihazları seçti.
Performans endişelerine rağmen, şimdiye kadar duyarlı tasarımın olumlu bir etki yarattığından şüphe yok. Bir rapora göre Dünyanın en iyi markalarından bazılarının duyarlı bir sitenin trafiği nasıl etkilediğini sordu. Tüm cihazlarda ziyaretler önemli ölçüde arttı.
Buna, gezici ziyaretçiler tarafından ortalama% 23'lük bir artış ve% 26'lık daha düşük bir hemen çıkma oranı dahildir. Ziyaretçiler, daha önce görüldüğü gibi, sitelerde% 7,5 daha fazla zaman harcıyordu.
Popüler bir sörf giyim perakendecisi olan O'Neill, duyarlı bir site geliştirmenin bir sonucu olarak iPad ve iPhone'da% 65,7 daha yüksek bir dönüşüm oranı bildirdi. Bu, yalnızca bu cihazlarda% 101,2 gelir artışı açıkladı.
Android cihazlarla ilgili olarak, dönüşüm oranı% 407,3'lük bir artışla% 591.4'lük büyük bir gelir artışına karşılık geldi. Büyüme hala görülmesine rağmen, mobil olmayan cihazlarda daha küçük bir dönüşüm oranı görülmüştür.
Bu, rakamlarını serbest bırakan markalardan sadece bir tanesidir ve birkaç yıl önce sosyal medyanın etkisi ile olduğu gibi, şu anda diğerlerinden verileri almak oldukça zordur. Bununla birlikte, yanıt veren bir web sitesi tasarlamanın getirilerinin önemli olabileceğini kanıtlamanın bir yolu vardır.
Bunu akılda tutarak, herhangi bir tasarımcının müşterileri için duyarlı bir şekilde tasarlamaya başlaması ve mümkün olabildiğince iyi performans göstermelerini sağlamak için ne gibi bir sebep gerekir? Bir tane yok ve duyarlı teknikler kullanarak bir sitenin nasıl tasarlanacağını, inşa edildiğini ve optimize edildiğini öğrenme sorununa gitmek istemeyen tasarımcılar, kendilerini toz içinde bırakabilirler.
Kullanıcıların% 67'si bir mobil site üzerinden satın aldıklarını söylüyor ve mobil internet kullanımının önümüzdeki yıl masaüstü bilgisayar kullanımının üstesinden geleceği düşünülüyor. Tüm bunları göz önünde bulundurarak, işletmelerin sunabilecekleri en iyi mobil web çözümlerine neden daha fazla ilgi duyduklarını görmek kolaydır.
Duyarlı tasarım şu an henüz emekleme aşamasında olabilir ancak piyasa talebinin hızla büyümesini sağlayacağı açıktır, bu yüzden şimdi mümkün olduğunca disiplinin birçok yönü olarak öğrenmeye değer.
Duyarlı siteleri optimize etmek için hangi teknikleri kullandınız? Alternatif içerik sunmak duyarlı tasarımın avantajlarını ortadan kaldırıyor mu? Yorumlarda bize bildirin.