Tasarım Nedir?
Tasarım Nedir ? sorusuna yeterli ve tatmin edici bir cevap bulursak responsive tasarım kavramını daha iyi anlayabiliriz.
Tasarım genel olarak konuşursak, nesnelerin, etkileşimli sistemlerin, binaların, araçların, vb. Yaratılmasını öngörme ve planlama sürecidir. Kullanıcı merkezlidir, yani kullanıcılar, tasarım düşünme yaklaşımının merkezindedir. Bu bir ihtiyaca ya da soruna yönelik olarak insanlara, fiziksel eşyalara ya da daha soyut sistemlere çözümler üretmekle ilgilidir.
Çok geniş bir kavramdır ve anlamı bir alandan diğerine büyük ölçüde değişebilir. Ürün tasarımımız , ses, sanal gerçeklik, etkileşim, araba tasarlama , video oyunları, yazılım arayüzleri, ev ve ofislerin iç mekanları gibi pek çok farklı alt alana yayılmış ve hayatımızın birçok yönüne yayılmıştır .
Responsive Tasarım Nedir?
Duyarlı web tasarımı, herhangi bir cihazda çalışmasına izin veren bir web sitesini oluşturmak için bir yaklaşımdır; Cep telefonu, tablet, TV veya dizüstü bilgisayar gibi.
Kişiler internete cep telefonlarından erişebildiklerinden beri, web sitesi sahipleri, kullanıcıların web sitelerini her cihazda daha iyi gezmelerine yardımcı olmak için yollar yaratmaktadır.
Özellikle mobil cihazlar için bir web sitesi tasarlayan şirketlerin yüzde 62’sinin satışları arttırdığını biliyor muydunuz?
Duyarlı bir web sitesine yalnızca sahip olmakla kalmıyor, mobil kullanıcıların web sitenizi yönlendirmelerine yardımcı oluyor; Aynı zamanda katılım ve dönüşümleri arttırıyor.
Duyarlı web tasarımı, kullanıcıların cihazlarına göre öğeleri taşımak, küçültmek, büyütmek, gizlemek ve göstermek için HTML, CSS ve bazen Javascript kullanılır.
Web sitenizi duyarlı hale getirmek için 3 ana parça bulunmaktadır:
- Düzenli Akışlar
- Responsive Görüntüler
- Medya sorguları
Duyarlı Bir Web Tasarımına İhtiyacımız Var mı?
Kısa cevap, evet. Bugün gün ve yaşında çoğu insan bir iş veya hizmet ararken cep telefonuna döner.
Tyton Media(ABD dijital medya şirketi) tarafından yapılan son bir araştırmaya göre , insanların yüzde 94’ü web tasarımına güvenilmemeleri veya reddetmelerinin nedeni olarak web tasarımını gösterdi. Herhangi bir cihazda çalışan bir web sitesine sahip olmak, ziyaretçilerin daha uzun kalma ve daha fazla ilgi çekici olma şansını artıracaktır. Bu, Google’da daha iyi sıralamalara ve işletmeniz için daha fazla satışa yol açar!
Responsive Web Tasarımı Nasıl Çalışır?
Web sitenizi responsive tasarım yapmak basit bir işlem değildir. Gelişmiş HTML ve CSS becerileri gerektirir, bu nedenle bu dillere aşina değilseniz, profesyonel bir web tasarımcısından yardım almanızı öneririz.
Bir web sitesini responsive hale getirmek için, aşağıdaki teknikler bir arada kullanılması gerekir:
Düzenli Akışlar
Bir web sitesini duyarlı hale getirmenin ilk adımı, sabit genişliklerden akışkan genişliklerine geçmek. Bu, web sayfasının yüzdesine göre tarayıcı ile genişlemesini ve daralmasını sağlar.
Örneğin, eski web sitenizin genişliği 1024 piksel ise, tarayıcının genişliği ne olursa olsun, web sayfasının tamamında yayılacak şekilde yüzde 100 olacaktır.
İşte sabit genişliklerden akışkan genişliklerine dönüşümün bir örneği. Gördüğünüz gibi, tüm genişlikleri web sayfasının ölçeklenmesini sağlayan yüzdelere dönüştürüyoruz.
Responsive Görüntüler
Duyarlı web tasarımının ikinci parçası duyarlı görüntülerdir. Resimlerinizin responsive boyutlarda olması çok önemli bir adımdır çünkü hem web sitenizin hızını hem de arama motorunun kolaylığını etkileyebilir.
Duyarlı Görüntüler, web sayfasına sığacak şekilde kullanıcının tarayıcısıyla büyür ve küçülür. Çok büyük bir resim kullanıyorsanız (dosya boyutu ve piksel cinsinden), o zaman 3G’ye bağlı veya yavaş olan bir cihaza yüklemek uzun zaman alır.
Uyarlanabilir Resimler
Resimlerinizi duyarlı hale getirmenin en popüler yolu, uyarlanabilir resimler kullanmaktır. Uyarlanabilir Resimler, yüzde 100 ayar yapar (aynı düzenli akışlarda olduğu gibi), ana kabına uyum sağlamasına izin verir.
Bu en popüler yöntem olmasına rağmen, %100 çalışır bir kanıt değildir. Uyarlanabilir görüntülerle ilgili sorun, yalnızca tek bir görüntü göstermeniz ve tarayıcı genişliğine göre yeniden boyutlandırmanızdır.
Daha önce belirttiğimiz gibi, eğer resimleriniz çok büyükse, bu site hızıyla ilgili bazı sorunlara neden olabilir.
HISRC
Bu yöntem, kullanıcının bağlantısına bağlı olarak farklı boyutlu görüntüleri göstermek için Javascript kullanır. Kullanıcı yavaş bir bağlantı kullanıyorsa, HISRC daha hızlı yüklenecek daha düşük çözünürlüklü bir fotoğraf gösterecektir.
Medya Sorguları
Düzenli Akışlar ve duyarlı görüntülerin yanı sıra, duyarlı bir web sitesine sahip olmak için medya sorguları gerekir. Medya sorguları, daha iyi bir kullanıcı deneyimi sağlamak için içeriği gizlemek, büyütmek, taşımak veya göstermek için cihaza özel kurallar eklemenizi sağlar.
CSS kullanmak, Medya Sorgularının her cihaz için farklı kullanıcı arayüzleri oluşturmasını sağlar.
Örneğin, web sitenizde bir düğmeniz olduğunu ancak ziyaretçinin bir mobil cihazda görüntülerken gizlemek istediğinizi varsayalım. Küçük bir kod parçası ile bunu yapabilirsiniz:
Akıllı Telefonlar için (yatay ve dikey):
@media only screen and(min-device-width : 320px) and (max-device-width : 480px)
/* Stil Kodları */
{
.button {display:none}
}
Duyarlı bir web sitesine sahip olmak artık bir zorunluluk haline gelmiştir. Daha fazla ziyaretçi mobil cihazlardan web sitelerine göz attığından, web sitenizin iyi görünmesi ve duyarlı olması önemlidir. Web sitenizi duyarlı hale getirmek, bazı küçük işletmeler için büyük bir görev olabilir, ancak bu adımları dikkatli bir şekilde izlerseniz, herhangi bir cihazda kolayca çalışan bir web siteniz olabilir.
Yorum Yazın
Görüşleriniz bizim için çok önemlidir. Makalemiz ile ilgili görüşlerinizi yorum yazarak bizlere iletebilirsiniz. Dönüş yapacağımızdan emin olabilirsiniz.