e
sv

Responsive Tasarım Nedir ?

responsive tasarim nedir
avatar

Yazılım Method

  • e 2

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Reponsive kelimesi, günümüzde web tasarım alanında sıklıkla araştırılmaktadır. Responsive tasarım, duyarlı ve uyumlu web tasarım işlemlerini ifade edebilmek için kullanılmaktadır. Bu tasarım işlemleri, ilk olarak 2010 yılında ortaya çıkmış ve kısa bir zaman içerisinde dünya genelinde popüler bir hal almıştır.

Responsive tasarım, web sitesinin mobil ve tablet gibi cihazlardan görüntülendiğinde yazı, resim ve element bakımından ekran genişliğine uygun olarak yeniden şekillenmesi ve ekrana tam olarak oturması anlamanı da gelmektedir. Bu sayede kişiler, web sitelerinde daha olumlu bir kullanıcı deneyimi yaşayabilmektedir. Ayrıca gerçekleştirilen tasarımlar, genellikle tablet, bilgisayar ve mobil olmak üzere üç farklı versiyonda yayınlanmaktadır.

responsive tasarım nedir
responsive tasarım nedir

Mobil Cihazlarda Responsive Tasarım

Web sitelerine mobil cihazlarından giriş yapmakta olan kişiler, çoğu zaman yazıları okumakta veya resimleri görmekte güçlük çekmektedirler. Fakat giriş yaptıkları site, responsive tasarıma uygunsa hiçbir sorun yaşamadan yazıları ve resimleri kolayca görüntüleyebilmektedirler. Ayrıca tasarım işlemlerine uygun olmayan siteler, mobil kullanıcıların sürekli zoom yapmak zorunda kalmalarına veya kısıtlı alanda yazı okumaya çalışmalarına neden olmaktadır. Mobil cihazlardaki responsive tasarım, site menülerini ve kategorilerini gezebilmeyi de oldukça kolaylaştırmaktadır. Kişiler, telefonlarından tek bir tuşa basarak sitede aramak istedikleri tüm kategorilere ulaşabilmektedirler. Responsive tasarım özelliklerine sahip sitedeki menüler, genellikle üstten açılacak şekilde ayarlanmaktadır. Bu sayede menülerin kullanımı oldukça kolay hale gelebilmektedir.

responsive mobil tasarım
responsive mobil tasarım

Responsive Mimari Neden Önemlidir?

Responsive tasarıma sahip olan siteler,başta arama motorları olmak üzere birçok kişi için kullanıcı dostu olarak nitelendirilmektedir. Çünkü tasarım işlemleri, her cihaz için ayrı ayrı gerçekleştirilmekte ve kişilerin elementleri daha uygun görebilmeleri sağlanmaktadır. Bu nedenle kullanıcılar, responsive tasarıma sahip olan sitelerinizde daha fazla vakit geçirecekler ve Google’da sizi ödüllendirecektir.

Günümüzde mobil cihazlar üzerinden web sitelerinin ziyareti %25 oranlarına kadar çıkmıştır. Ayrıca her geçen gün bu oran sürekli artmaktadır. Bu nedenle yeni nesil sitelerin responsive tasarıma oldukça dikkat etmeleri gerekmektedir. Bu sayede Google’da yüksek sıralara kolayca ulaşabilmektedirler. Siz de yeni responsive tasarım detaylarını inceleyerek kullanıcılarınıza daha kaliteli bir hizmet sunabilirsiniz.

html css responsive yapma
html css responsive yapma

Responsive Uyumluluğu Nasıl Test Edilir?

Responsive uyumluluğu, günümüzde birçok farklı şekilde test edilebilmektedir. En garanti olan test yöntemlerinden biri, manuel olarak test edilmesidir. Yani mobil ve tablet gibi cihazlarınız yardımıyla siteye girdiğinizde verimli bir yazı ve görsel deneyimini yaşıyorsanız responsive tasarıma uygun demektir. Fakat yazı ve resim boyutları cihaza göre yeniden düzenlenmiyorsa responsive uyumluluğu yoktur.

