Responsive web tasarımı, web sitelerinin farklı cihazlarda ve ekran boyutlarında uyumlu bir şekilde görüntülenmesini sağlayan bir tasarım yaklaşımıdır. Günümüzde, kullanıcılar bilgisayarlar, tabletler ve akıllı telefonlar gibi çeşitli cihazlarda internete erişebilmektedirler. Bu nedenle, bir web sitesinin farklı ekran boyutlarına ve cihazlara uyumlu olması, kullanıcı deneyimini artırmak ve erişilebilirliği sağlamak için son derece önemlidir.
Responsive web sitesi hazırlarken dikkat edilmesi gereken noktalar başlıca şöyledir;
Meta Viewport Ayarlama: Meta viewport, bir web sayfasının mobil cihazlarda nasıl görüneceğini kontrol etmek için kullanılan bir HTML meta etiketidir. width=device-width ifadesi, sayfanın cihazın ekran genişliğine uygun olarak genişleyeceğini belirtir. initial-scale=1.0 ise sayfanın başlangıç yakınlaştırma ölçeğini belirler. Bu etiket, mobil cihazlarda daha iyi görüntüleme ve kullanılabilirlik sağlar.
HTML sayfanızın <head> bölümüne aşağıdaki meta etiketini ekleyerek, mobil cihazlarda doğru viewport ayarını sağlayabilirsiniz:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Yukarıdaki örnekte ekran genişliği 800px altında olan cihazlarda body öğemizin arka plan rengini siyah olarak ayarladık.
Responsive web tasarımı yaparken zorlanılan yerlerden biriside display kullanımıdır. CSS'de display özelliğinin kullanımına buradan ulaşabilirsiniz.
div.box {
display:inline-block;
}
@media screen and (max-width: 800px) {
div.box {
display:block;
}
}Yukarıdaki örnekte 800px üzerindeki genişlikteki ekranlarda div.box öğemiz yan yana sıralanırken 800px altındaki genişliklerde alt alta sıralanacaktır.
CSS Medya Sorguları (CSS Media Queries): CSS medya sorguları, hazırlayacağımız web sayfasındaki öğlerin farklı ekran genişliklerinde nasıl görünmesi gerektiğini belirlemekte kullanılır. Örneğin, belirli bir ekran genişliği altında farklı bir düzen veya stiller uygulayabilirsiniz.
@media screen and (max-width: 800px) {
body {
background-color: black;
}
}Yukarıdaki örnekte ekran genişliği 800px altında olan cihazlarda body öğemizin arka plan rengini siyah olarak ayarladık.
Yüzdelik Ölçü Birimi: Yüzdelik boyutlar, responsive web tasarımında sıkça kullanılan bir tekniktir. Özellikle, elemanların genişliklerini veya yüksekliklerini belirlerken kullanılırlar. Bir elemanın genişliğini yüzdelik bir değerle belirlediğinizde, o elemanın genişliği, içinde bulunduğu konteynırın genişliğine göre orantılı olarak değişir. Bu, ekran boyutları değiştikçe elemanın boyutunun otomatik olarak ayarlanmasını sağlar.
div.box {
width: 85%;
}Yukarıdaki örnekte box clasına sahip div'imizin genişliğini eğer bir kapsayıcı içinde ise onun değil ise body elementimizin %85'ini kapsayacak şekilde ayarlamış olduk.
HTML ve CSS'de responsive web tasarımı