X

Lütfen Para Birimi Seçiniz

Türk Lirası $ US Dollar
X

Lütfen Para Birimi Seçiniz

Türk Lirası $ US Dollar

 

Responsive tasarım nedir? Responsive, uyumlu web tasarım anlamına gelir. Son birkaç yılda ismini sıkça duyduğumuz bu web tasarım, ilk olarak 2010 tarihinde ortaya çıktı ve o zamandan beri dünyada ve ülkemizde popüler oldu. Responsive tasarım, web sitesi tablet ve mobil cihazlardan girildiği zaman sitenin içindeki yazı, resim gibi elementlerin ekranın genişliğine göre yeniden şekillenerek ekrana tam oturması ile oluşur. Genelde mobil, desktop ve tablet versiyonu olarak 3 aşamalı biçimde tasarlanır. Web sitelere mobil cihazlardan girildiği zaman ziyaretçiler siteyi gezmekte ve görüntülemekte güçlük yaşarlar. Eğer girmiş oldukları site responsive veya mobil site değilse, okumak istedikleri bölümü ancak zoom yaparak okuyabilirler, kısıtlı bir alanı görüntüleyebildikleri için kullanım zorluğu çekerler. Sitede yer alan menüleri gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genelde gitmek istedikleri link bulunmaktadırlar. Responsive web sitesi tasarımı hazırlayabilmek için güncel olan web yazılım dillerinden CSS3, HTML5 bu dillerin kodlama yapısından fayda sağlanacağı gibi grid tasarım kullanılmasında da büyük önemi vardır. Grid yapıda hazırlanmış olan tasarımın mobile duyarlı bir şekilde kodlanmasında hazır framework sistemleri kullanılabilir olmaktadır.

Responsive Nedir?

Son birkaç yılda ismini sıkça duyduğumuz responsive tasarım Türkçe'ye uyumlu ve duyarlı tasarım şeklinde çevrilebilir. 2010 tarihinde ortaya çıkmasına rağmen birkaç yıl içerisinde hem ülkemizde hem de dünyada oldukça popüler olan responsive tasarım, bir web sitesinde masaüstü bilgisayar, tablet, akıllı telefon gibi büyük ya da küçük ekranlı cihazlardan giriş yaptığınızda; sitenin içinde bulunan resim, yazı gibi içeriklerin giriş yapılan cihazın ekran genişliğine göre yeniden şekillenerek cihaz ekranına tam uyumlu hale gelerek kullanıcı ile buluşmasını sağlar. Responsive tasarımı, kullanıcıların gördüğü cihazın çeşidine bağlı olarak, kendisini yanıtlayan ya da yeniden boyutlandıran bir web sayfası olarak düşünülebilir.

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

Responsive tasarım nedir? Temalar yardımıyla mobil cihazlarda Google gibi programlarda siteler arası geçiş yaparken önümüze çıkan pek çok sitede responsive vardır. Bu sitelere girdiğiniz cihazın boyutu ve çözünürlüğü ne olursa olsun siteye giriş yaptığınız zaman yine de sitenin temasında bozulma olmayacaktır. Sizde bu yöntemle sitenizi kullanıcılara uyumlu hale getirebilirsiniz.

Responsive tema hazırlamak için birkaç yöntem mevcuttur. Bu yöntemler şunlardır;

  • Bootstra: Youtube ve Udemy Üzerinden birçok videosu bulunur. Beğendiğiniz bir tanesini seçerek izleyip en kolay yoldan sitenizi Responsive bir şekilde tasarlamış olursunuz.
  • % ile Çalışma: Yüzdeyle çalıştığınız zaman başka hiçbir şey yapmanıza gerek yoktur. Ama tek sorun % ile çalışmanız “px” ile çalışmaktan biraz daha zordur.
  • @media Etiketi: Temanızın her çözünürlükte aynı olarak düzenlersiniz. Temalarda “px” ile çalışanlar için tercih edilmesi gereken bir yöntemdir.

Responsive Tasarım 

Web sitesi geliştirirken “px” ile ilgili çalışanların sabit ölçü değerleri vardır. Bu ölçülerle her kullanıcıya daha kolay bir şekilde ulaşılır.

  • Mobil Tasarımlar için 768 px boyutundan daha küçük ölçüler ile çalışma yapmalısınız.
  • Masaüstü Tasarımlar için 992 px boyutundan daha küçük ölçüleri kullanarak çalışma yapmalısınız.
  • Tablet Tasarımlar için 768 px boyutundan daha küçük ölçüler ile çalışma yapmalısınız.
  • Büyük ekranlar da 1200 px boyutundan daha küçük ölçüler yardımıyla çalışma yapmalısınız.

Responsive Tasarım Teknikleri Nelerdir?

Responsive tasarım nedir? Responsive tasarım teknikleri şunlardır;

  • Responsive tasarlanırken birçok teknik bulunmaktadır. Bu teknikler web sitesi geliştirirken size çok yardımcı olacaktır.
  • Responsive kolay yoldan çalışmak isterseniz, bunu Bootstrap ile çalışmalısınız.
  • PX ile çalışmak çoğu zaman daha rahat geliyor. Sizlerde rahatınıza düşkünseniz PX ile çalışmalısınız ama @media ile tasarlamayı öğrenmeniz gerekir.
  • Temanız için bir resim kullanacaksanız vektörel çizilmiş bir resim olmalıdır. Bu sayede resmi ne kadar küçültüp büyütseniz de resmin kalitesinde herhangi bir sorun olmayacaktır.
  • Adsense' deki reklamlarınızı mobil uyumlu hale getirin.
Top