Responsive tasarım neden önemlidir sorusuna cevap vermeden önce kelimenin anlamına, responsive tasarımın SEO’ya etkisine, responsive tasarımın tarihine derinlemesine bakmalıyız.

Responsive tasarım nedir?

Türkçe anlamıyla “duyarlı tasarım” demektir. 2010 yılında CSS teknolojisinin gelişmesiyle ortaya çıktı ve o günden beri büyük önem kazandı. Tasarım sektöründe ise kullanımı, tasarlanan bir şablonun tüm ekran çözünürlüklerine duyarlı olup, onlara göre şekillenmesidir. Bu boyutlar için responsive tasarım üç aşamada incelenir: Masaüstü, mobil, tablet.

Kısacası responsive tasarım sitenin ana elementlerinin -yazılar, resimler, butonlar, tablolar- telefon, tablet gibi cihazlardan girildiğinde ekrana doğru şekilde yerleştirilmesidir.

responsive-tasarim-ornekleri

Responsive tasarım neden önemlidir?

Responsive tasarımın bu kadar önemli olmasının sebebi aslında tamamen kullanıcı deneyimiyle yani UX ile ilgilidir. Kullanıcı deneyiminin amacı, ziyaretçiye maksimum faydayı, kolaylığı ve memnuniyeti sağlamasıdır. Peki responsive tasarım neden önemlidir?

Kullanıcı deneyimi neleri etkiler?

Kullanıcılara kolaylık sağlayan bir sitede ziyaretçiler uzun süre kalabilir, siteyi sayfalarca gezebilir. Onları yoran herhangi bir şey olmadığı için memnuniyetleri artar ve siteniz onlar için değerli hale gelir, bu şekilde marka değeriniz artar. Geri dönen ziyaretçileriniz olur bu da sitenizin otoritesinin artmasını sağlar.

  • Sitede kalma süresi
  • Sitede gezinme oranı
  • Marka değeri
  • Site otoritesi

Responsive tasarımın SEO’ya etkisi

Google, mobil cihazların aramalarda en yüksek payı almasıyla birlikte mobil tasarıma çok önem vermeye başladı. Kullanıcının mobil platformda rahatça gezebileceği siteler için tasarımsal standartlar oluşturdu ve bu standartlara uyan sitelere de mobil uyumlu site dedi. Bu siteleri arama sonuçlarında daha üstlere çıkarttı ve haliyle onlar daha çok ziyaretçi çekerek, gelirlerini artırdılar.

Bu test hala var ve bunu mutlaka yapmanız gerektiğini düşünüyorum. Mobil-friendly testi iç SEO için en büyük kriterlerden bir tanesi.

https://search.google.com/test/mobile-friendly adresinden mobil uyumluluk testi yapabilirsiniz. “Responsive tasarım neden önemlidir?” sorusuna bu testin öncesi ve sonrası sonuçlarını karşılaştırarak cevap bulabilirsiniz.

google-mobil-uyumluluk-testi

tum888.com mobil uyumluluk testi

Responsive tasarım ölçüleri

Responsive tasarımın 3-4 farklı çözünürlüğe göre tasarlanması genellikle yeterli olur ancak çoklu platform sizin için önemliyse bunu 6-8 gibi değerlere de çıkarabilirsiniz.

3 kademeli çözünürlüğe göre ise aşağıdaki değerleri kullanabilirsiniz:

 Çözünürlük AralığıUyumluluk
Ekran 10 – 767pxMobil Ekranlar için
Ekran 2768px – 991pxDikey Tablet için
Ekran 3992px ve yukarısıYatay Tablet + Notebook + Desktop için

4 kademeli çözünürlüğe göre ise aşağıdaki değerleri kullanabilirsiniz:

 Çözünürlük AralığıUyumluluk
Ekran 10 – 767pxMobil Ekranlar
Ekran 2768px – 991pxDikey Tablet
Ekran 3992px – 1199pxYatay Tablet + Minibook Laptop
Ekran 41200px ve YukarısıNotebook + Desktop

Responsive tasarım örnekleri

Responsive tasarım dersleri

Responsive tasarım için özel dersler yok, şu an CSS3 ve HTML5 ile birlikte yapılan tüm tasarımlar zaten responsive ve mobil uyumlu tasarımlar.

Ancak web tasarım dersleri için sizlere şimdi vereceğim linklere tıklayıp bakabilirsiniz. Ücretli derslerin yanında ücretsiz olanlar da var.

HTML5, CSS3 ve Bootstrap dersleri – Ücretli
A’dan Z’ye CSS3 dersleri – Ücretli
A’dan Z’ye Front-end dersleri (HTML5, CSS3, Javascript) – Ücretli
HTML, CSS, JS dersleri – Ücretsiz
Detaylı HTML5 ve CSS3 dersleri – Ücretsiz

WordPress responsive tasarım

WordPress’te 2014 sonrası neredeyse tüm temalar zaten responsive temalardır. Bu yüzden özellikle böyle bir yazı yazmak garip olabilir ancak eski bir tema veya özel yapım bir tema kullanıyorsanız ve hala mobil uyumlu wordpress teması yoksa aşağıda sayacağım eklentiler işinize yarayabilir.

WordPress temayı mobil uyumlu yapmak

Jetpack by WordPress eklentisi

WordPress’in yapımcılarının yaptığı bu eklenti ile kolayca temanızı responsive ve mobil uyumlu yapabilirsiniz.

Jetpack eklentisini indirmek için: https://tr.wordpress.org/plugins/jetpack/

WPtouch eklentisi

Responsive tasarım neden önemlidir?” sorusunun cevabını çok önceden yanıtlayan, bu işin en eski eklentisidir.

Wptouch eklentisini indirmek için: https://tr.wordpress.org/plugins/wptouch/

WordPress Mobile Pack eklentisi

Ekstra birçok özellik sunan bu eklentiyle birlikte mobil uyumlu WordPress temasını aktif hale getirebilirsiniz.

Bu yazımızda “Responsive tasarım neden önemlidir?” sorusunu cevapladık, bununla birlikte responsive tasarım nedir?, kullanıcı deneyimi, responsive tasarımın seo’ya etkisi, responsive tasarım ölçüleri, responsive tasarım dersleri gibi diğer şeylere de değindik.

Eğer aklınıza takılan bir şey varsa yorumlarda sormaktan çekinmeyin, işinize yaradıysa arkadaşlarınızla paylaşmayı da unutmayın 🙂

Author

Ben Ege, 19 yaşında biriyim. WordPress, Java, SEO, grafik tasarımı, metin yazarlığı gibi şeylere ilgim var. Yaklaşık 7 yıldır da internet siteleriyle uğraşıyorum. Birçok blogum olsa da TUM888 ile devam ediyorum.

Yorum Yap

Pinle