RESPONSIVE WEB DESIGN

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ı

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

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

@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. */

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 768-991 px Dikey Tablet Ekran 3 992-1199px Yatay Tablet+Mini book Ekran 4 1200 px ve üstü Notebook+Masaüstü

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

Çö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.

Digital Kaynaklar http://www.iztim.com/Blog/YazilimTeknolojisi/Responsive-Web-Tasarim http://www.iztim.com/Blog/YazilimTeknolojisi/Responsive-Web-Tasarim http://www.sercanaslan.net/css3_css-responsive-mantigi-ve-basit-responsive-ornekleri.html http://www.reytingsonuclari.com/2017/4/en-cok-kullanilan-ekran-cozunurlukleri-h2382.html http://www.gencprogramci.net/sayfalar/icerik_perma/145/responsive-tasarim-ve-ekran-cozunurlugu-hakkinda https://www.webtures.com.tr/blog/responsive-web-tasariminin-sirketinize-faydalari/ http://www.deltawebsistem.com/blog/responsive-web-design-nedir/ https://www.mediaclick.com.tr/blog/responsive-tasarim-olculeri