Overwrite Edeceğiniz Kodu Baştan Yazmayın!

Günlük hayatımızda mobil cihazların kullanımı arttıkça sayfa/web arayüzleri de kendilerini bu cihazlarda düzgün gözükecek şekilde kurgulanmaya başlandı. Bu kurgularda farklı yaklaşımlar olsa da, kullanılan en popüler yaklaşım dediğimiz sayfa elemanlarının pozisyonlarının ve genişliklerinin ekran/cihaz genişliğine göre değiştirildiği responsive design1 yaklaşımıdır.

Responsive design yaklaşımının hayat bulmasının en önemli aktörü, CSS içerisinde bir çok ekran özelliğine göre kod tanımı yapabilmemizi sağlayan Media Query tanımlarıdır. Temel anlamda, CSS içinde kodlarımızı yazdıktan sonra, çözünürlük, ekran boyu gibi değişen durumların öngörülerine göre (breakpoints2) ek düzenleme kodlarının yazılması ile responsive design kurgusu hazırlanır.

Klasik Yaklaşım

 .article-footer .share-widget {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 0;
 }

@media screen and (max-width: 767px) {
    .article-footer .share-widget {
        position: relative;
        top: auto;
        transform: none;
    }
}

Halbuki, media query içindeki kurgu tersine yapılmış olsa işler daha kolaylaşır. Kodun max-width: 767px şeklinde önce büyük ekran, sonra küçük ekran için yazılma kurgusu tersine çevrildiğinde; min-width:768px ve üzerindeki genişlikler için, orjinal elemanların sadece değişmesi gereken tanımları yazılmış olur.

Sadece İhtiyaca Göre Kod Yazımı

.article-footer .share-widget {
    padding-bottom: 0;
}

@media screen and (min-width: 768px) {
    .article-footer .share-widget {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

Yukarıdaki gibi, aynı bloğun farklı genişliklerdeki görünümü dışında, bu yönetimi bütün sistem üzerine uyguladığında yazılan kod miktarı ciddi oranda azalacaktır. Örneğin, klasik bir blog temasında genellikle bulunan ana içerik kolonu ve yardımcı içeriklerin olduğu yan kolonu ele alalım. Bu iki kolonu klasik yöntem ile yazıldığında, aşağıda gibi, önce genişlik tanımları ve birbirlerine olan pozisyonlarını tanımlanacaktır. Sonrasında da hem tablet hem de telefon genişlikleri için ek tanımlar da eklenecektir.

Klasik Yaklaşım

/* maksimum içerik genişliği */
#content {
    max-width: 1280px;
    margin: 0 auto;
}

.main-content {
    float: left;
    width: 900px;
}

.supplementary {
    float: right;
    width: 380px;
 }

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .main-content {
        width: 644px;
    }
}

@media screen and (max-width: 767px) {
    .main-content,
    .supplementary {
        float: none;
        width: 100%;
    }
}

Bu tarz iki kolonlu içerikler için klasik yaklaşımda, örnekte de görüldüğü gibi, .main-content için 3 faklı genişlik tanımı ile, aslında bir tanım 3 kez yapılmış olunuyor.

Kurgu tersten düşünüldüğünde ise, yazılan kod %50 oranında azalmakta ve her tanım sadece 1 kez yapılmaktadır.

Sadece İhtiyaca Göre Kod Yazımı

/* maksimum içerik genişliği */
#content {
    max-width: 1280px;
    margin: 0 auto;
}

@media screen and (min-width: 769px) {
    .main-content {
        float: left;
        width: calc(100% - 380px);
    }

    .supplementary {
        float: right;
        width: 380px;
    }
}

Bu örnek kodlar çok kolay bir şekilde çoğaltılabilir. Önemli olan, responsive design ile kodlama yaparken, elemanların breakpointlere2 göre nasıl değişeceğini iyi kurgulayıp, gereksiz kod yazmayı azaltır. Kurgunun önce büyük ekran sonra küçük ekran ya da tam tersi olması ve tanımların buna göre yapılmasında en önemli etken tasarımken, kodlamanın sade ve tekrarlar olmadan yapılması ise iyi bir planma sayesinde olur.

Diğer Kaynaklar

  • CSS Media Queries ve kullanım örneklerini bulabileceğiniz Mozilla Geliştiri Portalı sayfası
  • Popüler cihazlar için sık kullanılan breakpoint CSS tanımları.

  1. Genişliğe duyarlı, esnek tasarım. 

  2. Kırılım noktaları