Responsive design
-
Upload
emine-ciftci -
Category
Design
-
view
174 -
download
3
Transcript of 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
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Site
Home
About
Contact
Mobile
Home
About
Contact
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Site
Home
About
Contact
Mobile
Home
About
Contact
Tablets
Home
About
Contact
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
We can’t create a new website for each new
device
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Create once and adapt for everywhere
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Responsive Web Design Nedir?
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
“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
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Neden Kullanmalıyız?
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Responsive design üç ana bileşenden oluşur.
•Esnek sayfa düzeni
•Esnek resimler ve medya
•Medya sorguları
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Esnek sayfa düzeni tüm çözünürlükler için en iyi yöntemdir.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
Responsive tasarımınızı mobille doğrusallaştırmak önemlidir.
Önemli olmayan içerikleri gizlemeli.
İSTANBUL ÜNİVERSİTESİ ENFORMATİK BÖLÜMÜ
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