Günümüzde insanlar çoğu işini mobil platformlarda yapmakta. Bu da responsive tasarım konusunun önemini artırmaktadır. Bu yazımızda sizlere ekrana duyarlı tasarım ve bu konu ile ilgili detaylaır vereceğiz. Şimdiden iyi okumalar.
Responsive Tasarım Nedir?
Ekrana duyarlı tasarım olarak da adlandırılabilen responsive tasarım ile, her cihaz ve çözünürlükte aynı görünen web siteleri elde etmek mümkün. Arama motorlarının günümüzde mobil trafiğe verdiği önem ve web sitelerinin dönemlik olarak aldıkları raporlarda görünen mobil platformlardan gelen ziyaretçi sayısının fazlalığı bu konuyu önemli bir konu haline getirmiştir. Ayrıca pek çok arama motoru da artık mobil uyumlu siteleri kıstas haline getirmiş durumda.
Bir web sitesi sahibiyseniz mutlaka tüm ekranlara duyarlı bir tasarım kullanmanız gerekmektedir. Bu sayede gelen ziyaretçilerin sitenizi daa sağlıklı görmesini ve daha çok süre sitenizde kalmasını sağlarsınız. Bu da hemen çıkma oranı gibi önemli bir istatistiği pozitif yönde ilerletmenize olanak sağlar.
Sitenizi ziyaret eden kişiler görsellerin, yazıların ve içeriklerin net olarak okunmasını ve görünmesini isterler. Artık mobil platformlarda hem iş hem eğitim işlemleri yapılmaktadır. Dolayısı ile bu cihazların ekran çözünürlüğünde web sitlerinin düzgün görünmesi ve çalışması başlı başına bir seo kriteridir.
Responisive tasarım kriterleri içindeki en önemli konu sitenin görüntüleneceği ekranların boyutlarıdır. Tasarım yapılmadan önce bu çözünürlükler bilinmelidir.
Responsive Tasarım Nasıl Yapılır?
Responsive tasarım yapmak için öncelikle html ve css konularına hakim olmanız gerekiyor. Ardından kodlama aşamasında head etiketlerinin arasına aşağıdaki kodu yerleştirmeniz gerekiyor.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Yukarıda yazacağınız kod ile sitenin ekrana duyarlı olduğunu belirtiyoruz. Bu işlemin ardından tasarımı yapacağınız ekranın boyutlarını css kodları ile belirtmemiz gerekiyor. Genel olarak mobil tasarımlarda 768px ve altındaki ölçülerde, tabletler için yine 768px ve altındaki ölçülerde, masaüstü tasarımlar için 992px ve altındaki ölçülerde çalışılabilir.
Ardından aşağıdaki kod gibi media etiketi kullanarak çözünürlük belirterek css dosyamız yardımı ile ekrana özel css kodları kullanacağız.
@media screen and (max-width: 480px)
Yukarıdaki kod ile maksimum çözünürlüğü 480px olan ekranlara duyarlı tasarımları yapabilirsiniz.
Responsive Tasarım Teknikleri ve İncelikleri
Responsive tasarım uygulamalarını yaparken kullanılabilecek bir kaç teknik ve incelik vardır. Bunlardan biri komple css kullanmak yerine bootstrap gibi framework kullanımı ile daha kolay bir şekilde mobil tasarımlar yapabilirsiniz.
Bootstrap ekrana duyarlı tasarımlarda sıklıkla kullanılan bir frameworktür. Özel kodları, görsel kütüphanesi, kolay kullanımı ve temel iskelet yapısı sayesinde hızlı tasarımlar yapmanızı sağlıyor. Izgara sistemi sayesinde mobil uyumlu web siteleri yapmanızı sağlar.
Bootstrap kullanımında bilmeniz gereken en önemli nokta bu framework’ün 12’li ızgara yapısını kullanmasıdır. Bu sistem bir web sitesinin enini 12 eşit parçaya bölerek tasarımların bu doğrultuda yerleşmesini amaçlar. Açık kaynak kodlu bu paket sayesinde kendi responsive tasarım sitelerinizi oluşturabilirsiniz.
Reponsive tasarım konusunda bir bilmeniz gereken temel konuları size anlatmaya çalıştık. İlerleyen yazılarımızda mobil tasarım konusuna dair daha geniş örnekler yapacağız.