Responsive CSS Tasarımda Dikkat Edilmesi Gereken 5 Nokta

CSS bazen tam bir baş belası olabiliyor. Özellikle de “responsive” kısmı. Mükemmel bir frontend geliştiricisi değilseniz, CSS gerçekten sıkıcı olabiliyor ve oldukça fazla zaman harcayabiliyorsunuz. Bu nedenle birçok geliştirici web sitesi geliştirirken CSS’le fazla uğraşmayarak, ortalama dizaynlar ortaya çıkarıyorlar. Fakat gerçekten emek harcandığında CSS ile çok farklı ve canlı tasarımlar ortaya çıkarmak pekala mümkün.

Bu yazımda sizlere, responsive bir tasarım yaparken dikkat etmeniz gereken önemli konuları paylaşacağım.

Responsive Tasarım Ne Demek?

Günümüzde 5 milyara yakın kullanıcı internete mobil cihazlarla eriştiğinden dolayı; responsive tasarım, web programlama sektöründe çok önemli bir kavram oldu. Responsive tasarımlar,kısaca web sitesinin kendisini ekran veya pencere boyutuna göre ayarlayabildiği tasarımlardır.

Responsive Tasarımlarda Dikkat Edilmesi Gerekenler

Padding/Border/Margin

Web sitesi oluştururken, her şeyin yerli yerinde ve çekici gözükmesi için sıklıkla padding/border/margin kullanırız. Responsive tasarım yaparken bu kavramları olabildiğince az kullanmak, sitenin boyutu küçüldüğünde oluşabilecek bozuklukları minimuma indirir.

Box Sizing

Sitenin HTML dosyasında percentage(yüzde) width ile birlikte box-sizing kullanmanız padding yüzünden oluşacak sorunları büyük bir ölçüde engeller. Box-sizing’in temelde yaptığı şey, elementin içinde olan bütün bileşenleri sayfanın boyutu değiştikçe aynı oranda büyüklüklerini değiştirmektir.

{box-sizing : border box;} 

Flex-wrap

Flex-wrap, HTML elementlerini(<div>,<p>,…) düzenlemek için kullanılır yani sayfanızın genel görünümünü belirlerken kullandığınız bir özelliktir. Elementleri tek bir sıra halinde veya birden fazla sıra halinde wraplenip sayfa üzerinde gözükmesini sağlar.

Em/Rem/ Percentages(Yüzdeler)

Responsive tasarımlarda büyüklük birimi olarak px yerine em, rem ve yüzdeler kullanılmalıdır. Px kullanıldığı takdirde, kullanıldığı element kitlenir, yani tekrardan boyutlanmaz. Bu nedenle yapılan tasarım farklı ekran ve pencerelere göre boyutlanamaz.

Media Query

Media Query’ler aslında mantıksal ifadelerdir. Örneğin, “Kullanıcının ekranının genişliği belirlenen genişlikten büyük mü?” veya “Belirlenen çözünürlük, kullanıcılara uygun mu?” gibi sorunları media query kullanarak çözebiliriz. Kullanıcının ihtiyacı olan özellikleri belirleyip stil dosyasına yansıtmamızı sağlar.

Bu yazımda benim sıralayacağım önemli noktalar bu kadardı. Sizin de aklınıza gelen veya eklemek istediğiniz önemli konular varsa aşağı yorum olarak yazabilirsiniz! Mutlu Kodlamalar!