RESPONSIVE WEB DESIGN.

... konulu sunumlar: "RESPONSIVE WEB DESIGN."— Sunum transkripti:

1 RESPONSIVE WEB DESIGN

2 Nedir bu Responsive tasarım ? © 0169
Türkçesi Duyarlı Web tasarım Temelde teknolojik gelişim Mobil cihazlar günlük kullanımda yaygınlaştı Mobil cihazlarda internet kullanımı arttı İnsanların ihtiyaçları arttı Mobil tarayıcı kullanımı arttı Sonuç ,her ziyaretçiye özel bir tasarım ihtiyacı

3

4 @media only screen and (max-width:768px) {
@media only screen and (max-width:768px) { .ornek1 { background:red; color:#fff; font-family: Arial; }

5 KULLANILACAK ETİKETLER
Only(Sadece belirtilen şartlar geçerli olması durumunda kodların çalışmasını sağlar.) Screen(Ekran olma zorunluluğunu belirtir.) And(Özellikleri birleştirmeye yarar.) Max width(Maksimum genişlik değerindeki ekranları seçmemizi sağlar.) Min width(Minimum genişlik değerindeki ekranları belirtmemizi sağlar.) landscape/portrait : Yatay/Dikey

6

7 @media screen and (max-width:320px) {
.sidebar display:none; } /* sidebar nesnesini 320 px değerinden büyük çözünürlükteki cihazlarda gizlemek için kullanılır. */

8 Responsive Tasarıma Başlarken
Kademeli responsive tasarım tablosu hazılamak işimizi kolaylaştıracaktır.(4 Kademeli) Çözünürlük aralığı Uyumluluk Ekran 1 0-767 px Mobil Ekranlar Ekran 2 px Dikey Tablet Ekran 3 px Yatay Tablet+Mini book Ekran 4 1200 px ve üstü Notebook+Masaüstü

9 Unutulmaması gereken bir şey
Head tagları arasına aşağıdaki ifade eklenmelidir. <meta name="viewport" content="width=device-width; initial-scale=1.0"> landscape/portraitYatay/Dikey

10

11

12 Çözünürlükten başka ne işe yarar?
Google seo çalışmalarında ön plana çıkaran bir özelliktir.Arama motorları indexleme yaparken artı özellik olarak değerlendirir. Cihaz özelliklerini değerlendirdiğimiz için performans artışı sağlar. Kolay yönetilebilirlik sağlar. Kullanıcı için kolaylık sağlar.

13 Digital Kaynaklar