Duyarlı Tasarımda Sık Karşılaşılan Krizler ve Bunları Nasıl Çözebilirsiniz?

Sağlam taban ve su kadar esnek yerleşim elemanlarında hiçbir şey ayarlanmadığında, geleneksel anlamda 'tasarım' bile değildir. Duyarlı tasarım, piyasadaki cihazların akışıyla uyumludur (ve bunlara uyum sağlar). Herkes deniyor ve bir web tasarımcısı olmak hiç bu kadar harika olmamıştı.

Duyarlı tasarım için o kadar çok uygulama var ki, tek bir sete bakıp onlara en iyisi demek zor. Bir 'Ne Yapmalı' listemiz olamaz. Ancak birbirimizin hatalarından ders alabiliriz.

İşte duyarlı bir web için tasarlamayı öğrendiklerim:

Kitleniz için Tasarım. Kendin değil.

Süper hızlı, mükemmel tasarlanmış bir web sitesi ve bu mobil kullanıcılar için harika bir UX ile büyük ölçüde Hintli bir hedef kitleye ulaşmaya çalıştığınızı varsayalım. Orada 1,2 milyar insan var; Anında, büyük bir vuruş olmalı. Rakamlar sizin lehinize. Ya da oradaki insanların ancak %13'ünün akıllı telefonları olduğunu bilseydiniz öyle olurdu. (Kaynak: Google Mobil Gezegen).

Bu, kitlenizi öğrenmenin ve anlamanın çok önemli olmasının nedenlerinden sadece bir tanesidir.

Kültürel çeşitlilik, yaş, cinsiyet, meslek, dil, popüler cihazlar vb. markanızı/web sitenizi oluşturacak veya bozacak çok önemli faktörler olabilir.
Bu göründüğünden daha kolay.

Tasarımcıların kim için tasarladıklarını gözden kaçırdıkları bilinmektedir.

Bu nedenle, elinizde bir UX mimarınız yoksa, bunu kendi başınıza araştırmanız iyi olur. Eninde sonunda işinize yansıyacaktır, bu yüzden omuz silkmeyin ve bunun sizin işiniz olmadığını söyleme.

Mobil cihazlara özel numaralar için Google'ın Mobil Gezegenini kullanın. Müşterilerinizi hedef kitleleri hakkında sorgulayın.

Kendinizi kitlenizin yerine koyabilirseniz, sezgisel olarak kullanıcı dostu tasarımlar oluşturabilirsiniz. Bu roket bilimi değil, sadece temel insan ruhu.

Bir 'tel kafes'in Bir Hikayeye İhtiyacı Var

Duyarlı tasarım projeniz etkileşimler olmadan tamamlanmayacaktır. Aynısı maketiniz için de geçerlidir.

Tasarımınız (muhtemelen) içeriğin göründüğü ve başka hiçbir şeyin olmadığı tek sayfalık bir konser olmayacak.

Etkileşim yok, durum yok, animasyon veya efekt yok: temel olarak sitenizi başarılı (veya düşünmeden kullanılırsa başarısız) yapabilecek her şey çıkarılır. Style Tiles haklı olarak bir klasik olsa da (kurucusunun dediği gibi, “Tasarım etrafında bir konuşma başlatmak için”) günümüzün tasarım terimlerinde sofistike olamayacak kadar basittir.

FİKİRLERİNİZİN İNTERAKTİF PROTOTİPLERİNİ YARATMAK İÇİN BİRAZ ZAMAN AYIRIN. ÖN UÇ GELİŞTİRMEYLE BAŞLAMADAN ÖNCE BUNLAR ÜZERİNDE GENEL İŞBİRLİĞİ YAPIN.

Sadece fikirleri etrafa saçmayın. Hikaye anlatımını duydunuz mu?

Prototipiniz ve sezgilerinizden başka hiçbir şey olmadan müşterilerinize duyarlı, etkileşimli bir hikaye anlatın.

