Sitemizdeki bağlantılar aracılığıyla satın aldığınızda ortaklık komisyonu kazanabiliriz. İşte nasıl çalışıyor?.
Tasarımcı arkadaşlarıma tamamen duyarlı siteler oluştururken karşılaştıkları sorunları soran bir anket oluşturdum. Bu makale, bildirdikleri en yaygın sorunları listeleyecek ve sonraki projelerinizde dikkate almanız gereken önerilerle birlikte olası çözümler sunacaktır.
Burada yer alan bilgiler yüzlerce anket yanıtına dayanmaktadır (eğer eklemek isterseniz kendi yanıtlarım, anketin kendisi hala açık) ve kendi çalışmalarımda da karşılaştığım sorunlar en Offroad kodu.
Lafı daha fazla uzatmadan, en yaygın duyarlı tasarım sorunlarının neler olduğunu açıklayalım... ve bunlardan nasıl kaçınabileceğinizi öğrenin.
Yeni başlayan metodoloji
Duyarlı tasarımın halihazırda iki yıldan fazla bir süredir var olmasına rağmen, birçok açıdan hala yeni başlayan bir metodolojidir. Tasarımcılar sürekli değişen cihazlar, kod çerçeveleri ve komut dosyalarıyla karşı karşıyadır. Elbette, duyarlı oluşturma sürecini yönetmek için müşterilerle yeni bir şekilde çalışma ihtiyacı web siteleri.
Bunların tümü, ankete katılanlar tarafından bildirilen en yaygın sorunlar arasında yer alıyor:
- RWD'yi müşterilere açıklama
- Statik tasarım aşamasının olmaması
- Navigasyon
- Görüntüler
- Tablolar
- Eski sabit genişlikli siteleri dönüştürme
- IE'nin eski sürümlerinin kullanıcılarına ne sunulacak?
- Test süresi ve maliyeti
01. RWD'yi müşterilere açıklama
Bir web sitesi tasarlamanın 'eski' süreci oldukça doğrusal bir süreçti ve bu da müşterilerin anlamasını kolaylaştırıyordu. Bir brifing aşamasından geçerler, ardından bir tür tel çerçeveleme ve yapısal planlama aşamasından geçerler ve ardından seçebilecekleri piksel mükemmelliğinde bir dizi görsel elde ederlerdi. Ancak bunlar imzalandığında sitenin kendisi tamamlanacaktı.
Eminim çoğunuzun fark ettiği gibi, bu süreç artık hiç de uygun değil. Pek çok tasarımcının uğraştığı şeylerden biri, müşterilere artık gerçekte bir 'görsel sahne'nin olmadığını nasıl açıklayacakları.
Duyarlı tasarım çok daha akıcı bir süreçtir ve tel çerçeveleme, çizim ve prototip oluşturma genellikle daha güçlü araçlardır.
Çözüm: Duyarlı tasarımın gücünü gösterin
Duyarlı tasarımı açıklamanın daha iyi bir yolu müşteriye gerçekte neler yapabileceğini göstermektir. Sadece kesme noktalarından, medya sorgularından ve çoklu cihaz işlevselliğinden bahsetmeyin; bazıları çok bariz görünse bile, bu terimlerin ne kadar anlamsız olabileceğini unutmak kolaydır.
Bir siteyi çeşitli cihazlarda gösteremiyorsanız, tipik duyarlı kesme noktalarını taklit eden birçok siteden birinin demosunu yapmayı düşünün. duyarlı.is veya Duyarlı Düzenler, Duyarlı Bir Şekilde Tel Çerçeveli (yukarıdaki resimde).
02. Statik tasarım aşamasının olmaması
Daha önce de belirttiğim gibi tasarımcıların bildirdiği en büyük sorunlardan biri, duyarlı tasarımdan en iyi şekilde yararlanmak için 'eski' tasarım sürecinde bir değişikliğin gerekli olmasıydı.
Tasarımcılar, statik ekran görüntüleri oluşturmak yerine, tarayıcıda 'tasarım yaparak' hızlı eskizlere, tel çerçevelemeye ve hızlı HTML ve CSS prototipleri oluşturmaya her zamankinden daha fazla güveniyorlar.
Çözüm: Daha fazla öğe ve daha az düzen tasarlayın
Olası çözümlere geçmeden önce süreçlerin ve iş akışının farklılık gösterebileceğini belirtmeliyim. Sonuç veren her şeyi kullanmanın büyük bir hayranıyım, bu nedenle sürecinizden memnunsanız, sizin ve müşterileriniz için neyin işe yaradığına bağlı kalın.
Ancak benim kişisel tercihim kağıttan mümkün olduğu kadar normal şekilde yararlanmak, ancak onu farklı boyutlardaki fikirleri test etmek için kullanmaktır. Takip ederseniz hızlı ve kolaydır Sam Hardacre'ın duyarlı eskiz için harika önerisi.
Ayrıca tarayıcıda tasarım yapmanızı ve mümkün olduğunca erken HTML ile çalışmanızı, ardından tam mizanpajlar yerine varlıklar oluşturmak için Fireworks/Photoshop'u kullanmanızı öneririm.
Daha büyük projelerde her şeyin çerçevesini oluşturmakta bile zorlanabilirsiniz. Burada bir ipucu almak iyi bir fikirdir. Dan Mall'ın Crayola.com'un yeniden tasarımına ilişkin örnek olay çalışması ve hareket ettirebileceğiniz kağıt/tel kafes widget'ları oluşturun. Size büyük bir esneklik sağlar ve müşterilerin sağlam girdi sağlamasına olanak tanır.
Başkalarının kişisel iş akışlarına ilişkin bazı yararlı bilgiler için şuraya da göz atabilirsiniz: Stephen Hay'in duyarlı tasarım iş akışı slaytları veya Yellow Pencil'dan çok ayrıntılı bir genel bakış responsiveprocess.com.
03. Navigasyon
Geçmişte, sitelerdeki gezinme sayfanın üst kısmı boyunca yatay olarak veya bazen sayfanın sol aşağısında olma eğilimindeydi. Artık daha kapsamlı bir yaklaşıma ihtiyaç var.
Ankete verilen ve navigasyondan bahseden yanıtların sayısı, bunun çözülmesinin ne kadar zorlu bir sorun olduğunu yansıtıyor; basit bir hazır çözümü olmayan bir sorun.
Çözüm: İyi ve tutarlı bir tasarım kullanın
Gezinme stratejisinin seçimi geniş kapsamlı bir karardır ve bir takım tasarım hususlarının yanı sıra sitenizin içerik ve bilgi mimarisine dayanmalıdır.
Basitçe bir komut dosyası veya demo indirmek yerine, öncelikle nasıl çalıştığını, neyi neden yaptığını ve en önemlisi, oluşturduğunuz site için nasıl çalıştığını değerlendirmenizi öneririm.
Aşağıdaki makaleler burada yararlı olabilir:
- Duyarlı gezinme modelleri, Brad Frost tarafından
- Gezinme için standart bir gösteri gezinme simgesine ihtiyacımız var, Andy Clarke
- Stu Robson'dan menünüzün kontrolü ele almasına izin vermeyin
- Palantir'den Michael Mesker tarafından duyarlı web tasarımında ölçeklenebilir gezinme modelleri
Ve unutmayın: Navigasyonunuzun mümkün olduğu kadar çok cihazda ve mümkün olduğu kadar çok durumda nasıl çalıştığını test edin. Gezinmenin mantıklı bir şekilde çalışmadığı sitelerle bu kadar sık karşılaşmam şaşırtıcı. Bunlardan birini yaratmaktan sorumlu olmayın.
04. Görüntüler
Navigasyona çok benzer şekilde, seçenekler kümesi Duyarlı tasarımlarda görüntülerin işlenmesi için mevcut olan ortam inanılmaz derecede parçalıdır. Henüz, W3C topluluk grubu bir spesifikasyonu desteklemedi, bu eksik işlevselliği doldurmak ve cihazlara uygun varlıkları sunmak için geniş bir komut dosyası yelpazesinden oluşan kişisel bir seçimle karşı karşıya kalıyoruz.
İşleri daha da karmaşık hale getirmek için tasarımcıların şunları da dikkate alması gerekir: yüksek piksel yoğunluklu ekranlara sahip yeni nesil cihazlar yeni iPad ve Macbook Pro'nun yanı sıra çeşitli Apple dışı donanımlar gibi.
Yüksek piksel yoğunluğuna sahip cihazlardaki grafiklerin, yetersiz ölçeklendirildiklerinden dolayı bulanık görünmemesini sağlamak için, kod gibi resimler ve simgeler de mümkün olduğunca esnek olmalıdır.
Çözüm: Komut dosyaları, SVG ve simge yazı tipleri
Duyarlı görseller için 'resmi' bir çözüm olmasa da, gerçekten harika çözümler var Bunların şu anda kullanılması iyi ve çok fazla hack'e veya geçici kod çözümüne başvurmadan bize olumlu sonuçlar veriyor.
Uyarlanabilir görselleri ve farklı piksel yoğunluğuna sahip ekranları ve cihazları kapsayacak şekilde projelerinizde dikkate almanız gereken teknikler ve kaynaklardan bir seçkiyi burada bulabilirsiniz:
- Matt Wilcox'tan Uyarlanabilir Görüntüler
- Bugün SVG grafiklerini kullanmak, Josh Emerson
- SVG ile çözünürlük bağımsızlığı, yazan David Bushell
- Web sitenizi Retina ekranlar için optimize etmek üzere CSS sprite'larını kullanma, Yazan: Maykel Loomans
- Akış Şeması: Web sitenizi nasıl yeniden yapılandırabilirsiniz? Yazan: Thomas Fuchs
- Sembol seti simge yazı tipleri, Oak Studios'tan
Sonraki sayfa: dört duyarlı web tasarımı problemi daha
