Responsive Tasarım Nedir?
Son zamanlarda herkes web sitelerinin mobil versiyonunun da olmasını istiyor. Mobilden web sitelerine ziyaret Dünya’da %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Responsive tasarım ile şekillendirilmiş web sitesi; bilgisayarlarda yüksek çözünürlükte görüntülendiği gibi; mobil cihazlarda da okunaklı ve yüksek çözünürlükte görüntülenecektir ve müşteri memnuniyetinize katkı sağlayacaktır. Siteye mobil cihazdan girildiğinde tasarım değişerek mobile uyumlu bir tasarıma dönüşür. SEO açısından da bakıldığında önemli bir yere sahip olan responsive tasarım, web sitesinin arama motorlarında ilk sıralarda çıkmasında etkilidir. Dijital Gen’de de tüm çalışmalarımız Responsive Tasarım ile mobil uyumlu inşa edilmiştir.
Responsive Web Tasarım Kurgusu
Responsive web sitesi hazırlayabilmek için güncel olan HTML5, CSS3 kodlama yapısından faydalanıldığı gibi grid tasarım kullanılmasında da büyük fayda vardır. Grid yapıda hazırlanan tasarımın mobile duyarlı olarak kodlanmasında hazır framework sistemleri kullanılabilir. Bootstrap olarak adlandırılan bu framework yapısı, kodlama sırasında kodlayıcısına kolaylık sağlamakla beraber ziyaretçilere uyumlu bir mobil web görüntüsü sağlamaktadır. Bu tasarım bilgileri web sitenizi oluştururken en verimli performansı sağlayacak ve iş yükünüzü hafifleterek doğru sonuca varmanızı sağlayacaktır. Sağlıklı bir web tasarım sayfası için responsive tasarım oldukça kullanışlı bir alternatiftir.
Responsive Tasarım Teknikleri
- Kolay şekilde Responsive Web Sitesi çalışmak istiyorsanız Boostrap ile çalışabilirsiniz.
- Boostrap’ın yanı sıra PX ile de çalışabilirsiniz.
- Tasarımınızda bir resim kullanacaksanız bu resmin vektörel çalışılması gerekir. Vektörel çalıştığınızda ne kadar büyütüp küçültseniz de resmin kalitesinde bir sorun yaşamazsınız.
- Adsense reklamlarını mobil uyumlu hale getirin.
Responsive Tasarım Nasıl Yapılır?
Aşağıdaki bilgiler doğrultusunda hemen Responsive Tasarıma başlayalım.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Responsive Tasarım Nasıl Yapılır?</title>
</head>
<body>
</body>
</html>
2.Adım
İkinci adımda, dış taşıyıcı bir div açıyoruz ve header kısmını kodluyoruz.
<div id=”container”>
<header>
<!–Buraya logo , menu ve banner gelecek–>
</header>
</div>
Header kısmının içini dolduruyoruz;
<header>
<div class=”logo”>
<img src=”img/logo.png” width=”250″ height=”61″>
</div>
<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 İçin CSS Kodları
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;
}
Dijital Gen ve Mobil Uyumluluk
Dijital Gen tüm çalışmalarını mobil uyumlu olarak hazırlar, sunar ve geliştirir. Mobil hayatımızın her anında kesintisiz ve devamlılığın simgesi haline gelmiştir. Mobil uyumlu olmayan çalışmalar gün geçtikçe kullanımını yitirmek zorunda kalmıştır. Firmalar mobil uyumlu olmayan çalışmaları, programları veya uygulamalarını, mobil uyumlu hale getirebilmek için arayışa girmek zorunda kalmışlardır. Dijital Gen ve ekibi bu konuda bir çözüm ortağı olarak çalışmalarına devam etmektedir.
