Responsive Tasarım Nedir?

Responsive Tasarım Nedir sorusuna cevap vermekl için önce tasarımın ne demek oldugunu anlamak gerekir. Tasarım, “bir şeyin biçimini kafada oluşturma işi ve bu yolla düşünülmüş biçim‘ine” verilen addır.

Responsive Tasarım Nedir? Responsive Destekleyen Cihazlar

Responsiv tasarım ise, “bir web sitesinin sıvı misali masaüstü, telefon tablet ve diğer cihazlara uyum saglaması, bir nevi bulundugu platformun su gibi şeklini almasıdır”. Bu nedenle responsive tasarımlar tercih edilir ve kullanıcılara en iyi en sağlıklı site görüntüsü verilerek kullanıcıların rahatlıkla sitelerde dolaşmasını ve gezinmesini sağlamaktadır.

Responsive Tasarım Neden Önemlidir?

Responsive tasarımlardan önce sitelerin yaklaşık tamamına yakını masaüstü sitesi gibi açılıyor ve kullanıcılar bundan dolayı mobilden girdikleri takdirde çok zorluk çekiyorlardır.Bu zorlukların en başında site yazı fontlarının  ve resim video medyalarının insanalr tarafından zorlukla görülmesiydi. Bu nedenden dolayı önce mobil siteler çıkmış ve daha ilerleyen zamanlarda da responsive tasarımlar çıkmıştır. Google’da bunu teşvik etmek amacıyla responsive kullanıcı dostu siteleri daha belirgin ve seoya uygun oldukları için teşvik etmiştir ve zorunlu hale getirmiştir.

Responsive Web Sitesi Nasıl Yapılır?

Çözünürlükler için kodlar
@media only screen and (max-width: 960px) { .cetinkayaajans{display:none;} }
@media only screen and (max-width: 960px) { .cetinkayaajans{background:#fff;color:#000;width:100%;} }
@media only screen and (max-width: 960px) { }
@media only screen and (min-width: 801px) and (max-width: 959px) { }
@media only screen and (max-width: 800px) { }
@media only screen and (min-width: 480px) and (max-width: 759px) {}
@media only screen and (max-width: 479px) { }
Son olarak,
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″&gt

Bir başka örnek olarak vermek gerekirse;

HTML KODLARI

<body>

<div id=”wrapper”>

<h1> Responsive test For Çetinkaya Ajans </h1>

</div>

</body>

CSS BÖLÜMÜ

@media screen and (min-width:0px){

#wrapper{width:500px; height:150px; margin:auto; background:#00F; color:#fff; font-size:14px; text-align:center; }
}

@media screen and (min-width:1000px){

#wrapper{width:960px; height:400px; margin:auto; background:#00F; color:#fff; font-size:18px; }
}

@media screen and (min-width:1300px){

#wrapper{width:1100px; height:400px; margin:auto; background:#00F; color:#fff; font-size:24px; }
}

Responsive tasarım boyutları nedir?

  1. Tabletlerin en geniş çözünürlüğü 960px’dir.
  2. Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
  3. Dikey telefonların  en geniş çözünürlüğü 479px’dir.

Sizlerde, yeni tasarımlarınızda responsive tasarımları örnek alarak, daha kaliteli bir web dünyası için responsive tasarımları örnek alabilir ve geliştirebilirsiniz.

Bir önceki yazımız olan Web Tasarım Yapan Firmalar İstanbul başlıklı makalemizi de okumanızı öneririz.

Yorum Yazın