Bu 'hikayelerin' görsel versiyonlarını oluşturmak için Balsamiq, Axure, UXPin vb. araçları kullanın. Kelimelerle hayal güçlerini okşayın; iyi hazırlanmış bir prototiple besleyin.
Tasarım ve geliştirme çalışmalarınızı daha sonra için düzene koymaya hizmet edecek ve size bağlı kalacağınız bir şekilde tanımlanmış bir yol sağlayacaktır. Ve bir Bonus olarak: İlk izlenimler hala önemlidir. İyi bir prototip, proje hakkında hevesli olduğunuzu gösterir.

İçerik: İlk, Görünür ve Uyarlanabilir. Her zaman

Duyarlı hale gelmenizin nedeni, mesajınızın eşit şekilde erişilebilir ve cihazdan bağımsız olarak daha geniş bir erişime sahip olmasıdır.

İçeriğinizi gizlemek zorunda kalarak duyarlı tasarımın tüm amacını ortadan kaldırırsınız.

Mobil kitleniz yine de verileri indirecek, peki onu saklamanın anlamı ne? Bir içerik öğesi envanteri oluşturun. Hangi öğelerin tüm sayfalarda, hangilerinin belirli öğelerde olduğunu belirleyin. Örneğin, CTA düğmeleriniz her sayfada veya belirli sayfalarda (açılış sayfası, ilgili kaynaklar sayfaları vb.) olabilir.

Önce içerik öğelerini koyarak başlayın ve ardından oradan oluşturun. Çanlar ve ıslıklar sonunda gider.

İlk olarak: Kullanıcı Hedeflerini ve web sitesinden ne istediklerini anlayın ve ardından içeriğinizi cihazlarında kolay erişim için uyarlayın.

Bir mobil sayfaya sığdırmak için milyonlarca kelimelik bir makaleyi sıkıştırmak yerine, kullanıcılarınıza sonsuz kaydırma yapmadan bilgileri inceleme şansı verin. Ve ön uç veya sunucu tarafı komut dosyası oluşturma, bunun (gerçek) yanıtı değildir.

Bunu yapmanın iyi bir yolu, önizleme için kısa ve doğru bir özet kullanmaktır .

Kullanıcının, geri kalanı için içeriğinizde gezinmek isteyip istemediğine karar vermesine izin verin. TL; DR herkes arasında yaygındır (hatta medya kuruluşları bile, bu yüzden gerçekleri kontrol etmeden ve sadece abartıya dayanan hikayeler yayınlıyoruz). Bu yüzden içeriğinizin sonuna bir bölüm ekleyin ve bunu kolaylaştırın.

İkincisi: Kullanıcılara yalnızca parçalı bir versiyonu yerine tam bilgi verin.

Duyarlı sütunlar ve yazı tipleri kullanın. Akışkan veri tabloları için Zurb Duyarlı Tabloları kullanın. Ortamı sıkıştırın (performans artışı için CDN ve önbelleğe almayı kullanın).
İçerik sizin mesajınızdır. Cihaz boyutundan bağımsız olarak net ve görünür olduğundan emin olun.

Bonus: Önce içerik, içerik hiyerarşisini aklınıza getirir ve bu, gezinmeyi tasarlamayı daha sorunsuz bir süreç haline getirir.

Cihaz Sınırlamalarına ve Yeteneklerine Saygı Duyun

'Önce mobil' veya 'aşamalı geliştirme' hakkında konuştuğumuzda, en düşük minimumu gerçekten anlıyor ve barındırıyor muyuz? İşte 'çıplak minimum' ne olması gerektiğine dair bir özet:

• Kullanılabilir Ekran Genişliği: 120 piksel, minimum.
• İşaretleme Dili Desteği: XHTML Basic 1.1, application/xhtml + xml içerik türüyle birlikte sunulur.
• Karakter Kodlaması: UTF-8
• Görüntü Formatı Desteği: JPEG, GIF 89a.
• Renkler: 256 Renk, minimum.
• Stil Sayfası Desteği: El tipi ve tüm medya türleri ile birlikte CSS Düzey 1, CSS Düzey 2 @media kuralı
• HTTP: HTTP/1.0 veya daha yeni HTTP1.1
• Komut Dosyası: İstemci tarafı komut dosyası oluşturma desteği yok.

