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