Tekrarlayan Web Tasarımı: Her cihaza aynı miktarda veri indiriyor mu?


11

Blogumu ve web sitemi wordpress üzerinde sürekli artan mobil kullanıcıları ve tablet kullanıcılarını barındıracak şekilde yeniden tasarlamak istiyorum.

Duyarlı tasarım da duyuyorum. Duyarlı bir web tasarımının bir mobil ekranda olduğu kadar bilgisayar ekranında da aynı miktarda veri indirdiğini bilmek istiyorum.

Ayrıca birçok büyük pazarlama firmasının duyarlı web tasarımına yatırım yapmadığını ve hala mobil cihazlar için optimize edilmiş ayrı bir web sitesi için gittiklerini gördüm. Öyleyse ne yapmalıyım, duyarlı bir web tasarımı veya mobil cihazlar için optimize edilmiş ayrı bir web sitesi?

Yanıtlar:


8

ALA 306'da Ethan Marcotte tarafından tanımlandığı gibi , "duyarlı tasarım" terimi, kullanıcı ekran boyutuna bağlı olarak HTML'nize farklı stil kuralları uygulama tekniğini ifade eder. Duyarlı tasarımın daha fazla açıklaması için, Mike Bollinger'ın güzel bir destesi .

Bu modelde, ekranın küçük mü yoksa büyük mü olduğu konusunda aynı HTML kodunu istemciye gönderirsiniz . CSS başvurulan kaynaklar (resimler öncelikle) belirli ekran çözünürlükleri için gösterilmez Ancak, bunlar olabilir indirilemez. Örneğin, büyük ekranlar high-res.pngiçin CSS'nizde ve küçük ekranlar için kullanabilirsiniz low-res.png- web istemcisi görüntüyü yalnızca etkin stilde indirmeyi seçebilir. (Şu anda her ikisini de indiren en az bir önemli müşteri için @ DBUK'ın yorumuna bakın! Umarım müşteriler canlanır!)

Bu teknik sizin durumunuzda anlamlı olabilir veya ayrı bir mobil site oluşturmak daha anlamlı olabilir.

Farklı cihazlar farklı kullanım bağlamları anlamına gelebilir. Cep telefonları her zaman cebinizde - kullanıcı sitenizi market hattında nasıl kullanır? Onlara tüm siteyi göndermek ister misiniz? Yoksa sadece birkaç özellik? Yoksa tamamen farklı özellikler? Ya televizyonda iPad'lerini rahatça inceleyen kanepedelarsa?

Mobil aygıtlar daha yavaş işlemcilere, daha az belleğe ve daha düşük bağlantı hızlarına sahip olma eğilimindedir (tüm bu "gerçekler" her yıl daha az doğru olur, btw) - kesinlikle performans nedenleriyle ayrı bir mobil site göndermek isteyebilirsiniz.

Genel olarak, sitenin daha statik, metinsel ve içerik odaklı (yani bir blog), mevcut HTML ve duyarlı tasarımı kullanma şansının artması gerektiğini düşünürdüm. Site ne kadar etkileşimli, multimedya ve kullanıcı tarafından yönlendirilirse (örneğin bir mağaza), ayrı siteleri farklı cihaz türleri için uyarlama şansınız o kadar artar.

Ayrıca, bu gün ve yaşta, mobil deneyimin bir site mi yoksa bir uygulama mı olduğu sorusu olduğunu unutmayın .


Sanırım can sıkıcı bir şekilde görüntüler hala indirilecek. Cloudfour tarafından yapılan testler bir örnektir - cloudfour.com/examples/mediaqueries/image-test .
DBUK

@DBUK Düzeltme için teşekkürler - Bu yazının önceki düzenlemelerinde "indirilmeyecek" vs. "indirilemeyebilir" ifadesinde titriyorum. Cevabım daha doğru olacak şekilde güncellendi.
peteorpeter

