Web Tasarımına Responsive (Esnek) Yaklaşımlar


Responsive Ne Demek?

Kelime itibariyle responsive; esnek, hassas anlamlarını taşır. Bizim bu kelimeyle işimiz de tam bu anlamlar yüzünden başlıyor. Son dönemlerde web tasarım kavramı ile birlikte anılan responsive kullanılabilirliği hedefleyen bir yaklaşım aslında.

Web tasarımın neresinde esnek olmalıyız? Bu ihtiyaç nereden çıktı?

Teknolojinin gösterdiği gelişim ile seviniyor, yeni çıkan elektronik aletleri merakla inceliyoruz. Fakat bu duruma her zaman sevinmeyen bir kesim var 🙂 Tasarımcılar! Tabletler, akıllı telefonlar, netbooklar, notebookların çeşitli varyasyonları piyasaya sürüldükçe uyumluluk problemleri ortaya çıktı. Sizin dün akşam saatlerinde CSS’e döktüğünüz bir PSD tasarımı yayına verdiğinizi varsayalım. 5 dk sonra elinde tabletiyle gelecek olan arkadaşınız; yayınladığınız tasarıma göz atmak istediğinde ufak tefek kaymaların yanı sıra -kodlarken hiç dikkat etmediyseniz- sitede hareket dahi edemeyebilir. Bu çok vahim bir durumdur. Sitenizin fonksiyonel yapısı, verdiğiniz hizmet ne kadar mükemmel, fevkalede olsa da ziyaretçilerinize en uygun şekilde sunamadıktan sonra bir hiçtir. Yakın bir zamana kadar sadece tarayıcı değişikliğinden oluşan farklılıklar bile yeterince sıkıntı çıkartırken bir de çözünürlük farklılığı çıktı başımıza. 🙂 Bilişim sektörü -web ya da masaüstü farketmez- devamlı gelişen / değişen dinamiklere sahip olduğu için bu sektörde barınmak, işin bir ucundan tutmak istiyorsanız kendinizi de sürekli geliştirmelisiniz. Web tasarım işinde “Ben de varım!” diyorsanız ve şimdiye kadar responsive kavramını hiç duymadıysanız şimdi başlamanın tam zamanı diyorum! 🙂

Peki tasarımlarımızı nasıl esneteceğiz? Nelere dikkat etmeliyiz?

  • Sayfa düzenini olabildiğince basit tutun ve anlamsal bir yapı oluşturun.
  • HTML5 ile döküm yapın. ( Tam anlamıyla esneklik için vazgeçilmezimiz)
  • Normalize stylesheet kullanın.
  • CSS3 ile gelen Media Query‘leri kullanın. (Asıl esneklik burada başlıyor)
  • Sayfa düzeninizi esnek tutun. Net ölçüler vermek yerine yüzdeli değerler vererek işinizi kolaylaştırabilirsiniz.
  • Grid sistemlerini şimdiye kadar duymadıysanız ya da bu sistemler ile ilgilenmediyseniz kurcalamaya başlayın. Hem çalışması zevkli hem de standartlarınızı oluşturmuş oluyorsunuz.
  • Görsellerinizi de göreceli vermeye çalışın. Bu, şekil alabilen tasarımlarda estetiği bozmamış olur.
  • Mobilde yalınlaşın. Tüm site içeriğinizi mobile taşıyamazsınız. Performansı düşürür. Onun için önemsiz kısımları ya da daha az önemli kısımları mobil kullanıcısından gizleyin. Böylece daha yalın ve esnek bir yapı elde etmiş olursunuz.

Uzuk durulması hepimizin hayrına olacak maddeler de var. Bu maddeler; sadece esneklik için değil standart bir yapı ve sürdürülebilirlik için zaten olmalı diyeceğimiz türden maddeler.

  • Karmaşık div’lerden uzak durun.
  • Kesinlikle ve kesinlikle inline style alışkanlıklarınızı en kısa sürede unutun.
  • Tasarımlarınızı gereksiz absolute ve float pozisyonlamalarından arındırın.

Biz bir yandan tarayıcılarla başa çıkmaya çalışırken bir yandan da farklı boyutlu teknolojik aletlerle uğraşıyoruz. Peki tarayıcılar bu gelişmeleri ne kadar takip ediyor?

CSS3’ün sözünü etmişken tarayıcıların da bu yeni standartlara uyumluluk süreçleri daha tamamlanmış değil. Fakat tatmin edici yüzdelere ulaşıldı. Media Query ile ilgili bakacak olursak hep beraber tabloya göz atalım.

Gördüğümüz gibi destekleme oranları %85 gibi ciddi rakamlara ulaşmış durumda. Tabi ki bu oran ne müşteri için ne de tasarımcı için tatmin edici değil. Çünkü dünyayı düşünürsek %15 gibi yüksek oranlarda dolaşan bir kitle hala bizim kapsama alanımız içinde değil maalesef. En kısa zamanda adaptasyon tamamlanır da biz de rahat ederiz kullanıcılar da 🙂

Media Query kullanalım da bu ölçütlendirmeyi neye göre yapacağız?

İnternette yaptığım ufak bir araştırma ile güzel dökümanlar, görseller elde ettim. Bunlardan birkaçını sizlerle paylaşacağım.

Piyasadaki tüm cihazların boyutları baz alınarak oluşturulmuş bir grafik. İşinizi görebilir diye düşünüyorum.

media-query-sizesÜstteki grafiği inceledik, bilgilendik. Tasarım camiasında epeyce ünlü CSS-Tricks.Com sitesinde de güzel bir şablon buldum. Bizim yerimize boyutlara göre media query taslağı oluşturmuşlar ve paylaşmışlar. İnceleyin derim.

Örnek Siteler

https://snipcart.com/
http://www.lucasnikitczuk.com.ar/
http://hellohikimori.com
http://www.bluestepstudio.it/

Son söz…

Biraz yazının uzunluk bakımından ucu kaçtı ama neredeyse çoğu noktaya değindiğimi düşünüyorum. Yazıya başlarken responsive kavramı hakkında bilgisi olmayan biri bu satırlara kadar eksiksiz geldiğinde; en azından Google’da araştırma yapabilecek kadar başlangıç bilgisi kazandıysa yeterli olduğunu düşünüyorum 🙂 Responsive kavramı, bir ürün / hizmet sunacak olmanın yetmediği şu dönemde önemli bir yer edinmiş durumda. Daha fazla kaçmamızın bir alemi olmadığına göre araştırıp öğrenmeye, adapte olmaya devam edelim 🙂

Bu yazı Genel, Nasıl Çalışır?, Web Tasarım kategorisine gönderilmiş ve , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Web Tasarımına Responsive (Esnek) Yaklaşımlar için 5 cevap

  1. efraim der ki:

    teşekkürler

  2. veysel özdemir der ki:

    Türkiye’den e-ticaret alanında responsive design ile yapılmış site var mı?

    • Bilal Baraz der ki:

      Sorunuz üzerine 3 e-ticaret sitesi inceledim. (hepsiburada, trendyol, markafoni)
      Hepsiburada ve Trendyol’un websiteleri mobile uygun değiller fakat uygulamaları var. Markafoninin websitesi mobile uygun idi.

  3. Mahmut der ki:

    Teşekkürler grafik işime yaradı

  4. Geri izleme: Kullanıcının Mobil Olup Olmadığını Öğrenme | Bilal Baraz Kişisel Web Sayfası

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir