Responsive Web Site Tasarımı
Responsive bir web sitesi, ziyaretçinin web sitesini görüntülemek için kullandığı bilgi işlem cihazının türüne ve teknolojisine dayanarak yanıt vermek veya uyarlamak üzere tasarlanmış bir web sitesidir. Responsive tasarım, siteye gelen ziyaretçilerin, siteyi görüntülemek için kullanılan cihaz cihazının boyutundan bağımsız olarak benzer bir deneyime sahip olmasını sağlar.
Responsive Web Sitesi Tasarımı
Responsive web sitesi tasarımı, site tasarımcılarının bir kez yaratmalarını ve aynı içeriği her yerde, tüm aygıtlar için yayınlamalarını sağlar. Farklı platformlarda çeşitli cihazlar ve web tarayıcılarında web sayfalarını etkin, optimize edilmiş ve okunması kolay bir biçimde sunmanın bir web sitesi geliştirme felsefesidir.
Web sayfalarını yalnızca masaüstü ya da dizüstü bilgisayarlarda izlemek için tasarlanan geleneksel yaklaşım yerine, Responsive tasarım, kullanıcılara akıllı telefonlar ve tabletler gibi geleneksel bilgisayarlarda en iyi görünümü sunmak için çeşitli yeni web geliştirme özellikleri ve işlevselliklerinden yararlanmaktadır.
Küçük boyutları nedeniyle, mobil cihazlar genellikle, kullanıcıların web sitesinde daha verimli gezinmesine yardımcı olmak için içerik için değiştirilmiş bir düzen gerektirir ve web geliştiricileri, Responsive tasarımıyla web sayfalarını, okunabilir içeriği çeşitli şekillerde sunma esnekliği ile kodlayabilir. Bunun nedeni, görüş alanının genişliği gibi faktörlere dayalı olarak, sürekli olarak ve akışkan olarak değişebilen web sitelerine kısmen bağlı olmasıdır.
Responsive Tasarımın Üç Ana Bileşeni
Responsive web sitesi tasarımı aşağıdaki üç ana bileşenden oluşur:
Esnek düzenler - Her genişliğe dinamik olarak yeniden boyutlandırılacak web sitesi düzenini oluşturmak için esnek bir ızgara kullanma.
Medya sorguları – Stiller için bir medya türlerine göre hedefleme yapmayı sağlar. Medya sorguları, tasarımcıların tarayıcı ve cihaz koşulları için farklı stiller belirlemelerine olanak tanır.
Esnek medya - Görünüm alanının boyutu değiştikçe medyanın boyutunu değiştirerek ortamları (görüntüleri, video ve diğer formatları) ölçeklenebilir hale getirir.
Responsive Web Tasarımı ve Geleneksel Web Tasarımı
Responsive olmayan web tasarım sayfalarına bir örnek, masaüstü tarayıcılarında iyi bir şekilde okunan ancak küçük akıllı telefonlarda, okunamayan metinlere sahip olanlardır. Çoğunlukla çok fazla sütun veya görüntü akıllı telefonun sınırlı görüş alanı ekran genişliğine sığmayacak kadar büyük olması nedeniyle kullanıcıyı rahatsız eder.
Buna karşın, Responsive tasarımlı web geliştiricilerinin belirli ekran boyutlarına odaklanması gerekmez; Bunun yerine Responsive web kodları, bir dizi görüntü boyutuna uyum sağlayacak şekilde tasarlanır ve mobil cihazın veya bilgisayarın ekran boyutu ve özelliklerine dayalı farklı düzenler sunar.
Responsive web sitesi tasarımı
Responsive Tasarımı Web Geliştirme Nasıl Biraraya Getirilir
Responsive web siteleri oluşturmak için çeşitli tepki veren tasarım teknikleri kullanılabilir, ancak çoğu web geliştiricisi, görüntüleme bölgesi etiketi ve CSS medya sorgularına dayalı olarak büyük ve küçük genişlikli kesme noktalarını ayarlar ve daha sonra, ekrana dayalı optimize edilmiş içerik düzeni ve metin sunmak için kodlar.
Örneğin bu css kodaralığı ile maximum 900px genişiliğinde ekranlarda çalışan stil kuralları getirir. Eğer bir ekran 901 pixel ise doğal olarak borwser bu kod aralığındaki sitilleri kodlamaz.
@media screen and (max-width:900px) {
}
Responsive web tasarımının bir diğer anahtarı, genişlik gibi sabit özelliklerin aksine olabildiğince göreceli değerleri kullanmaktadır. Bu, içeriğin o anda web sayfasının okuyucusu tarafından kullanılan aygıta ve platforma göre boyutlandırılmasını sağlar.
Kaynak: webopedia
Görüntü kaynağı: Mashable.com