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

O kadar kolay ki, inanamayacaksınız. 10dk. içerisinde anasayfanız hazır. Aşağıdaki bilgiler doğrultusunda hemen başlayalım.

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Responsive Tasarım Nasıl Yapılır?</title>
</head>

Responsive Tasarım İkinci Adım

İkinci adımda, dış taşıyıcı bir div açıyoruz ve header kısmını kodluyoruz.

<!–Buraya logo , menu ve banner gelecek–>
</header>

</div>

Şimdi header kısmının içini dolduruyoruz arkadaşlar.

<nav>

<ul>
<li><a href=”#”>Anasayfa</a></li>
<li><a href=”#”>Hakkımda</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>

</nav>
<div id=”banner”>
<img src=”img/banner.jpg” alt=”banner” />
</div>
</header>

Responsive Tasarım İçeriği

Şimdi içerik kısmına geçiyoruz. Burada, html5 etiketlerinden <section> ve <aside> etiketlerini kullanacağız. Ayrıca <p> etiketi ile paragraf ekleyeceğiz.

<h3>Sol taraf</h3>
<p>Profesyonel web tasarım hizmetleri ile responsive tasarım yapıyoruz. Google tarafından getirilen son algoritmalar kapsamında, mobil uyumluluk önemli bir yer kapladığından ve mobil uyumlu olmayan siteler SERP (arama motoru sonuçları) tarafında gözükmediğinden dolayı, responsive tasarım önemini arttırmıştır.</p>
</section>

<aside>
<h3>Sağ taraf</h3>
<p>Mucizefikir olarak sizlere profesyonel anlamda, responsive tasarımlar yapmaktayız. Bunun yanında özel olarak yapılan sayfa içi optimizasyon çalışmaları ile sitenizi %100 google uyumlu olarak tasarlıyoruz. Sizlere özel grafik tasarım çalışmaları ve kolay kullanımlı içerik yönetim sistemi ile internet ortamına güçlü bir siteyle girmenizi ve bu siteyi senelerce efektif olarak kullanmanızı sağlıyoruz.</p>
</aside>

Footer Tasarımı

Hadi, eksik kalmasın birde sitenin footer kısmını tamamlayalım.

<footer><p>www.mucizefikir.com</p></footer>

Responsive Tasarım için CSS kodları

Şimdi CSS ile şekillendirme kısmına gelelim. Responsive Tasarım Nasıl Yapılır? sorunun kilit noktası tam olarak burası.

Bir css sayfası oluşturup yada mevcut sayfasının içinde <head></head> etiketlerinin arasına bir <style></style> etiketi açıp kapatarak da css kodlarımızı içine yazabiliriz.

/* Reset
———————————————————— */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

Responsive Tasarım CSS

İşte asıl CSS kodları;

#container{
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;}
/Section etiketine bağlanacak/
#main {
width: 60%;
margin-right: 5%;
float: left;
}

aside {
width: 35%;
float: right;
}
footer{
width:%95;
height:50px;
background-color:#333;
text-align:center;
}
/Section sola ve aside sağa yaslanacağından düzgün görünmesi için temizliyoruz. */
.clear{ clear:both;}
Menü ve başlıklar için CSS
/ Logo H1 */
header h1 {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(../images/demo.gif) 0 0 no-repeat;
text-indent: -9999px;
}

/* Nav */
header nav {
float: right;
margin-top: 40px;
width:920px;
padding-top:10px;
padding-bottom:10px;
background-color:#333;

}

header nav li {
display: inline;
margin-left: 15px;
}

Mediascreen özelliği ve görünümün farklı çözünürlüklere, cihazlara göre ayarlanması

@media screen and (max-width: 480px)

{
header nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
header nav li {
margin: 0;
background: #efefef;
display: block;
margin-bottom: 3px;
}
header nav a {
display: block;
padding: 10px;
text-align: center;
}
}

Responsive Tasarım Son Hali

İşte kodların bitmiş son hali aşağıdadır. Bu kodları body etiketinin arasına yerleştirmeniz gerekmektedir.
<div id=”container”>

<nav>

<ul>
<li><a href=”#”>Anasayfa</a></li>
<li><a href=”#”>Hakkımda</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>

</nav>
<div id=”banner”>
<img src=”img/banner1.jpg” alt=”banner” />
</div>
</header>

<footer><p>www.mucizefikir.com</p></footer>

</div>

Responsive Tasarım Nasıl Yapılır? ile ilgili sorularınızı bizlere yöneltebilirsiniz. Her zaman yardımcı olmaktan memnuniyet duyar, responsive web tasarım sürecinde sizlere elimizden gelen desteği vermek isteriz. Günümüzün son trendi responsive web tasarım ne kadar çok web tasarımcı tarafından öğrenilirse, artık web sitelerinin kalitesinin o kadar artacağını düşünüyoruz.

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