Duyarlı Tasarım: İlk Kez Doğru Nasıl Yapılır

Bilgilendirme: Desteğiniz sitenin çalışmaya devam etmesine yardımcı oluyor! Bu sayfada önerdiğimiz hizmetlerden bazıları için bir başvuru ücreti alıyoruz.


1939 anılarında, Rüzgar, Kum ve Yıldızlar, Fransız yazar ve aristokrat Antoine de Saint-Exupery, “Bir tasarımcı, ekleyecek hiçbir şey kalmadığı zaman değil, götürecek bir şey kalmadığında mükemmelliğe ulaştığını biliyor.” Ünlü havacı ve Küçük Prens yazarı Bilgi Çağını görmek için yaşamadı, ancak yine de siber uzayın inovasyon sınırı olarak gökyüzünün yerini aldığı bir dünyada sözleri yankılanmaya devam ediyor.

Aslında, mevcut içeriğin zenginliği katlanarak genişlese bile dikkat süreleri küçülürken, Saint-Exupery’nin “daha ​​az daha fazladır” yaklaşımı her zamankinden daha önemlidir. İşletmeler, bir mobil ziyaretçiyi web sitelerine çekmek için ortalama pencere beş saniyeden az olduğunda, atasözü çalısından geçme lüksüne sahip değildir. Artık her bir doların beş sentinden fazlasının çevrimiçi olarak harcandığı düşünüldüğünde, bu saniyelerin her birini saymanız sizi uyandırıyor.

Sadece saygın bir barındırma sağlayıcısı bulmak ve temel bir web sitesi yüklemek çok daha fazlası. Tüm ziyaretçilerin ihtiyaçlarına cevap veren bir site oluşturmalısınız. (Web sitelerinin ve web barındırma hizmetlerinin nasıl çalıştığını anlamak için yardıma ihtiyacınız varsa, lütfen barındırma için resimli kılavuzumuza bakın).

Bir ziyaretçinin dikkatini çekmenin ve pencereyi açık tutmanın (ve sayfanızı işaret etmenin) anahtarı duyarlı tasarım. Pazar yeri hızlı bir şekilde PC sonrası dünyasının çok önemli bir parçası haline geliyor ve daha fazla kullanıcı haberlerini aldıkça, eğlencenin tadını çıkarırken ve tabletler ve akıllı telefonlarla alışveriş yaparken web sitenizin sürekli gelişen ihtiyaçlarını karşılamak için tasarlandığından emin olun. kritik. Her şey ziyaretçilerin istediği özellikleri korumakla ve hiçbiri.

Gösterişli grafikler, kafa karıştırıcı gezinme veya yalnızca masaüstü bilgisayar çözünürlüklerine kilitlenmiş sayfalar için yer yoktur. Mobil kullanıcılar İnternetlerinin ekranları için yalın, temiz ve boyutlandırılmış olmasını isterler; bu nedenle gerçekten duyarlı tasarımı destekleyen bir ana bilgisayar (ve platform) seçtiğinizden emin olun.

Daha az şeyden daha fazlasını elde etmenin potansiyel ödülleri büyüktür. Potansiyel müşteriler olarak 2,1 milyardan fazla mobil geniş bant abonesi ile ifade ekonomisi ve maksimum etkileşim çok önemlidir; en iyi tasarım sadece en büyük etkileşimi ve en az “tasarımcı dokunuşunu” sağlayan tasarım olabilir.

Kazanan tasarım

Duyarlı Tasarım: Doğru Yapma

Günümüzün yenilikçi ortamında, web’de gezinmek için kullanılan cihazların sayısı yavaşlama belirtisi olmadan artmaya devam ediyor. Duyarlı tasarım, masaüstünden akıllı telefona kadar cihazlar arasında optimum kullanıcı deneyimi yaratarak tüketicilerin hızlı ve eğitimli satın alma kararları almasını kolaylaştırır.

Duyarlı Tasarım Neden Bu Kadar Önemli??

2,1 milyar mobil geniş bant aboneliği var.

Amerikalı yetişkinlerin% 87’sinde cep telefonu var.

% 55’i cep telefonlarını çevrimiçi olmak için kullanıyor,% 31’i çevrimiçi olarak bilgisayar veya başka bir cihaz yerine telefonlarını kullanıyor.

Amerikalı yetişkinlerin% 45’inin akıllı telefonu var,% 90’ı telefonlarını çevrimiçi olmak için kullanıyor.

Amerikalı tüketiciler günde ortalama 1,4 saat bir mobil cihazda internette gezinirken.

Cep telefonu sahiplerinin% 37’si ve akıllı telefon sahiplerinin% 64’ü telefonlarını çevrimiçi haber almak için kullanıyor.

Tablet kullanıcılarının% 60’ı mobil web’de haberleri bir uygulama yerine okumayı tercih ediyor.

Akıllı telefon kullanıcılarının% 79’u telefonlarını alışveriş konusunda yardımcı olmak için kullanıyor.

Kullanıcıların% 71’i mobil sitelerin masaüstü sitelerinden daha hızlı olmasa da daha hızlı yüklenmesini bekliyor.

Mobil ziyaretçilerin% 74’ü, indirilmesi 5 saniyeden fazla sürerse bir siteyi terk edecek.

