Responsive Design

Yaklaşık 5 sene önce web tasarımcıları sadece masaüstü pc’lere göre tasarımlarını yapıyordu. 2013 yılına girdiğimizde ise farklı ebatlarda tabletler, akıllı telefonlar vb. cihazlar ile internete girmek mümkün.

Bu durum aslında tasarımcılar için tam bir kabus. Çünkü her bir cihazın farklı bir çözünürlüğü var. Bu da görüntülenecek web sayfasının cihazın ekran ölçülerinde nasıl görüneceği sorusunu gündeme getiriyor.

Üretilebilecek çözümlerden biri amaca uygun bir uygulama geliştirmek iken diğeride son dönemde oldukça popüler olan bir tasarım modeli: Responsive Design.

CSS3 ve Mobil

CSS3 web tasarımcıları ve geliştiricileri için oldukça heyecan verici özellikler ve kolaylıklarla geldi. Ancak tüm bunların yanında kocaman bir Internet Explorer 8 ve öncesine ait sıkıntılarıda getirdi. IE8 ve öncesi versiyonlarının neredeyse hiç destek vermemesi hayal kırıklığıydı. Neyseki bu durum iOS ve Android cihazlar için geçerli değil.

Responsive Design başlarda karmaşık gelebilir ancak oldukça basit.

Anahtar: Media Queries

Media Queries, CSS2’deki Media Types’ın daha geliştirilmiş hali. Temel olarak görüntüleme yapılan cihazın yeteneklerine göre sayfayı düzenler.

Örneğin:

-browser’ın genişliği ve yüksekliği,
-Cihazın genişliği ve yüksekliği,
-Orientation yani cihaz yan mı yoksa dikey mi duruyor,
-Çözünürlük,

gibi yeteneklere bakılır. Önemli olan nokta browser’ın Media Queries’i desteklemesi. Desteklemeyen IE8 gibi browser’larda javascript ile çözüm üretebiliriz.

safari’nin desktop versiyonu ile görüntülenen sayfa

Aynı sayfanın iphone’daki safari hali

Örnek

1. Adım: Meta Tag

Pekçok mobil tarayıcı mevcut sayfaları görüntülemek için belirli bir oran üzerinden sayfayı daraltır. Bunu sayfamızda <head> etiketi içine yazılan kod ile tanımlayabiliriz.

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

Internet Explorer 8 media query desteklemiyor. Bu nedenle javascript kullanmak gerekiyor. Aşağıdaki kodu da ekleyelim.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2. Adım: Html Sayfası

Örnek olarak bu html sayfasını indirebilirsiniz.

3. Adım: media Query

CSS3 Media Query bu işin merkezinde. Bu aynen if içinde tanımladığımız koşul mantığında çalışıyor.

Örnek sayfada tanımladığımız genişlik değerlerine göre elementlerin özelliklerini otomatik olarak değiştiriyor. Yani yazının başında belirttiğim viewport genişliğini ayarlıyor.

Sayfanızda header, section gibi Html5 elementlerini kullanıyorsanız IE9 öncesi bu elementleri tanımayacaktır. Bunu çözmek için browser’a aşağıdaki javascript ile elementleri tanıtabiliriz.

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Esnek Resimler – Flexible Images

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Esnek Videolar – Flexible Videos

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

Cihazlara göre çözünürlükler

Ufak telefonlar: 240 x 320
iPhone : 320 x 480
Ufak Tabletler (7″) : 480 x 640
iPad (Dikey) : 768 x 1024
iPad (Yatay) : 1024 x 768

Sonuç

Yinede sayfanızı responsive olarak oluşturmak istemeyenler için farklı çözümlerde var. Bunlardan birincisi tamamen mobil için hazırlanmış ayrı bir sayfa yapmak. İkincisi ise platforma uygun uygulamayı hazırlamak.

Tercih sizin 🙂