Responsive Tasarım Nedir? Responsive Tasarım Nasıl Yapılır?

Herkese merhabalar. Bugün sizlere siteniz için oldukça önemli bir konu olan Responsive Tasarımı anlatacağım. Bu konunun ne kadar önemli olduğunu bu yazıyı okuduğunuzda anlayacaksınız.

Bu yazıda yer alan konular:

Responsive Tasarım Nedir?

Responsive Tasarımın Önemi

Nasıl Responsive Tasarım Yapılır?

Responsive Tasarım Nedir? Responsive Tasarım Nasıl Yapılır?

Responsive Tasarım Nedir?

Responsive tasarım, genel olarak web tasarım için kullanılan ve web sayfalarının her tür ekran genişliğine duyarlı olması için yapılan çalışmaya denir. Responsive Tasarım (Duyarlı Tasarım) 2010 senesinde çıktı. Ve bu tasarım çeşidinin web sayfalarına harika bir rahatlık getirmesi onu oldukça popüler yaptı.

Responsive tasarım sayesinde web sayfalarında bulunan görselleri, yazıları, başlıkları, menüleri yani hemen hemen her şeyi birçok ekran genişliğine uyumlu hale getirebilirsiniz.

Örneğin, bazı web sitelerinde görmüşsünüzdür. Masaüstü ile girince her şey normal gözükürken, mobil telefonlarla girdiğimizde sayfanın bir kısmının taşmış olduğunu görürüz. Örneğin altta ki gibi bir görünüm ortaya çıkar.

Responsive Olmayan Bir Sayfanın Görünümü

Ama Responsive Tasarım yapmış bir web sitesinde bunun gibi taşmalar gözükmez veya çok nadir gözükür. Örnek olarak bu siteye mobil telefonunuzdan bakabilir veya tarayıcı sekmesinin boyutunu değiştirebilirsiniz. :)

Responsive Tasarımın Önemi

Birçok kişi alışverişini, eğitimini vesayre telefondan bile yapabilmektedir. Birçok insan mobil cihazlar kullanarak gündelik işlerini halledebiliyor. Bu işlerden bazılarında ise internette bir konu araştırıyor olabilirler. Ya araştırma yaparken sizin sitenize girdiyse. O zaman mobil kullanıcılara da hitap etmeniz gerekir.

Artık günümüzde web sitelerine olan ziyarelerin büyük çoğunluğunu mobil cihazlar oluşturuyor. O zaman sitemizin aynı zamanda mobil kullanıcıları da düşünerek yapılması oldukça önemlidir. Bu sayede insanlar sitenize mobil cihazlardan giriş yaptığında rahatça kullanabilirler.

Örneğin benim aldığım ziyaret sayısının yaklaşık %60'ı mobil cihazlardan oluşuyor.

Ayrıca Google artık mobil kullanıcılara oldukça önem veriyor. Sitenizin mobil uyumlu olması sıralamada oldukça etki gösteriyor. Hem de responsive tasarımlar sayesinde sitede rahatlıkla gezinti olacağından yine site içi trafiğiniz artıyor. Böylece sitenizdeki her bir sayfa değerlenebiliyor.

İşte bu ve bunun gibi birçok sebepten dolayı artık birçok kişi sitesini responsive haline getiriyor. Bu nedenle responsive tasarım birkaç senede bu kadar popüler bir hale geldi.

Responsive Tasarım Nasıl Yapılır?

Evet, responsive tasarımın ne olduğunu ve neden önemli olduğunu anladığımıza göre sıra geldi en önemli konuya. Nasıl responsive tasarım yapılır?

Responsive tasarım yapmanın birçok yolu ve alternatifi vardır. Veya sizin yapmanıza gerek yoktur. Çünkü responsive bir tema alınabilir.

Bu yollardan birisi kendinizin siteyi responsive olarak tasarlaması, kodlamasıdır. Bunun için HTML ve CSS dillerini iyi bilmek gerekir. Örneğin size bir kod örneği göstereyim.

CSS:

body {
    margin: 0;
    padding: 0;
    background-color: #fbf9fa;
}

h1 {
    font-size: 30px;
    color: black;
}

@media (max-width: 600px){
    h1 {
        font-size: 20px;
        color: red;
    }
}

Evet, burada yaptığımız şey şu: Şimdi temel olarak bir HTML dosyasında ki h1 etiketinden gidelim. Sonra CSS dosyasında h1 başlığının büyüklüğünü 30 piksel yaptık ve rengini siyah olarak belirledik.

Sonra @media kullanarak daha sonrasına "max-widh: 600px" dedik. Yani 600 pikselden küçükse bunun içindekiler çalışacak. Sonra içine h1 başlığının kodlarını yazdık. Bu sefer büyüklüğü 20 piksel, rengi ise kırmızı yapsın istedik.

Responsive tasarım bu mantıkta işler. Yukarıdaki kodları alıp deneyebilirsiniz.

Not: Bunu deneyecekseniz önce HTML iskeleti oluşturup içine h1 tagı koymanız gerekli. Sonra CSS dosyası çağrılmalı.

İkinci bir yöntem ise Bootstrap kütüphanesini kullanmak. Bootstrap kütüphanesinden kısaca bahsedecek olursak, sitenizin temel ihtiyaçlarını gideren bir HTML ve CSS kütüphanesidir. Hazır classları bulunuyor ve bu sayede siteniz hem responsive tasarıma sahip oluyor hem de kodları hızlıca yazıyorsunuz.

Bootstrap ile ilgili yazılarım yakında gelecektir.


Evet, sizlere responsive tasarımın ne olduğunu, önemini ve nasıl yapıldığını bir kod örneği ile anlatmaya çalıştım. Umarım faydalı olmuştur. Diğer yazılarda görüşmek üzere :)

Önerilen yazı:

Web Tasarımı ve Kodlaması Yaparken Kullanılan Editörler

Responsive Tasarım Nedir? Responsive Tasarım Nasıl Yapılır? | RaBlogin

Raşidin Buğda

Raşidin Buğda

2016-2017 yılından beri web tasarım ve kodlama üzerine çalışıyorum. RaBlogin benim ilk projem ve bu sitede blog yazarak kendimi keşfetmeye ve insanlara yardımcı olmaya çalışıyorum :)

Yorum Yap

Lütfen tüm alanları eksiksiz (Websiteniz yoksa orasını boş bırakın) ve doğru doldurun.

Yorumlar

Bu yazıya yorum yapılmamış. İlk yapan sen olabilirsin.