Responsive Kodlama

Responsive Kodlama : Hayatımıza giren cep telefonları ve tabletler günümüzün her döneminde bize eşlik etmektedir. İşlevlerini ve pratik oluşlarını zaten herkes çok iyi bir şekilde kullandığı için bilmektedir. Haliyle insanların en çok kullanılan cihazlar yaptıkları yerler telefon sonra da tablet olmaktadır. Haliyle sizin şirketinizi veya işletmenizi araştıracakları ilk yer günümüz şartlarıyla telefonları ve tabletleri olacaktır.

Responsive tasarım tanımını kısaca yapacaksak tüm cihazlara uyumlu olarak çalışan Web yazılımlarıdır. Bunu daha açık belirtecek olursak tüm mobil cihazlara uyumlu olarak çalışması ve aynı zamanda masaüstü bilgisayarlar da da sorunsuz çalışan Web tasarımlara Responsive tasarım denmektedir. Görüntünün tüm cihazlarda stabil yani düzgün yapılması tekniğidir.

Böylelikle Web sitelerinin telefon ve tabletler üzerinde mobil uyumluluk olmak zorunluluğu vardır. Responsive kodlama denilen işlem de budur. Yapılan Web sitesini veya mobil uygulamanızı mobil cihazlara uygun bir şekilde kodlamaya responsive kodlama denilmektedir.

Mobil Uyumlu Site Nasıl Yapılır?

Mobil uyumlu Web sitesinin yapımı aslında çok zor işlemler arasında değildir. Cihaz ölçülerini aşağıda belirteceğim. Verdiğim ölçülere göre Web sitesi için Css sınırlayıcı kodların yazılmasıyla ve cihazlardaki testleriyle mobil uyumlu responsive kod yazmak mümkündür.

Bunun için ihtiyacınız olan Web siteleri için CSS kodu ve HTML hakimiyetinin iyi olması. Mobil uygulamalarınız için zaten bu destek geliştirme panellerinde kolaylıkla sizlere sunuluyor.

Sunmanız gereken içeriğin herkes tarafında anlaşılabilir ve okunabilir olması Web sitenizin girişlerini ve bununla beraber potansiyel müşterilerinizi de elinizde tutmanıza yarayacaktır.

Responsive Boyutları Nelerdir?

Responsive boyutlarını aşağıda sizlerle paylaşacağım. Css kodlarını yazabileceğiniz kod eklentisi de aşağıda örnekli bir şekilde yapıp sizlere sunuyor olacağım.

Cihaz Adı Genilişlik Yükseklik
iPhone X 375 812
iPhone 6, 7, 8 414 736
iPhone 5 320 568
iPhone 3, 4 320 480
LG G3, G4, G5 360 640
Samsung Galaxy S3, S4, S5, S6, S7, S8 360 640
Samsung Galaxy S4 Mini 360 640
Samsung Galaxy S3 Mini 360 533

Css Kod:

@media screen and (min-width:992px) and (max-width:1199px){
	... Gelecek CSS Kodları ...
}
@media screen and (min-width:768px) and (max-width:991px){
	... Gelecek CSS Kodları ...
}
@media screen and (min-width:481px) and (max-width:767px){
	... Gelecek CSS Kodları ...
}
@media screen and (max-width:480px){
	... Gelecek CSS Kodları ...
}

Açıklama: Yapılan genişlik aralıkları belli bir standart içinde belirlenmiş dünya üzerinde de kullanılan standartlardır.

  • 992px1199px Arası
  • 768px991px Arası
  • 481px767px Arası
  • 480px genişliğin aşağısı

Mobil Uyumlu Site Neden Yapılmalı?

Neredeyse artık herkes akıllı bir cihaza sahip. İnsanlar araştırmalarını mobil cihazlarından yapmaktadır. Bunun yüzünden Web sitenizin mobil uyumlu olması sizlere müşteri açısından avantaj sağlayacaktır.

Web sitesi mobil uyumlu olduğu için tüm müşteri kitlelerine hitap ediyorsunuz demektir. Bu da işletmenizin gelir düzeyini bile arttırmaya etkendir.

 

Bu ve bunun gibi diğer Web tasarım konuları hakkında sormak istediğiniz tüm soruları iletişim sayfası üzeriden veya aşağıdaki form üzerinden iletişim bilgilerinizi bırakarak sorabilirsiniz. Sizlere en kısa süre içinde geri dönüş yapmaya çalışacağım. Şimdiden hepinize iyi çalışmalar diliyorum.

 

Responsive Kodlama