Benim için yeni, bu yüzden sadece iPhone olup olmadığından emin değilim. Neden web ile hiç bir şey basit değil :(
DBUK

1
@DBUK Gerçekten. Bu teste göre, her iki arka plan stili kuralı da medya sorgularının arkasındaysa, yalnızca düşük çözünürlük indirildiğinde, yalnızca yüksek çözünürlük varsayılan stil kuralı olduğunda ve daha sonra her ikisinin de indirildiği bir medya sorgusu tarafından geçersiz kılındığında. Temel olarak, karmaşık!
peteorpeter

Yani bir mobil ilk yaklaşım bu sorunu giderir, örneğin en düşük çözünürlük için varsayılan stil ve daha büyük olanlar ve masaüstü için medya sorguları kullanma?
DBUK

1

Duyarlı tasarım, tüm cihazların aynı multimedya gereksinimlerine sahip olmadığı için her cihaza aynı miktarda veri indirmemelidir. Mobil siteler, masaüstü bilgisayarlar / dizüstü bilgisayarlar / tabletler için sitelerden daha düşük çözünürlüklü resimler kullanmalı ve doğası gereği daha az grafik olmalıdır. Mobil ve normal sitelerinizi birleştirmek istiyorsanız, bunu dikkate almanız gerekir, aksi takdirde siteniz çok duyarlı değildir, değil mi?

Slidedeck peteorpeter , Filament Group tarafından Duyarlı Görüntüler komut dosyasından bahseder; bu, JavaScript kullanarak uygun cihaz için doğru boyutlu görüntüyü ideal olarak birden fazla sürüm indirmeden sunmanıza olanak tanır. Düzen görüntüsü varlıkları için bu normalde farklı ekran çözünürlükleri için farklı stiller belirten medya sorguları aracılığıyla yapılır.


1

Bence birçok şirket sitelerini güncellemek için uzun zaman alacaktır, cehennem, hala orada tabloları kullanarak bazı var. Duyarlı ve mobil ilk yaklaşım, kesinlikle o anın moda sözcükleridir.

Yukarıdaki posterde belirtildiği gibi, cep telefonunuz / düşük çözünürlüklü cihazlarınız için lo-res görüntüleri kullanmanız gerekir. Medya sorguları tüm düşük çözünürlükleri hedeflemenize yardımcı olur. Ancak, mobil safarinin ekranı görmezden geleceğini duydum: hiçbir kural yok ve görüntülerin masaüstü sürümlerini de indiriyor. Ayrıca, duyarlı görüntü rotasına inerseniz mobil işlemciye çok fazla baskı uygular - 1 piksel başına 3bayt ... Sanırım. Ekstra içeriklerin indirilmesi için birçok çözüm var - bazıları oldukça kötü - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=tr_US#gid=0

Duyarlı web tasarımının olumsuz yanları hakkında bilgi için http://www.webdesignshock.com/responsive-design-problems/ adresine bakın . Bu blog gönderisinin sizi ertelemesine izin vermeyin. Bir Kitap Apart konuyla ilgili harika bir kitap yazdı - http://www.abookapart.com/products/responsive-web-design . E-kitap sürümünü kesinlikle almaya değer.


1px başına 3kb'lik bir konuyu biraz açıklayabilir misiniz? Tam ekran görüntüsünü almak için JavaScript kullanmanın yalnızca ekran çözünürlüğü 480 pikselden büyükse nasıl bir etki yaratacağını göremiyorum. Ayrıca, display: nonemobil kullanıcılardan resimleri gizlemek için asla kullanmamalısınız . Bu sadece kötü bir uygulama.
Lèse majesté

"Bazı şebeke operatörleri, görüntüleri havadan mobil cihaza aktarılmadan önce sıkıştırırlar" - w3.org/TR/mobile-bp Bu , mobil cihazların 3 bayt maliyetle sıkıştırılmaları gerektiği anlamına mı gelir? piksel başına (@ 24 bit RGB, örneğin bir JPG)? Hata! KB'yi yukarıya koydum, lanet olsun. Bu sadece bir CSS açısından, mobil tüm görüntüleri indir .. mobil ve masaüstü ve javascript çözümleri dikkate almaz.
DBUK
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.