responsive design

İçindekiler

Responsive Web Design Nedir? Neden Kullanmalıyız? Responsive Design Bileşenleri Responsive Tasarımın Aleyhindeki

Durumlar Kaynakça

İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ

Site

Home

About

Contact


Site

Home

About

Contact

Mobile

Home

About

Contact


Site

Home

About

Contact

Mobile

Home

About

Contact

Tablets

Home

About

Contact


We can’t create a new website for each new

device


Create once and adapt for everywhere


Responsive Web Design Nedir?


“Responsive web design (RWD) çok çeşitli cihazlar üzerinde ideal bir görüntüleme deneyimi (minimum yeniden boyutlandırma, gezinme ve kaydırmayla kolay okuma ve dolaşma) sunacak siteler hazırlanmasını amaçlayan bir web tasarım yaklaşımıdır.” - Wikipedia


Neden Kullanmalıyız?


1. Kullanılabilirlik

Şüphesiz en büyük yararı kolay kullanımdır. Kullanıcısına ekranı büyütmeden sadece aşağı ve yukarı parmak hareketleriyle gezinmesine olanak sağlar.


2. Kolay Bakım

Her çözünürlük için ayrı bir site tasarımı yaptırmak yerine, oluşturulmuş olan tek bir responsive web tasarım sayesinde, tek bir domain altında tüm cihaz çözünürlüklerine hizmet vereceksiniz. Bu sayede web sitenizin bakımı da daha kolay olacaktır.


3. Arama Motoru Optimizasyonu

Seo için önemli olan responsive web tasarım ile sitenize değer katıp, arama motorlarının istediği yapıya kavuşturmasını sağlayabilirsiniz. Site URL yapısı aynı kalacağından arama motorları tarafından bulunmanız daha hızlı gerçekleşecektir.


4. Düşük MaliyetBirden fazla site oluşturmak yerine tercih edeceğiniz responsive web tasarım sayesinde daha az maliyetle bir web tasarımına sahip olabilirsiniz. Bu sayede hosting, domain gibi ek maliyetleri ortadan kaldırmış olursunuz.Responsive web tasarımları HTML5 ve CSS3 ara yüz kodlama dilleriyle oluşturulmaktadır. İleri derecede bilgi gerektiren bu çalışmaların yapılması için, sağlıklı bir kodlama çalışması yapılması ayrıca tüm tarayıcılar için kontrollerin yapılması gerekmektedir.


Responsive design üç ana bileşenden oluşur.

•Esnek sayfa düzeni

•Esnek resimler ve medya

•Medya sorguları


Esnek sayfa düzeni tüm çözünürlükler için en iyi yöntemdir.


Medya Sorguları

Medya sorgulari, CSS stillerine uygulanabilecek basit filtrelerdir. Içerigi olusturan cihazin ekran türü, genislik, yükseklik, yön, hatta çözünürlügünü de içeren özelliklerine göre stilleri değistirmeyi kolaylaştirirlar.Herkesin istediği bir özellik olarak her çözünürlükte ve araçta uygun web siteleri üretmektir. Bunun için medya sorguları bize yardım sağlar.Medya sorgularının en basit hali:

<link rel="stylesheet" media="screen" href="ornek.css">

Medya sorguları bir veya daha fazla tipe göre sorgulama yapar ve sorgunun doğruluğuna göre o css dosyasını uygular.


Medya Sorguları

Medya sorguları bir veya daha fazla tipe göre sorgulama yapar ve sorgunun doğruluğuna göre o css dosyasını uygular.


Medya Sorguları

Medya sorgularımızda not, and ve only mantıksal operatörlerini kullanabiliriz.and İki veya daha fazla medya özelliğini birbirine bağlar. Sorgudaki tüm medya özelliklerinin doğru olması durumunda css dokümanın uygulanmasını sağlar. Örneğin (color) and (orientation: landscape) and (min-device-width: 800px) tanımı; Görüntüleyen aracın renkli, yatayda ve en az 800px genişliğinde ise css dokümanı uygulanır.

@media (min-width:450px) and (max-width:950px)Bu durumda ise; genişliği en az 450px ve en fazla 950px olan araçlarda uygulanır.


Responsive tasarımınızı mobille doğrusallaştırmak önemlidir.

Önemli olmayan içerikleri gizlemeli.


Responsive Tasarımın Aleyhindeki Durumlar

Mobil kullanıcılar konuya özgü içeriği görmek ister

Tüm siteyi mobil tarayıcıya taşımak performansı düşürür

Kaynakça

http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

http://www.yazilimnet.com/tr/bloglar/web-tasarim

http://fatihhayrioglu.com/css-3-medya-sorgulari/

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=tr#medya-sorgularini-grnt-alani-boyutuna-gre-uygulama
































