Web tasarımı konusunu araştırmak için kısa bir süre bile harcamak ve “yanıt veren” niteliğinin ortaya çıkması zorunludur. Çevrimiçi varlığınızı nasıl optimize edeceğinizi, sektördeki ipleri öğrenmeyi veya bu açık sözlü terimi merak edip edemeyeceğinizi anlamaya çalışırken, doğru yere geldiniz. Duyarlı web tasarımının en önemli yönlerini keşfedeceğiz, kökenleri hakkında konuşacağız ve pratikte nasıl çalıştığını göstereceğiz. Öyleyse daha fazla uzatmadan, elimizdeki soruyu ele alalım: Duyarlı web tasarımı nedir?
Kısacası, duyarlı web tasarımı, onları görüntülemek için kullanılan cihaza bakılmaksızın iyi görünmelerini sağlayan web sayfalarını tasarlamaya yönelik bir yaklaşımı ifade eder. Amaç, ekran çözünürlüğü, pencere boyutu veya cihazın yönlendirmesi ne olursa olsun, bir web sayfasının okunabilir olduğundan emin olmaktır.
Neden bütün bu yaygara? Bazı istatistiklere bakacak olursak, web sitenizin mobil duyarlı olduğundan emin olmak için zaman ayırmanın neden her şeyden önemlidir.
Nisan 2018’de mobil internet trafiği toplam web trafiğinin% 51,2’sini oluşturuyordu ve bu sayının artması bekleniyor.
10 tüketiciden 8’i, cihazlarında iyi performans göstermiyorsa içerikle ilgilenmeyi bırakacaktır.
Kullanıcıların% 61’inin, web sitesine erişmekte sorun yaşıyorsa geri dönmeleri pek mümkün değildir.
Mobil kullanım aynı zamanda alışveriş yapma şeklimizi de değiştiriyor: 2017’de toplam e-ticaret gelirinin% 34,5’i, 2021’de% 53,9 gibi yüksek bir rakamla mobilden geldi.
Duyarlı Tasarım Tarihi
Yanıt veren bir web sayfası, geçen bir trendden ziyade standart bir uygulama haline geldi ve hepsi 2000’li yılların başlarında, web sayfalarının düzenini tarayıcı genişliğine göre ayarlama fikriyle tasarımcılarla başladı. Gerçek “duyarlılık saltanatı”, web tasarımcısı Ethan Marcotte, “duyarlı tasarım” terimini A List Apart’ın bir makalesinde yazdığında 2010 yılına kadar gerçekleşmedi.
Kullanıcıların mobil cihazlarda web sayfalarına giderek daha fazla erişmesi ile birlikte, mobil uyumlu tasarımlara olan ihtiyaç belirgin hale geldi. Google, akıllı telefonlarda yapılan aramalar için mobil uyumlu web sitelerini önceliklendiren bir duyuru olan “Mobilegeddon” ile mobil odak kaymasını güçlendirdi; ertesi yıl mobil ve tablet internet kullanımı ilk defa masaüstünü aştı ve sayılar artmaya devam etti. İstatistikler, cep telefonu web sitesi trafiğinin küresel payının 2018’de% 52,2 olduğunu ve bunun 2017 yılına göre% 1,9 oranında arttığını gösteriyor. Asya, mobil kullanım payının en yüksek olduğu bölge – yani 2018 için% 65,1.
Duyarlı Bir Site Nasıl Oluşturulur?
Yanıt veren web tasarımının arkasındaki fikir, sayfaya erişmek için kullanılan cihaza bakılmaksızın aynı HTML kodunu kullanmaktır. Bu şekilde, ayrı web siteleri oluşturma ihtiyacı ortadan kalkar. Web sayfasının aynı elemanları boyutuna bağlı olarak bakış açısına uyacak şekilde değiştirilir. Bir mobil cihazla, masaüstünde açılan aynı sayfayı gösteren aşağıdaki ekran görüntülerine bakın.
Duyarlı Web Tasarım Öğeleri
Web sitesinin düzeninde bu ekrana bağlı dinamik değişiklikleri gerçekleştirmek için farklı öğeler kullanılır. Aşağıda, duyarlı web tasarımının ana bileşenlerinden bazıları verilmiştir.
Duyarlılığı sağlamak için yaygın olarak uygulanan CSS teknikleri, medya sorgularını içerir. Bunlar, yalnızca belirli bir koşul doğruysa bir özellik bloğu ekleyerek çalışır. En sık bu tarayıcı genişliğini ifade eder.
Akışkan ızgaralarının arkasındaki fikir, ızgaradaki tüm sayfa elemanlarının mutlak birimler yerine yüzdeleri kullanarak boyutlandırılmasıyla ilgilidir. Bu, kılavuzun, tarayıcı genişliğine göre esnek, yeniden yapılandırılmasına olanak tanıyan, birbirine göre orantılı genişlik ve yüksekliğe sahip sütunlara bölündüğü anlamına gelir ve bunların tümü HTML kullanılarak gerçekleştirilir.
Web sitesi örneği: Aşağıdaki resimler Cowlick Studios’un bu tür bir akışkanlığı web tasarımlarından birinde nasıl kullandığını göstermektedir. Tarayıcı tam ekrana açıldığında üç öğenin yatay olarak nasıl “genişlediğine” ve tarayıcı boyutu küçüldüğünde sütun formasyonuna “daraltıldığına” dikkat edin.
Cihaz ne olursa olsun şebekenin adapte olması ve görüntülenebilir olması için akışkanlığa ihtiyacı olması gibi, içerik de duyarlı tasarım gereksinimlerine uymak için akışkan olmalıdır. Görsel içerik için bu, esnek görseller veya daha ziyade, ızgara elemanları gibi, yüzde olarak ölçeklendirilmiş görüntüler kullanılarak gerçekleştirilir.
Resimlerin ızgaradaki değişiklikleri izlediğinden emin olmanın yanı sıra, içeriklerini iyileştirmek çok önemlidir. Sanat yönünün girdiği yer burasıdır. Fotoğrafı daha küçük bir ekrana sığacak şekilde küçültmek, her zaman yolunda değildir. Fotoğrafın odak noktasının hala küçültüldüğünde bile yeterince belirgin olduğundan emin olmak bazen yakınlaştırma ve kırpma gerektirir. Bu, duyarlı bir web sitesinin genel deneyimini önemli ölçüde artırabilecek, genellikle gözden kaçan bir ayrıntıdır.
Aşağıdaki örnekler noktayı iyi göstermektedir. Ekran boyutu değiştikçe fotoğraf da değişir. Mevcut alandan en iyi şekilde yararlanırken beraberindeki eşyanın mesajını iletmeye devam eder. Bu örnekteki makalenin iki dünya lideri arasındaki telefon görüşmeleri ile ilgisi var. Daha büyük bir ekranda oval ofisi tam olarak görüyoruz. Başkan Obama telefonda, masasının arkasında oturuyor. Daha küçük bir ekranda aynı fotoğraf çok fazla ayrıntı kaybeder. Yakınlaştırmak ve temel özellikleri çerçevede tutmak çok daha iyi bir seçimdir.
Çok sayıda ekran yapılandırması için web sayfaları tasarlama zorluğuna yaklaşmanın bir başka yolu da uyarlamalı tasarım olarak adlandırılan bir kavramdır. Uyarlanabilir bir web sayfası tasarlarken, her olası ekran yapılandırması için birden fazla farklı sürüm oluşturmak gerekir. Bir kullanıcı web sitesine eriştiğinde, ekranlarının boyutu algılanır. Yanıt olarak, sayfanın uygun sürümü yüklenir. Uyumlu tasarımın, duyarlı tasarımın uyarlanabilir tasarımdan farkı nedir?
zorluk
Aynı web sitesinin birden çok versiyonunu uyarlama tasarımında olduğu gibi çok zaman harcayacak gibi gözükse de, gerçek şu ki, herhangi bir ekran konfigürasyonuna cevap verebilme yeteneğine sahip tek bir web sayfası tasarlamanın biraz planlanması gerekiyor. Uyarlanabilir ve duyarlı tasarımın zorluk derecesini sıralamak, web tasarımcısı çevrelerinde biraz bölücü bir konu gibi görünüyor. Bu nedenle, başka türlü iddia eden bir takım kaynakların bulunduğuna dikkat çekerek, fikir birliğine varılan bir web sayfasını tasarlamanın daha zor, daha pahalı bir yaklaşım olduğu anlaşılmaktadır.
Esneklik
Temel özelliklerinden bazılarının adından da anlaşılacağı gibi, bu nokta duyarlı tasarıma gidiyor. Duyarlı bir tasarım, kendi yoluna atılan tüm ekran konfigürasyonlarına uyum sağlayacaktır. Bu arada, uyarlanabilir tasarım, yalnızca tasarlandığı belirli platformlarda tamamen parlayacak.
Yüklenme zamanı
Araştırmalar, tüketicilerin% 47’sinin bir web sayfasının 2 saniye veya daha kısa sürede yüklenmesini beklediğini ve% 40’ının yüklenmesinin 3 saniyeden uzun süren bir web sitesini terk edeceğini gösteriyor. Yükleme süresi esastır, bu nedenle, duyarlı tasarım ilkelerine göre oluşturulmuş bir web sayfasının, benzer boyuttaki adaptif tabanlı olandan daha kısa bir yükleme süresine sahip olacağını unutmayın.
Duyarlı vs Duyarlı
Hangisi daha iyi seçim? Tek beden uyan herkese uyan yaklaşımıyla, duyarlı bir süredir devam eden web tasarım şirketleri teknik olmuştur. Bu seçim sürekli değişen bir teknoloji ortamında çok anlam ifade ediyor. Gelecekte oyun alanına girebilecek yeni cihazlara karşı web sitenizi “geleceğe dayanıklı” hale getirmenin harika bir yolu.
Bu uyarlanabilir web tasarımının avantajları vardır. Bir web sitesinin uzun zamandır devam eden, popüler bir masaüstü sürümü onu mobil cihazlar için kesmiyorsa, uyarlanabilir bir yaklaşım kullanmak ve mevcut tasarımı farklı bir çözünürlükte yapılandırmak daha mantıklı olur. Bu, her şeyi hurdaya çıkarmak ve sıfırdan duyarlı bir web sitesi oluşturmakla karşılaştırıldığında çok daha iyi bir seçenek gibi görünüyor. Yanıt, her zaman olduğu gibi, her projenin özelliklerini ve her iki tasarım yönteminin de güçlü ve zayıf yönlerini tam olarak anlamada yatmaktadır.
Şimdi, duyarlı web tasarımının temellerini (tanım, öğeler, uyarlanabilir tasarımdan farklı kılan) ele aldığımızda, pratikte neye benzediğini keşfetmenin zamanı geldi. Tüm şekil ve büyüklükteki ekranlarda iyi görünmek için bir web sunumu tasarlamak kolay bir iş değildir ve yanıt veren tasarım devrimi, yanıt verenlerle aynı doğrultuda kalırken çok yönlü ve farklı bakış açılarıyla şekillendirilen bazı ilginç web tasarım trendlerinin ortaya çıkmasına neden olmuştur. web tasarımı özellikleri.
Hamburger menüsü, sosisli sandviç ve sandviç de dahil olmak üzere gıdaya ilişkin diğer diğer adlarla bilinir. Bu tür bir menü hem uygulamalarda hem de mobil web sitelerinde standart bir özellik haline geldi. Tasarımcı çevrelerinde bazı tartışmalara yol açan hamburger menüsü, özelliklerini sergilediği ideal yoldan daha az eleştirdi.
Öte yandan, dar ekranlar için kompakt, denenmiş ve gerçek bir çözümdür, kullanıcılar için neredeyse evrensel olarak kabul edilebilir hale gelmiştir ve duyarlı tasarımdaki kabul edilmiş bir özellik olarak statüsünü sağlamlaştırmıştır; en iyi şekilde bir örnek kullanılarak açıklandığında, bu eğilim tıklanarak eylemde görülebilir.
Yatay olarak zorlanan mobil cihazlar, daha dar, daha uzun dikey menüler popülerliğine de yol açtı.
Bir zamanlar baskıda baskın olan yazı tiplerinden bazıları, en yeni ekran biçimlerinde olduğu kadar iyi çalışmaz. Bu, yeni, optimize edilmiş tipografi stillerine yol açıyor.
Yazı tiplerinden bahsetmek, yazı tipi yeniden boyutlandırma, duyarlı tasarımın bir başka popüler özelliğidir. Bu, kodlama açısından basit bir tekniktir ancak görsel olarak çekici bir yöntemdir.
Tüm bu küçük cihazlara odaklanma şu soruyu soruyor: Daha büyük ekranlar söz konusu olduğunda masaya getirilen duyarlı web tasarımı nedir? Geniş ekran tasarım trendi, kendi başına bir devrime sahip olan süper geniş, yüksek tanımlı ekranları unutmuyor, 4K ve hatta 8K ekranları giderek daha yaygın hale geliyor.
Bu, bu etkileyici daha büyük formatların sahip olduğu potansiyelden tam olarak yararlanabileceğinden emin, görkemli, yüksek çözünürlüklü görüntüler kullanma eğilimine yol açtı. Bu, büyük ekran TV’ler veya birden fazla masaüstü monitörü kullanarak yan yana internete erişmenin günümüzde nadir olmadığı için anlamlıdır.
E-Ticaret 