Anasayfa / Web Tasarım / Responsive Web Tasarım

Responsive Web Tasarım

Tüm ekran çözünürlüklerine uygun davranan tasarımlara responsive web tasarım denir. Responsive özelliğe sahip olan siteler tüm ekran boyutlarına uygun bir şekilde çalışmaktadır. Buda hem kullanıcılar açısından hem de SEO açısından oldukça önemli bir kriterdir. Bu kriteri yerine getirerek hem mevcut kullanıcıları hem de yeni kullanıcıları sitenizde uzun süreler tutmayı başarabilirsiniz.

Ülkemizde yapılan araştırmalara göre yaklaşık olarak 35 milyonun üzerinde internet kullanıcısı olduğu varsayılmaktadır. Bu kesimin %40’ından fazlası internette gezinti yapmak için mobil cihazları kullanmaktadır. Ki bu oran her geçen yıl artmaktadır.

Responsive Web Tasarımın Faydaları Nelerdir?

  • Şüphesiz ki responsive yani duyarlı olan web sitelerinin kullanımı oldukça kolaydır. Yani siteye giriş yapan ziyaretçiler ekranı büyütmek için parmaklarını kullanmaya gerek duymaz.
  • Reponsive olan web sitesinde mobil için ayrı bir tasarım yapmaya gerek yoktur. Önceden masaüstü ve telefon için ayrı bir tasarım yapılırdı fakat bu sorun web teknolojilerinin gelişmesiyle beraber ortadan kalkmıştır. Aynı şekilde buda daha az maliyetle bir siteye sahip olunmasını sağlamıştır.
  • Duyarlı olan web sayfalarında URL yapısı dinamik olarak değişmemektedir. Buda SEO açısından oldukça önemli bir kriterdir. Bu kriteri yerine getiriyor olmanız arama sonuçlarında hızla üst sıralara çıkmanızı kolaylaştıracaktır.

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

Responsive tasarımlı bir web sitesine sahip olmak için Acarnet ile iletişime geçmeniz yeterli. Fakat kendi projelerinizi geliştirmek veya var olan siteniz üzerinden düzenleme yapmak istiyorsanız bu aşamada HTML ve CSS dilini bilmeniz gereklidir. Bu iki dili temel seviyede bildiğinizi farz edelim.

Öncelikle aşağıda bulunan kodu HTML sayfanızın “<head>” etiketlerinin arasına eklemeniz gereklidir. Bu kod ekran boyutunu cihazın çözünürlüğüne göre ayarlayacak ve parmaklar vasıtasıyla gerçekleştirilen küçültme işlemini engelleyecektir.

<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0″>

Yukarıdaki kodu sayfanıza dahil ettikten sonra CSS dosyalarınızda @media etiketini kullanarak reponsive olmayan alanları duyarlı bir hale getirebilirsiniz.

@media only screen and (max-width:980px){
.col{
       width:50%;
 }
}

Yukarıda “col” isimli sınıfın 980px ve aşağısında %50 bir genişlikte olması gerektiğini belirttik. Yani burada çözünürlük 980px’in üstüne çıktığında aşağıda belirtilen kodlar çalışmayacaktır. Aslında ne kadar örnek verirsek verelim bunu uygulamalı bir şekilde izlediğinizde daha iyi anlayacaksınız. Konuya dair tüm detayları aşağıdaki videodan uygulamalı bir şekilde inceleyebilirsiniz.

Sitenizin responsive olması, o siteyi profesyonel bir hale dönüştürecektir. Fakat profesyonellik için bu yeterli olmayabilir. Profesyonel web tasarım isimli yazımızda bu konuyu detaylarıyla birlikte ele aldık. Sizlerde bu yazımızı okuyarak tam anlamıyla profesyonel bir web sitesine sahip olabilirsiniz.

hakkında Alper Acarlı

Acarnet'te Entrepreneur

Bu Yazıya da Bakabilirsiniz

Yapısal Veri Nedir?

Birçok kişi yapısal veri nedir gibi sorularla karşı karşıya kalmıştır. SEO ile doğrudan bir ilişkisi …