Responsive Web Tasarım(Design) Nedir?

1

Responsive web tasarımı, farklı ekran boyutları ve çözünürlüklerine uyum gösteren; her türlü ekranda(masaüstü, laptop, tablet, cep telefonu) okunurluğu yüksek web sitesi tasarımları demektir.

Normalde masaüstü PC’ler için hazırlanmış bir web sitesi, mobil cihazlarda zoom out olarak gözükür ve bu boyutunda da okunması oldukça zordur. Aşağıdaki resimde ne demek istediğimi anlayacaksınız. Hepsiburada.com’ un ayrıca mobil uygulaması bulunmaktadır ama web sitesini mobil adresinden açmadığınız takdirde aşağıdaki gibi kullanışsız şekliyle görünmektedir.

responsive-olmayan-tasarim


Responsive bir web sitesinde, web sitesi mobil cihazın çözünürlüğüne response edecek(uyum sağlayacak) ve okunurluğu bozulmadan rahatlıkla görünecektir. Aşağıdaki resimde responsive bir web sitesi örneği görmektesiniz. Yukarıdakinin askine kullanıcının okuma rahatlığına uygun bir durumda…

responsive-web-sitesi-ornek

Responsive bir web sitesi yaptırmak; hem masaüstü PC’ lere ve laptoplara tasarım sağlamak hem de mobil uyumlu web sitesi yaratarak tablet ve telefonlarda da uyum göstermek demektir. İşin aslı tek bir tasarımla birçok yerde görünür olmaktır ve farklı platformlara ayrı ayrı web sitesi yaptırmanıza gerek kalmamaktadır. Mobil uygulama tabiki çok farklı bir konudur. Mobil uygulama ile “Responsive Web Sitesini” karıştırmamak gerekir.

Responsive bir web sitesi yaptırmak için birçok sebebiniz olacaktır. Detaylarına şuan girmeyeceğim fakat en büyük sebeplerinden bir tanesi kullanıcı deneyimi için oldukça önemli olmasıdır. Kullanıcı deneyimi, Google gibi arama motorlarında yapılan aramalarda üst sıralara çıkmak demektir. Kısacası Google’da üst sıralara yükselmek için Responsive Web Sitesi yaptırmanız şarttır.

Responsive Web Sitesi Yaptırmak İstiyorum


Responsive tasarım(web sitesi) nasıl yapılır?

Çok basit olarak responsive tasarım yapımını maddeler halinde açıklayacağım. Konular teknik konulardır fakat genel anlamda bahsettiklerimi hayalinizde canlandırabilirsiniz.

  1. Tüm öğelere sabit bir genişlik vermek yerine yüzde oranına göre ayarlamalar yapılmalıdır. Bu şekilde farklı boyutlu ekranlara göre öğeler kendi genişliğini ayarlayacaktır.
  2. Aynı şekilde sabit bir yükseklik verilmemesi gerekir. Responsive tasarımlarda yükseklik için minimum ve/veya maksimum yükseklikler belirlenebilir. Sabit bir yükseklik vermek hatalı olacaktır.
  3. Farklı ekran çözünürlüklerine göre farklı kodlamalar gerekecektir. Gelişen teknoloji ile artık farklı çözünürlüklerde farklı ayarlamalar yapabiliyorsunuz. Mobil ekranda bir web sitesinin stillerini değiştirebiliyor, istediğiniz öğeleri gizliyebiliyor ve daha birçok ayarlamada bulunabiliyorsunuz.
  4. Grid sistemi kullanılmalıdır. Genel tasarımı oluştururken mobil görünümü de dikkate alarak uygun bir yapı yaratılmalıdır. Daha küçük ekranlarda genişlik azalacaktır. Bir satıra iki öğe sığdırırken artık her satırda sadece 1 öğe olacaktır. Bu yapıyı iyi ayarlarsanız, mobil cihazlarda site taslağı bozulmadan aşağıya doğru akacaktır.
  5. Son olarak işi basitleştirmek için Bootstrap veya Materializecss gibi responsive yapıya uygun hazır framework’ler kullanılabilir. Bu framework’ler işinizi oldukça kolaylaştıracaktır. Bootstrap’i oluşturan ekip Twitter’ın ekibi olmakla birlikte Materializecss bir Google ürünüdür. Benim tercihim Bootstrap fakat her ikiside tercih edilebilir.

Yukarıda bahsettiğim konular daha çok responsive kodlama yapacak kişiye yönelik yardımcı bilgilerdir. Sizler içinde en azından kısa bir önbilgi olsun diye belirtmek istedim.


Responsive Tasarım Ölçüleri ve Ekran Boyutları

Genişlik olarak 1140px ve yukarısı için büyük ekran boyutları diyebiliriz. Yani 1140px ve yukarısı, masaüstü ve/veya dizüstü bilgisayar ekran boyutlarıdır.Bu ölçünün üzerinde bir tablet veya telefon bulmak kolay değildir.

Genişlik ve yükseklik olarak; 1366 x 768, 1280 x 800, 1280 x 1024, 1680 x 1050, 1920 x 1080, 2560 x 1080 gibi ölçüler en sık kullanılan bilgisayar ekran boyutlarıdır.

768px ve 992px arası ekranları tablet ekranı olarak düşünebilirsiniz. Elbet daha yüksek veya düşük boyutlu tabletler olabilir fakat bu boyutları en genel kullanım olarak düşünebilirsiniz.

Artık 768px ve altı içinde cep telefonu diyebiliriz. 768px’de geniş bir çözünürlüktür ama gelişen teknoloji bu boyutlarda cep telefonu üretimine olanak sağlıyor. 500px ve 768px çözünürlük yaygın kullanım gibi düşünülürken 500px altı ekranları düşük boyutta sayabiliriz.


Responsive Test

Responsive bir web sitenin mobil cihazlarda nasıl görüneceğini test etmek için Google bir web sitesi oluşturmuştur.

Resizer web sitesi ile sizde responsive test yapabilirsiniz. Tablet ve telefon görüntüleri açısından birebir bir örnek oluşturmasa da büyük anlamda size önizleme sunacaktır.

Bunun yanında web sitenizi bilgisayardan açtığınızda tarayıcı boyutu ile oynayarak farklı çözünürlüklerde web sitenizin nasıl görüneceğini izleyebilirsiniz. Tarayıcıyı boyutlandırmak tam anlamıyla net bir sonuç vermeyecektir fakat ilk test için yüksek bir bilgi sunacaktır.

responsive test için tarayıcı boyutlandırma


Responsive Site Örnekleri

Girdiğimiz birçok site responsive fakat ben hem kullanıcı deneyimi, hem tasarımı hemde responsive uyumluluğu ile beğendiğim birkaç siteyi sizinle paylaşmak istiyorum. Zaten birkaçını sizde biliyorsunuzdur.

Hubspot

Apple Türkiye

MOZ

Microsoft

Nasilyapariz


Paylas.