Responsive Web Tasarım Nedir?

Duyarlı web tasarımı, mobil cihazlarda, tabletlerde ve masaüstü ekranlarında çalışan web siteleri oluşturmak için kullanılan bir tekniktir. Uzun zaman önce, web siteleri tipik olarak dizüstü bilgisayar ve masaüstü ekran çözünürlükleri için özel olarak tasarlanmıştır. Bu web uyumlu akıllı telefonlar ve tabletler gelişine kadar iyi çalıştı. Web tasarımcıları yeni zorluklara sayısız çözümle yaklaştılar, ancak net kazanan Ethan Marcotte'nin 2010 yılının Mayıs ayında Responsive Web Design ile ilgili ilk makalesi oldu.

Duyarlı web tasarımı o zamandan beri çok değişti ve hatta son iki yılda bile gelişti. Web tasarımında tamamen yeni olsanız da veya yeni olanı öğrenmeniz gerekiyorsa, bu makale mevcut olanı öğrenmenize yardımcı olacaktır.

Duyarlı web tasarımı, web sayfanızın tüm cihazlarda iyi görünmesini sağlar.

Duyarlı web tasarımı sadece HTML ve CSS kullanır.

Duyarlı web tasarımı bir program veya JavaScript ürünü değildir.

Neden responsive web tasarım yapmalıyız?

Web sayfaları farklı ekran boyutlarında bilgisayar, tabletler ve telefonlar gibi cihazlarla görüntülenir.

Tasarladığınız Web sayfanız her ekran boyutunda iyi görünmeli ve kullanımı kolay olmalıdır.

Web sayfaları sadece bilgisayar kullanıcıları için tasarlanmamalı, web sayfası her ekran boyutunda iyi görünecek şekilde yapılmalıdır.

Responsive tasarım : Herhangi bir cihazda harika görünmesini sağlamak için içeriği taşımak, büyütmek, küçültmek, gizlemek, yeniden boyutlandırmak için HTML ve CSS kullandığınızda, buna yanıt veren web tasarımı denir.

Bruce lee bir web geliştiricisi değildi bir röportajında dövüş teknikleri hakkında konuştuğu sözleri de duyarlı tasarımın özünü açıklıyor.

Zihnini boşalt, su gibi şekilsiz, Gölgesiz ol . Bir fincana su koyarsanız, fincan olur. Bir şişeye su koyarsın ve şişe olur. Onu bir çaydanlık içine koydun, çaydanlık olur. Şimdi, su akabilir veya çökebilir. Su ol dostum. – Bruce Lee

Responsive tasarımı, yapabilmek için dört ana ilkeyi bilmek gerekir :

• Akışkan Izgaraları
• Fluid grids (Sıvı Görüntüler)
• Medya sorguları
• javascript ile çözünürlüğe göre class eklemek veya kaldırmak

Fluid Grids (AKIŞKAN IZGARALARI)

“Akışkan Izgarası” terimi, sabit piksel değerlerini kullanmak yerine hepsini diğer öğelerin yüzde oranlarında kodladığınız bir düzeni açıklar. Sonuç olarak, bileşenler su gibi akışkan ve cihaza uyar.

Geleneksel düzenlerde, öğeleri sabit genişlikli ızgaralar kullanarak konumlandırırsınız. Bununla birlikte, şu anda çok çeşitli ekran boyutları ile uğraşıyoruz. Böyle bir yaklaşım, web sitelerin görüntüsü, kötü bir şekilde ortaya çıkmasına yol açacaktır. Geleneksel CSS düzeni yaklaşımının bir örneğine bir bakalım:

Sıvı Izgara yaklaşımı "yüzde oranlar" dan yararlanır, yani, her bir öğenin yüksekliğini ve genişliğini yüzde veya göreceli olarak kodlarsınız. Aşağıdaki örnekte, bileşenler "yüzde" yaklaşımı kullanılarak boyutlandırılmıştır:

Bir web sitesi lcd ekranda olduğu gibi geniş bir formatta veya akıllı telefon gibi çok küçük bir ekranda görünebilir. Bu nedenle, duyarlı web siteleri piksel gibi sabit birimler yerine yüzde gibi göreceli birimlerle oluşturulur.

Piksel olarak tasarlamak için kullanılırsanız, yüzdeleri kullanmaya geçiş yapmanıza yardımcı olabilecek basit bir matematik formülü vardır:

hedef / bağlam = sonuç

Açıklama amacıyla, siteyi 960 piksellik bir genişliğe sahip bir sarmalayıcıya sahip bir web siteniz olduğunu ve bu siteye 1920 piksel genişliğinde bir ekranda maksimum bir tarayıcı penceresinde baktığınızı varsayalım. Bu durumda, tarayıcı penceresinin genişliği bağlamdır ve sarmalayıcı hedeftir . Sitenin tam olarak aynı görünmesi için, hedefi yüzde olarak almak için içeriği hedefe bölebilirsiniz.

960px / 1920px = % 50

Şimdi, sarıcı elemanın içine yerleştirilmiş çocuk elemanları? Aynı kural tüm website sütun oluştumada geçerlidir. Başka bir örnek olarak, 960 piksel genişliğindeki sitenizin içinde iki sütun düzeninizin olduğunu varsayalım. Sol sütun, 300 piksel genişliğinde bir kenar çubuğu ve sağ sütun, 640 piksel genişliğinde ana içerik alanıdır. Ayrıca iki sütun arasında 20 piksellik bir kenar boşluğu olmasını da istiyorsunuz. İşte neye benzeyebileceğini gösteren bir resim:

Aynı formülü kullanarak, sitenin her bir bölümü aşağıdaki yüzde değerlere sahip olur:

• Sidebar: 300px / 960px = 31.25%
• Main Content: 640px / 960px = 66.66667%
• Margin: 20px / 960px = 2.08334%

Bu yüzde değerleri daha sonra bunların genişlik, kenar boşluğu ve dolgu özelliklerine uygulayarak CSS'de kullanılabilir.

Sıvı Görüntüler

Duyarlı bir web tasarımı yaklaşımında, Görüntülerin bir akışkan ızgarasının sınırları içinde küçülebilmesidir. Tüm görüntüler için maksimum genişlik tanımlamak için CSS kullanmanız gerekir, ancak minimum genişlik belirtilmemeli.

img { max-width: 100%; }

Maksimum genişlik belirterek, görüntünün görünüm kalitesini etkileyecek bir değerin ötesinde geçmesini engeleyebiliriz. Minimum genişlik tanımlamaksızın, CSS'nin boyutu herhangi bir değere küçültmesine izin vermiş olursunuz (içeriğe uymak için gereklidir).

CSS, en boy oranını korur ve bu nedenle görüntünüz gerilmeyecektir.

Medya sorguları (@media)

Medya sorguları, sitenin görüntülendiği cihazın özelliklerine, genellikle tarayıcının genişliğine göre farklı CSS stili kurallarını kullanmasına izin verir.

Medya sorguları, belirli durumlar için CSS yazmak için kullanılır; Bu, cihaz çözünürlüğüyle ilgili bilgilere dayanarak stilleri uygulamanıza olanak tanır. Genişlik, yükseklik, ekran yönü, görünüm oranı ve çözünürlük gibi özellikleri tespit etmek için ayarlanabilir. Ayrıca, çeşitli cihazlara göre düzen boyutlarını ve kurallarını değiştirmek için kullanılır.

CSS'de bazı kırılma noktaları belirtmek zorundayız.

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 320px) {}

javascript ile çözünürlüğe göre class eklemek veya silmek

Sitelerinizi mobil uyumlu hale getirmek için medya sorgularını javascript ile yapılabilir. medya sorguları için neden javascript kullanmalıyım diye soracak olursanız cevabı kısaca bazı çözünürlüğe geçerken bize sorun olacak bazı class isimlerini silmek veya eklemek gerekebilecektir.

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…