Duyarlı Bir Sitenin Anatomisi

Geliştirme aşamasında, duyarlı web sitesi tasarımının 3 teknik bileşeni vardır:

  1. Akışkan Izgaraları – Buna göre ekran boyutuna uyum sağlayan yüzde tabanlı tasarım.
  2. Esnek Görüntüler – İçerdikleri öğelerin dışında görüntülenmelerini önlemek için göreceli birimler halinde boyutlandırılmış resimler.
  3. Medya sorguları – Görüntülenen tarayıcının boyutuna göre sayfaya CSS kurallarını uygulamanın bir yolu.

5 anahtar tasarım öğesi duyarlı bir e-ticaret, mümkün olan en iyi kullanıcı deneyimini sağlar.

Masthead

Başlık

Temel içeriğe odaklanabilmek için küçük ve basit olmalı, ancak kolayca görülebilir.

Daha fazla tasarım esnekliği sağlamak ve HTTP isteklerini azaltmak için arka plan görüntüsü yerine doğrusal bir CSS gradyanı kullanmayı deneyin.

Amblem

Daha büyük olmalı ve nihai boyutlara göre ölçeklendirilmelidir.

Birincil Gezinme

Veya küçük telefon ekranlarının sağladığı sınırlı alan nedeniyle duyarlı tasarımda çalışırken ana menü zor olabilir.

Tercih edilen menü seçeneklerinin sayısına bağlı olarak bunun üstesinden gelmek için birçok seçenek vardır:

  • Küçük ekranlarda ana navigasyonu değiştiren başlıktaki basit bir menü bağlantısı.
  • Kullanıcıları altbilgiye yerleştirilen gezinmeye yönlendiren bir başlık bağlantısı.
  • Bir menü simgesiyle erişilen ve soldan içeriye kayan ve ana içeriği sağa doğru hareket ettiren bir tepsiyi açığa çıkaran bir sol slayt gezinmesi (Facebook gibi).
  • Sayfanın ana içeriğini kaplayan bir gezinme.

Arama kutusu

Arama kutusu, ziyaretçilerin doğrudan aradıkları şeye atlamasına olanak tanır.

Resim Galerisi

Görüntü Gezinme

Metin tabanlı görüntü navigasyonu yerine, farklı ürün görünümlerinin bir önizlemesini gösterin.

Resimler daha büyük meslektaşlarına bağlanmalıdır.

Ürün resmi

Ürün resminizi sayfanın odak noktası yapın.

Kullanıcıların ürün fotoğrafları arasında dokunma dostu bir şekilde kaydırma yapmalarına olanak tanıyan, dokunmaya duyarlı bir resim döngüsü oluşturmak için Swipe.js adlı hafif komut dosyasını deneyin..

Ürün açıklaması

Ürüne Genel Bakış

Ziyaretçinin ürün adını, fiyatını ve popülerliğini veya derecelendirmesini sağlayarak resmin üstünde (resim kabından önceki işaretlemede) görünmelidir.

Bu şekilde, sayfanın geri kalanının yüklenmesini beklemek zorunda kalmadan aradıkları ürün olup olmadığını belirleyebilirler..

İnceleme Sayısı

İnceleme sayısı, ürün ayrıntılarının altındaki incelemelere atlar.

Bu küçük ayrıntı, telefonlarını alışverişe yardımcı olmak için kullanan akıllı telefon tüketicilerinin% 79’u için çok değerli olabilir ve hatta bir satış yapabilir veya hatta satış yapabilir.

Miktar Alanı, Boyut Açılır ve Sepete Ekle Düğmesi

Paylaş butonu

İçerik ve ürünleri sosyal ağlarda paylaşmak, maruziyeti artırmak için harika bir yol olabilir. Tek tuşla basit tutun.

Altbilgi

Altbilgi Gezinmesi

Ana site navigasyonuna erişim sağlamak, kullanıcının başka bir bölüme atlaması için iyi bir yoldur ve bunları çıkmazda bırakmaktan kaçınır.

Müşteri Hizmet Numarası ve E-posta

Telefonların arama yaptığını unutmayın! Ziyaretçinin ürünle ilgili bir sorusu olabilir ve bir müşteri hizmetleri temsilcisiyle hızlı bir şekilde iletişim kurma yeteneğine sahip olmak, satın alma kararı vermek için ihtiyaç duydukları şey olabilir..

Başa Dön Bağlantı

Yine, her şey kullanıcı deneyimi ve rahatlığıyla ilgilidir!

Kaynaklar

  • Mobil Teknoloji Bilgi Formu – pewinternet.org
  • Mobil İnternet Kullanımı ve Kullanıcı Davranış Trendleri – madmobilenews.com
  • MobiForge – mobithinking.com
  • Neden 2013 Duyarlı Web Tasarım Yılı – mashable.com
  • Mobil İlk Duyarlı Web Tasarımının Anatomisi – bradfrostweb.com
  • Akışkan Izgaraları Duyarlı Web Tasarımında Nasıl Çalışır – 1stwebdesigner.com
  • Medya Sorgularının Ötesinde: Uyarlanabilir Bir Web Tasarımının Anatomisi – slideshare.net
  • Duyarlı Web Tasarım Nedir? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map