Responsive Tasarım ve Eticaret

| Mustafa Abi | 3 Yorum

Responsive Tasarım ve Eticaret

Eticaret mobil satış performansınızı takip ediyorsanız , muhtemelen, sitenize mobil cihazlardan erişen müşteri kitlenizin hatrısayılır rakamlara ulaştığını görebilirsiniz.

Mobil cihazlar , standart web sayfalarını, çözünürlükleri gereği ergonomik sunamazlar ve istenilen bilgiye/ürüne kolay ulaşamayan kullanıcı kitlesi üzerinde olumsuz bir deneyime neden olurlar. Yakın geçmişte, bu problemler Uygulama mağazaları için uygulama geliştirerek , belirli bir kesim mobil kullanıcının ihtiyacını karşılasa da kitlenin tamamını kapsamak adına kesin çözüm “Responsive Tasarım” dır.

Responsive Tasarım Nedir ?

Responsive , Türkçe’de bilinen adı ile “duyarlı tasarım” platform gözetmeksizin internet erişimi olan tüm cihazlara optimal düzeyde içerik erişimi sağlayan şablon yapısıdır. Örnek olarak: Standart bir web sayfası genişliği 960px dir. Bu yapı 1920×1080 bir ekranda çok küçük , 320px( iphone portrait ) bir yapıda çok büyük kalacaktır.

Responsive yapı bu esnada devreye girerek ön tanımlı en yakın ekran çözünürlüğünü kullanıcıya sunarak kusursuz bir eticaret deneyimi yaşatmaktadır.

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

Responsive tasarımın mantığı oldukça basittir. Önceden tanımlı CSS kodlarını yine Önceden tanımlı ekran çözünürlüğü aralığına aktarır. Şöyle ki : Iphone ile yatay pozisyonda web sayfanıza gelen kullanıcılara içeriğinizi uyumlu göstermek için CSS dosyamıza şunu yazıyoruz;

Responsive tasarım @media sorgusu

Artık “.site_ust_kisim_genislik” adlı sınıfa sahip site üst kısmımız iphone’dan ya da yazılan çözünürlük aralığına ( 480px – 767px )  giren cihazlar için 480px gözükecektir. Bu @media sorguları istenildiği kadar arttırılabilir. Genel geçer olarak , iphone(dikey) , iphone(yatay) , Tablet(ipad) ve desktoplar için 4 farklı sorgu oluşturulur ve bunlar üzerinden işlemler yapılır. 

Yapılan @media sorguları , geniş aralıklı olduğu için 500px yada 600px genişlikte bir cihaz sayfaya eriştiğinde kendine ait aralığı bulmakta ve site doğru çalışmaktadır.

Kolay bir yöntemi var mı ?

Eticaret siteleri oldukça karmaşık ve fazla içeriğe sahiptir. Bu nedenle tüm yapınız için ayrı ayrı Css sınıfları , boşluk ayarlamaları sütun boyutları gibi ayarlamaları yapmanız fazla zaman alıcı ve yorucu işlem olacaktır. Bu nedenle Responsive arayüzler tasarlanırken profesyonel dokunuşa sahip arayüz tasarımcıları kendi yazdıkları ya da hazır olan grid sistemleri üzerinde bu işlemi gerçekleştirirler.

Grid sistemleri sayfayı belirli sayıda sütuna bölerek istediğiniz şablon yapısını responsive olarak oluşturmanıza yardımcı olurlar. Grid sisteminde genel şablon yapısının haricinde yalnızca sütun içindeki elemanlara ayrı bir @media sorgusu yazmanız yeterli olacaktır.

Videoda örnek dosyanın önizlemesi gösterilmektedir.

Dikkat edilmesi gereken noktalardan birtanesi de Navigasyon ( gezinti ) menüsünün responsive yapıya göre otomatik oluşturulmasıdır. Onlarca Kategorinin küçük bir mobil cihazdan kolay şekilde erişilebilmesi için Selectbox gibi bir yapıya çevirilmesi gerekmektedir. @Media sorgularının olduğu , Navigasyon menüsünün mobil cihazlara uyumlu hale geldiği

 Örnek Responsive Tasarım   Dosyayı İndir

 

Okuyucu Yorumları

  1. SEOkolog

    13 Ağustos 2013 1:34 am

    Cep telefonundan direkt olarak gerçekleştirilen e-ticaretin boyutlarının çok abartıldığını düşünsem de, cep telefonunda da düzgün gözükmek pozitif bir etki yaratmaktadır.
    Burada önemli olanın site tasarımın Tabletlerdeki performansıdır.

    Her ne olursa olsun responsive design, günümüzdeki internet siteleri için bir “must” haline gelmiştir. Ayrıca SEO bakımından da öneminin tartışılmadığını hatırlatmak gerekir.

    WordPress altyapısını kullanan siteler için yüzlerce farklı seçenekte responsive tasarımlar olduğunu da hatırlatmak isterim.

  2. Suphi

    13 Eylül 2013 2:51 pm

    Bence responsive tasarım, stratejik olarak mobil uygulama üretmekten daha ucuz ve uzun vadeli oluşu sayesinde (update gerektirme) bir standart haline gelecektir.

  3. Ziyaretçi

    20 Eylül 2013 2:16 pm

    Merhaba;

    Günlük 3-4 milyon sayfa gösterimi yapılan bir e-ticaret sitesinde performans açısından olumsuz bir etkisi olur mu?

Siz de bir yorum ekleyin

(*) Gerekli, Email adresiniz yayınlanmayacaktır