Günümüzde responsive uyumluluk testi yapabilmek için birçok platform bulunmaktadır. Bu platformlar, Google sistemleri ile birebir uygun oldukları için sitenizi anında tarayarak responsive uyumluluğa sahip olup olmadığını belirlemektedirler. Bu nedenle manul olarak yaptığınız test işlemlerinin yanı sıra responsive platformlarına giriş yaparak da sitenizi test edebilirsiniz. Fakat bu sitelerin bazılarının ücrete tabi olabileceğini de belirtmekte fayda var.

responsive tasarım nedir
responsive tasarım nedir

Responsive Tasarım Cihaza Göre Tepki Verir

Responsive tasarımlar, her cihaz için aynı koşulları oluşturmak yerine farklı cihazlar için kişisel çözümler üretmektedir. Bu nedenle responsive tasarım için mobil, tablet ve bilgisayar gibi cihazlarda farklı şekiller oluşturduğu söylenebilmektedir.

Bu durum, sadece sitede bulunan yazılar için değil resim ve video gibi diğer elementler için de aynı şekilde geçerlidir. Responsive tasarıma sahip bir site, yazıları cihaza uyumlu hale getirirken üzerinde bulunan resimleri veya videoları da aynı şekilde kullanıcı dostu haline getirmektedir. Ayrıca responsive tasarım, menülerin de her cihazda farklı bir tepki oluşturmalarına zemin hazırlamaktadır. Siz de en kaliteli kullanıcı deneyimini hedefliyorsanız web sitelerinizde mutlaka responsive tasarımlar uygulayın.

HTML CSS Nasıl Yapılır ?

HTML ve CSS ile kodlanmış web siteler rahatlıkla responsive tasarım yapılabilirler . Eğer isterseniz pure css, veya framwork kullanabilirsiniz. Ben makalemde her ikisinidende bahsedeceğim. İşin html tarafına geldiğimizde ise daha basit çünkü tek satırlık kodu bulunmakta 😉 Bu tek satırlık kodu tarayıcı okuyarak responsive yapıya zamin hazırlar. Bu kod meta kodudur . Meta kodlarını genelde head kısımda tarayıcılar seo amaçlıda okumaktadır.

Bu meta kodu ile kullanıcılara responsive tasarımımız gösterebilir , ekranda gezinirken zoom yapma veya yaptırmama gibi ayarları verebiliriz.

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

CSS Responsive Nasıl Yapılır ?

Pure CSS için ise özel @media query olarak adlandırdığımız gereksinimler var. 2 farklı amaç ile kullanılmaktadır bunlar : sayfanın yazıcıya gideceği zaman , responsive yapıya geçeceği zaman devreye girmesini sağlar. Responsive yapıyı ele alacak olursak : genel anlamda yazılımcılar stabil olarak bilgisayar-tablet-telefon cihazlarını el alır.

Bu cihazlar için ise genel kullanım kodları bulunmaktadır. Yani bir ölçüm parametresi gireriz eğer cihaz bu parametrelere geldiğinde yazmış olduğumuz css kodları devreye girer. Aşağıda Örnek kodları bıraktım .

@media only screen and (min-width:1200px){ /* XL */
       div{
                       font-size:40px;
       }
}

@media only screen and (min-width:992px) and (max-width:1199px){ /* L */
       div{
                       font-size:35px;
       }
}

@media only screen and (min-width:768px) and (max-width:991px){ /* M  Tabletler-2  */
       div{
                       font-size:30px;
       }
}

@media only screen and (min-width:576px) and (max-width:767px){ /* S Tabletler-1 */
       div{
                       font-size:25px;
       }
}

@media only screen and (max-width:575px){ /* XS  Mobil Chazlar*/

       div{
                       
        font-size:20px;
       }
}

Bı kodlar belirli bir cihaz aralığında verilmiştir. Kısacası eğer cihaz bu genişlikteki ağırlıklara gelirse buradaki css kodları çalışsın demek oluyor 🙂

Bootstrap ile Responsive Nasıl Yapılır ?

Bootstrap dünyaca popüler bir html,css kütüphanesidir. Temel olarak ızagara yapısı kullanılmış tamamen responsive yapıyı hedefleyen bir kütüphanedir. Kendi içerisinde responsive classları bulunmaktadır bu classlar:

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Responsive maks genişlik None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# maks değer 12
Aralardaki Genişlik 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

daha fazla classlara buradan detaylı olarak erişebilme imakanınız bulunmaktadır.

Sıradaki içerik:

Responsive Tasarım Nedir ?