CSS İpuçları Tasarım

Responsive Tasarımın Önemi Nedir, Neden Kullanılmalı?

Nisa Bengisu

Responsive tasarım, hem bilgisayarlarla hem de tablet ve telefonlarla uyumluluk gösterebilen tasarım anlamına gelmektedir. 2010 yılında çıkan bir tasarımdır, artık her web sitesinde olmazsa olmaz bir özellik haline gelmiştir.

Türkiye’de 2019 mobil kullanıcı sayısının 76.300 milyon olduğunu görmekteyiz. Bu oran Türkiye’nin %93’lük bir kısmına karşılık gelmekte ve ülkemizde telefonlardaki görünümü çok önemli bir hale getirmektedir. Responsive tasarımla yapılan bir sitenin mobil görünümünde site ögeleri alt alta gelecek şekildedir fakat bilgisayarlarda durum daha farklı, resim ve yazılar yan boşluklara biraz daha rahat bir şekilde dağılım göstermektedir .

Responsive tasarlanan bir web sitesinin bilgisayardaki görünümü :

Aynı web sitesinin mobil ortamdaki görünümü:


Responsive tasarlanmayan web sitelerine mobil aracılığıyla girdiğimizde, siteyi tam olarak incelemekte ve aradıklarımızı bulmakta fazlasıyla zorlanabiliyoruz. Responsive tasarım görevine tam da burada başlıyor. Site içeriği bile tam olarak anlaşılmadığı gibi fotoğrafları ve yazıları da ancak ve ancak yakınlaşarak görebiliyoruz .

Responsive tasarım ile yapılan siteler, mobilden açıldığı zaman menüye erişimi daha kolay bir hale getirir, bütün ögeler ekranın orantısına göre tam olarak ekrana sığar ve net bir görüntü elde ederiz. Kısacası bir web sitesine nerden ulaşılırsa ulaşılsın aynı etkiyi bırakması için responsive tasarlanır.

Responsive tasarım için bazı standart değerler:

4 kademeli tasarım için:

Çözünürlük (piksel) Uyum Sağlanılan Cihazlar
Ekran — 1 0 – – 767px Mobil Ekranlar
Ekran — 2 768 – – 991px Dikey Tablet
Ekran — 3 992 — 1199px Yatay Tablet
Ekran — 4 1200px+ Laptop – Masaüstü Bilgisayarlar

3 kademeli tasarım için ( En çok kullanılan ):

Çözünürlük (piksel) Uyum Sağlanılan Cihazlar
Ekran — 1 0 – – 767px Mobil Ekranlar
Ekran — 2 768 – – 991px Dikey Tablet
Ekran — 3 992px+ Yatay Tablet + Masaüstü

Web sitesindeki tüm sayfa ögeleri birbiriyle bağlantılı ve piksel değerine göre değilde orantıya göre boyutlandırılır. Bilgisayarda bir mousepad ve mouse bize kolaylık sağlarken mobil cihazlarda parmaklarımızla işlem yapmamız biraz daha zor oluyor . Web tasarımcısı olarak site için biraz daha dokunmatik düşünmeliyiz.

Siteniz için bir uygulama yapmak istiyor olabilirsiniz fakat günümüzde her cihaz için uyumluluk sağlayan bir uygulama sağlamak günden güne zorlaşıyor ve responsive tasarım bu konuda bize çok büyük avantajlar sağlıyor. Bu nedenle odak noktamızı responsive tasarıma çeviriyoruz. Responsive tasarımın elimden geldiği kadarıyla avantajlarından bahsettim fakat kısa bir biçimde de görmenizi istiyorum tekrardan.

Responsive tasarımın avantajları:

  • Kullanıcıların web sitenizde daha uzun süre kalması
  • Daha ucuz olması ve zaman tasarrufu
  • Arama motorlarında daha üst sırada yer alma
  • Müşteri kitlenizin artması
  • Bakımının kolaylaşması
  • İçeriklere daha rahat ve kolay erişim

CSS kodları içinde nasıl kullanılacağı hakkında kod örneği paylaşmak istiyorum sizinle .  

Bana kalırsa responsive tasarım, web tasarımının olmazsa olmazı. Umarım yararlı bilgiler aktarabilmişimdir, ben de bildiğim kadarını sizlerle paylaşmak istedim.

Bir insan hayata ne kadar uyum sağlarsa o kadar başarılı olabilir ve aynısı web sitemiz için de geçerli 🙂 Uyumlu bir web sitesi her zaman çok daha başarılı olur.



Yazar hakkında

Nisa Bengisu

Nisa Bengisu

Süleyman Demirel Üniversitesi'nde Bilgisayar Mühendisliği okuyorum. Web tasarımı Front - End kısmıyla ilgileniyorum. Bildiklerimle beraber yeni öğrendiğim konuları mutfakta paylaşıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz.
Yorum alanı ile mutfağa katkıda bulunun.

Yorumlar

1 Yorum

Bir yorum yaz

This site uses Akismet to reduce spam. Learn how your comment data is processed.