Responsive web tasarımı nedir?

Web Site Tasarımı

Responsive web tasarımı farklı ölçülere sahip olan cihazlarda web sitesinin uyumlu, duyarlı bir şekilde gösterilmesi için kullanılan CSS tekniğidir. Responsive tekniğinde kesme noktalarına göre farklı CSS stilleri tanımlanır.

Responsive Web Tasarımı Nedir

Günümüzde laptoplardan cep telefonlarına kadar çok farklı cihazlardan web sitelerine girilmektedir. Birbirlerinden çok farklı ölçülerde olan cihazlarda, web sitesinin doğru bir şekilde gösterilmesini responsive tekniği ile sağlamaktayız. Bu teknik web siteleri için artık bir standart haline gelmiştir.

Responsive tekniği siteye giren cihazın ölçülerini almakta ve bu ölçülere göre site stil yapısını değiştirmektedir. 320px genişliğindeki bir cep telefonunda farklı, 1920px genişliğindeki masaüstü ekranda farklı stil komutlarını kullanarak bunu yapmaktadır.

Responsive web tasarımının avantajları nedir?

Bir altyapıda birden çok görünüm

Duyarlı tasarım ile mobil ve masaüstü cihazlar için tek bir sistem yeterli olmaktadır. Bu hem tasarım hem de yönetim maliyetlerini düşürmektedir. Yeni bir içerik eklediğinizde her iki görünüm içinde geçerli olacaktır.

Kullanıcı deneyimi

Hemen hemen bütün tasarım detaylarının kontrol edilebilir olması, sitenize giren kullanıcının çok küçük resimler veya okunamayan yazılarla karşılaşmasının önüne geçecektir. Kolay kullanılan, kolay okunan bir web sitesiyle karşılaşacaktır.

Seo

Tek bir altyapının kullanılması tekrar eden sayfaların, içeriklerin varolmasını, yani tekrarlayan içerik riskini ortadan kaldırır. Sayfalarınızın tek bir adreslemesinin olması indekslenme olasılığını yükseltir. Hem mobil hem de masaüstü botlar tarafından taranabilir.

Responsive kodlama

Esas olarak bir CSS tekniği olan Responsive kesme noktalarını kullanır. Kesme noktaları web sitesine giren cihazın ölçülerine göre farklı CSS komutları uygulanabilmesini sağlar. Örneğin genişliği 1100px’in altında olan bir cihaz giriş yaptığında buna özel stiller atanır. Böylelikle farklı cihaz ölçülerine göre farklı stil komutları kullanılır.

Kesme Noktası

Css’de kesme noktaları @media tanımı ile yapılır. İkinci tanım alanı (örneğimizde Screen) kuralın nerede uygulanacağını belirtir. Burada “Screen” cihazın ölçülerine göre uygulanacağını söyler. Üçüncü alanımız ise (örneğimizde max-width: 1100px) kuralı tanımlar. Buna göre siteye giren cihazın genişliği 1100px’in altındaysa içindeki komutlar uygulanır.

.deneme {width: 50%}

@media screen and (max-width: 1100px) {
  .deneme {width: 100%}
}

Bu örneğimizde “deneme” isimli öge 1100px’in üstü cihazlarda 50% genişliğe sahiptir. 1100px’in altındaki cihazlarda ise kesme noktası devreye girer ve 100% genişliğe sahip olur.

Viewport tanımı

Temelde tarayıcı ölçüleri ile cihaz ölçüleri farklıdır. Responsive tekniğinden önce web siteleri Viewport ile mobil cihazlarda küçültülerek, sığdırılarak gösteriliyordu. Tabi ki bu okunamayan yazılar, çok küçük resimlerle sonuçlandı. Responsive tekniğinde ise bu sığdırma özeliğine gerek kalmadı, aksine etkisiz hale getirilmesi zorunluluk oldu. Aşağıdaki kod ile Viewport devre dışı bırakıldı.

<meta name="viewport" content="width=device-width, initial-scale=1">

Responsive tasarımda yazılar

Responsive web tasarımında yazıların büyüklüğü okunabilirlik açısından elden geçirilmelidir. Bütün sitede aynı yazı büyüklüğünü tanımlamak okunabilirlik sorunlarına yol açacaktır. 320px genişliğindeki cihazda 14px bir yazı normal iken, 1920px genişliğindeki cihazda küçük olacaktır.

Bunu düzeltmenin yolu Css kesmeleri ile Rem birimini kullanmaktır. Rem “Root Em”nin kısaltmasıdır. Root burada html tagının aldığı font-size değeridir. Kullanılan rem birimleri html tagındaki ölçüyle orantılı olarak hesaplanır.

body {
    font-size: 1.5rem;

}
html {
    font-size: 0.7vw;
}
@media screen and (max-width: 1100px) {
  html {
    font-size: 1.6vw;
  }
}

Root’un font-size değerleri cihaz genişliğine göre değişmekte, Body etiketi için kullanılan rem birimi buna göre tanımlanmaktadır.

Responsive tasarımda resimler

Responsive tekniğinde resimler için iki kullanım yolu bulunmaktadır; kırpma ve ölçeklendirme. Kullanım yerine ve tasarıma göre iki yöntemden biri tercih edilmektedir. Genellikle full ekran görünümdeki resimler kırpılmakta, diğerleri ölçeklendirilmektedir.

Resimleri Kırpma

Bu kullanımda cihazın genişliğine göre görselin genişliği kırpılmaktadır.

Resmin tamamı görünmüyor?

Müşterilerimizden sıkça aldığımız sorulardan biri resmin tamamının görünmemesidir. Yüksekliği sabit olan veya full ekran olan alanlarda resim, girilen cihazın ölçülerine göre otomatik olarak kırpılacaktır.

Aşağıda (solda) göreceğiniz gibi resim, siteye giren cihazın ebatlarına göre sağ ve soldan kırpılmaktadır. Dar bir cihazda sağ ve solda görünmeyen alanlar kalmaktadır. Bu, resmin doğru gösterilmesi için bir zorunluluktur. Kırpılmaması durumunda (aşağıda sağdaki gibi) resim doğru gösterilmeyecek, profesyonel olmayan, bozuk bir görüntü ortaya çıkacaktır.

Responsive tekniğinde resimler
Responsive tekniğinde resimler

Resimleri Ölçeklendirme

Genellikle full ekran olmayan resimlerde kullanılan yöntemdir. Buna göre resim kullanıcının cihazının genişliğine göre ölçeklendirilmektedir.

Aşağıdaki videomuzda her iki kullanımın örneklerini bulabilirsiniz.

Yazar; Orhan Bilikvar Oluşturulma; | Güncelleme; 17 Oca 2023