Bu özelliklere dayanarak, işlevsel bir tasarım oluşturmak zor değil. Sorun büyütmektir.
Cihaz boyutlarını göz önünde bulundurmak iyidir, ancak bu sadece başlangıçtır, tamamı değil. Komut dosyalarının küçültülmesi ve normalleştirilmesi (performans ve deneyim), yeterli boşluklar için özenle temiz arayüzler tasarlamak (dokunma için), cihazların bağlantı ve yük sınırlamalarına saygı göstermek (performans) ve her zaman titizlikle test etmek burada önemlidir.

Lütfen Yükü Hafifletin

Bu konuda fazla konuşmak istemiyorum (bu konuda pek çok fikrimiz var), ancak daha yüksek sıralamalar ve daha iyi kullanıcı deneyimi için sayfa hızının önemi inkar edilemez.

Basitçe söylemek gerekirse: Sayfanız yavaş yükleniyorsa, kimse sayfanın yetişmesini beklemekle uğraşmaz.

Mobil öncelikli gibi bir yaklaşım aslında bunun için çok iyi çalışıyor. Aşamalı geliştirmede, her şeyden minimum düzeyde başlıyoruz: UI öğeleri, özellikler ve tüm cihazların en dar bant genişlikleri için tasarlıyor olmamız. Mobil öncelikli yaklaşımın yararlarını hâlâ reddedenler, bunun performans ve hızı her şeyden üstün tuttuğunu kabul edeceklerdir.

Ek olarak, medyanızın boyutunu kontrol altında tutmanız gerektiğinin size hatırlatılmasına gerek yoktur.

Bu nedenle, CDN'yi (orta ila yüksek trafikli web siteleri için uygun) ve özellikle sayfa yüklerini hafifleten arka uç geliştirme tekniklerini kullanın. Önbelleğe almayı kullanın. Web için bir JPG görüntüsünü kaydetmeden önce ilgili kutuyu işaretleyerek algılanan performansı (sitenin kullanıcı için ne kadar hızlı 'hissettirdiğini') iyileştirin.

Tasarımınızı yalın ve ince tutun (en azından müşterileriniz ve kullanıcılarınız).

TL; doktor

İşte duyarlı bir web için tasarlamayı öğrendiklerim:

• Bir izleyici için tasarım. Biraz araştırın ve sayılar için Google Mobile Planet'i (ve diğer benzer araçları) kullanın.
• Bir Tel Çerçeve, bir hikaye ile hayata geçirilebilir. 'Prototip', bir cihazın/sistemin ön versiyonu anlamına gelir. Gerçekten işe yarayan bir şey yapın. Etkileşimli prototip oluşturma araçlarını kullanın.
• İçeriği görünür ve uyarlanabilir hale getirin. Yine de indirileceği zaman içeriği cep telefonlarından gizlemeyin. Orijinal bir gönderi varsa, cep telefonlarında okumak için daha uygun olan kısa ve alakalı bir özet ekleyin.
• Cihaz sınırlamalarına ve yeteneklerine saygı gösterin. Fare/Parmak dokunuşu tartışmasını bir yana veya boyutları bir kenara bırakın, hedef kitleniz tarafından kullanılan minimum cihaz özellikleri için tasarım yapın.
• Performansa dikkat edin. Sadece daha iyi arama sıralamaları için değil, aynı zamanda deneyim için de.

Yazar Biyografisi: Lucy Barret, HireWPGeeks Ltd. ile ilişkilidir. HTML'den WordPress'e dönüştürme hizmetleri sağlar ve kendisine yardımcı olacak uzman geliştiricilerden oluşan bir ekibi vardır. Aynı zamanda tutkulu bir blog yazarıdır ve bilgilerini büyük WordPress topluluğuyla paylaşmayı sever. Şirketini Facebook ve Google+ gibi sosyal medya ağlarında takip edin.