Responsive Web Tasarım Nasıl Yapılır?

Günümüzde teknoloji gün ve gün ilerlemektedir. Bu gelişen teknoloji ile firmalar  bu teknolojiye ayak uydurmak için web tasarım ihtiyacı duyarlar. Bu ihtiyaç doğrultusunda bir web tasarım yapmaya karar verirler ki bu kurumsallaşmak adına çok doğru bir harekettir. Eğer kurumsal ve köklü bir şirkete sahip iseniz  güncel bir web siteniz yok ise bu teknolojinin firmanıza sağlayacağı bir çok avantajdan mahrum kalacağınız anlamına gelmektedir. Sizde bir kurumsal web tasarım yaptırmak istiyorsanız acarnet sizlere yardımcı olmaktan gurur duyacaktır.

Web siteniz var ise ve bu web sitesi üzerinden iş alıyorsanız sitenizin bütün ortamlara elverişli olması gerekmelidir. Bu şarta uymayan web siteleri şirketinizin iş kaybetmesine neden olacaktır. Bu yargıya dayanarak söyleyebilirim ki buda sizlerin prestijini düşürecek kötü bir durumdur. Bu prestijin müşterilerinize de yansıması sizler açısından şirketinizin kötüye gidişinin bir göstergesidir. Bunun yanında web siteniz güncel teknolojiler ile bir uyum içerisinde olmalıdır. Bu uyumu web tasarım da responsive uyumlu siteler yaparak başlayabilirsiniz. Kısaca responsive web tasarım sitenizin bilgisayar ,tablet, telefon ve benzeri tüm ekranlarda scrollbarsız sorunsuz bir şekilde bozulmalar olmadan çalışmasıdır. Bunu yaptığımız taktirde sitemiz Google tarafından daha hızlı indexlenir. Bu olay sitemize daha fazla kullanıcının girmesi demektir. Bu yol bir nevi  sizlere doğal yollarla müşteriler kazandıracaktır.

NASIL YAPILIYOR BU RESPONSİVE TASARIM?

İçinizden peki bunlar nasıl yapıyorlar diyebilirsiniz.Css bu anlamda bizlere hızır gibi yetişmektedir. Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran çözünürlüklerini dikkate almanızda fayda var. Bunlar;

-Tabletlerin en geniş çözünürlüğü 960px,

-Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.

-Dikey telefonların en geniş çözünürlüğü 479px’dir.

Tasarım yaparken bu öncelikle bu çözünürlükleri dikkate almalıyız.

RESPONSİVE WEB TASARIMDA KULLANILAN KODLAR

Bu kodların nasıl yazılacağına gelirsek bu soruna CSS bizlere hızır gibi yetişmekte. Css media kodlar yardımıyla bu sorunu çözebiliriz.

Gel gelelim bu kodların nasıl çalıştığına öncelikle sitenizde 960px altına inildiğinde bir sorun çıkıyor. Çözünürlüğü  sitenizde çözünürlük 960px altına düştüğünde hangi kodların çalışacağını belirtmek için Css kodlarınıza bu kodu eklemeniz gerekmektedir @media only screen and (max-width: 960px){}  bu kodun anlamı çözünürlüğün 960px altına düştüğünde çalışma durumudur. {} bu kodların arasına yazılan ifadeler 960px altına düştüğünde aktif olacaktır. Bunun dışında 801px ve 959px arasındaki çözünürlüklerde bozulmalar var ise;

@media only screen and (min-width: 801px) and (max-width:959px){ } bu kodu eklemelisiniz. Son olarak bu kodların her çözünürlükte çalışması için html kodlarımızda head tagı arasına bu kodu yapıştırmalıyız.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

 

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*