Responsive Tasarım ve Ekran Çözünürlüğü Hakkında
Günümüzde web tabanlı, mobil platformlarda da çalıştırmak durumunda olduğumuz e-ticaret siteleri, online işlem sayfaları, portallar, blog sayfaları ve sitelerin sayısı artmıştır. Öyle ki yaptığımız alışverişlerde dahi web ortamına bağlı hale gelmişsek ve bu web ortamlarının kullanımı da gün geçtikçe artmakta ve mobil ortamlarda da sıklıkla kullanılmaktayken bir web programcı olarak kurduğumuz web ortamının, web sayfasının mobil ortamlara da uygun bir şekilde fonksiyonelliğe ve görsel tutarlılığa tabi olması kaçınılmaz bir durumdur.
Web sayfalarının mobil ortamlarda da kullanılmasıyla birlikte yeni bir sorun ortaya çıkmıştır. Bir web sayfasını oluştururken çok yüzeysel birşey yapıyorsak sabit genişlikler verir yayınlarız normalde ama bu sayfaya mobil bir cihazdan girdiğinizde neyle karşılaşırsınız ?
Fonksiyonellik açısından ödün vermiş olabilirsiniz. Yani örneğin navigasyonunuzun bir kısmı görünmeyebilir ya da extra olarak eklediğiniz bir özellik yine çözünürlük engeline takılabilir.
İkinci olarak tasarımsal olarak da yine sürprizlerle karşılaşmanız olasıdır.
Yine kodladığınız tasarımın responsive tasarım olması seo açısından da web sayfanıza getirisi büyük olucaktır öyle ki özellikle google bunun farkında diyebiliriz.
Şimdi web programlama yaparken özellikle tasarım şablonu geliştirirken kullanabiliceğiniz bir araçtan bahsetmek isterim. Öyle ki yaptığınız tasarımın farklı ortamda çalışması durumunda daha tasarım şablonu geliştirme aşamasındayken önlemler alabilirsiniz bunun için de tasarım kodlarken geliştirdiğiniz tasarımın farklı çözünürlüklerde nasıl göründüğü bilgisine ihtiyaç duyucaksınız ve kontrol etmek isteyeceksinizdir. Eğer tasarım aşamasında buna dikkat etmezseniz ilerde başınıza büyük sorunlar açabilir hele de kullandığınız
yapısı bütüncül bir yapıda değilse. Bahsettiğim bu sorunu aşmak için google chrome un bu konuda çok kullanışlı bir aracı olan ve çözünürlük test etmek için kullanabileceğiniz aracı ( eklentisi ) olan Google Chrome Resolution Test aracını chrome a kurup tasarım aşamasında kullanbilirsiniz. Kendi standart çözünürlük seviyeleri var ancak kendiniz de özellikle farklı mobil ortamlar için opsiyonel çözünürlükler belirleyebiliyorsunuz.
Responsive Tasrım Ekran Çözünürlükleri
/* CSS KODLARI BURAYA */
Tags responsive tasarımresponsive designresponsive temaweb sayfa çözünürlüğüweb chrome eklentisi
Description: Oluşturduğunuz ya da oluşturacağınız tasarımın responsive olması açısında çözünürlük kontrolü yapabileceğimiz araçlar bulunmaktadır.