PHP | Jquery | Css | Codeigniter | Unity3D


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.

Responsive Tasarım ve Çözünürlük 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

css
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


  
 /* Smartphones (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

 /* CSS KODLARI BURAYA */
 }
 
 /* Smartphones (landscape) ----------- */
 @media only screen and (min-width : 321px) {

 /* CSS KODLARI BURAYA */
 }
 
 /* Smartphones (portrait) ----------- */
 @media only screen and (max-width : 320px) {

 /* CSS KODLARI BURAYA */
 }
 
 /* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

 /* CSS KODLARI BURAYA */
 }
 
 /* iPads (landscape) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

 /* CSS KODLARI BURAYA */
 }
 
 /* iPads (portrait) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

 /* CSS KODLARI BURAYA */
 }
 
 /* Desktops and laptops ----------- */
 @media only screen and (min-width : 1224px) {

 /* CSS KODLARI BURAYA */
 }
  
 /* Large screens ----------- */
 @media only screen and (min-width : 1824px) {

 /* CSS KODLARI BURAYA */
 }
 
 /* iPhone 5 (portrait & landscape)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

 /* CSS KODLARI BURAYA */
 }
 
 /* iPhone 5 (landscape)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {

 /* CSS KODLARI BURAYA */
 }
 
 /* iPhone 5 (portrait)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {

 /* CSS KODLARI BURAYA */
 }




Soru ve Tartışma Konularınız için;

Yayınlayan
comments powered by Disqus
Yazar: Windofelm
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.