Neden "duyarlı" web tasarımı düşünülmemelidir?


9

Bu, bir programlama sorusundan çok bir grafik tasarım sorusu gibi görünebilir, ancak bence gerçek grafik tasarımdan çok daha fazla teknik / programlama değerine sahip.

"Duyarlı" web tasarımı kavramı , görüntüleme cihazının boyutunu algılamak ve CSS kurallarını buna göre ayarlamak için CSS3'teki medya sorgularını kullanma etrafında döner - esasen dinamik CSS. Bu, özellikle mobil olmak üzere birçok dağıtım vakasındaki boşluğu doldurur.

Medya sorgularının kullanımı yavaş yavaş ortaya çıkıyor (birçok insanın gerçekten bilmediğini buldum), ancak yavaş evlat edinmenin bir nedeni olup olmadığını merak ediyorum. Web uygulamaları için pratik değil mi? Eksik olduğum temel bir tuzak olabilecek bir şey var mı?


2
Birçok insan sadece cahil ve yeni yöntemler öğrenmiyor.
Raynos

@Raynos ama öğrenmek çok eğlenceli!
Nic

1
çünkü internet hızları zaman geçtikçe artıyor ve duyarlılık artık gerçek bir mesele değil ve çaba artık haklı değil mi? Yanlış olabilirim, çünkü bu fikir harika görünüyor!
WinW

1
Web yöneticilerine mi geçeceksiniz?
Peter Taylor

Yanıtlar:


9

Gerçekten işe yaraması için çemberler atlamak zorunda. Geliştirdiğim bir site @media (max-width:800px)için, telefonlar ve diğer küçük ekranlar için bir stil sayfası tanımlardım. Ama örneğin iPhone tarafından kullanılmıyordu.

Telefon tarayıcı geliştiricilerinin, küçük ekranları hesaba katmadıklarını, bu nedenle oluşturma motoruna (örneğin iPhone'un 900 pikselden daha geniş olduğunu iddia ettiğini) varsaymadıkları söylenmediği anlaşılıyor. Yalan söylemek. Tarayıcı uygulayıcılarıyla savaştığınız noktaya geldiğinde, çabaya değip değmeyeceğini merak etmeye başlarsınız.


Hem Zurb Vakfı hem de Twitter Bootstrap bunu oldukça iyi idare ediyor. İsteğe bağlı anahtarlama için biraz JavaScript gerekir. Ayrıca DPI ayarları vb. Var. Bu CSS çerçevelerini kullanmak gerçekten çok kolay. Ya da en azından bir kısmı.
Berin Loritsch

Bu soru ve cevabın 6 yıl öncesine ait olduğunu ve mevcut kabul oranlarını yansıtmayabileceğini belirtmek gerekir.
Peter Taylor

Ah Üzgünüm. Nedense dün ana yem oldu. Tarihi kontrol etmeyi düşünmedim.
Berin Loritsch

4

Herkes için konuşamam, ama kendi deneyimimden zaman ve para belirleyici faktör oldu. Meslektaşlarım ve ben her zaman en son şeylere bakıyoruz, ancak farklı boyutlardaki cihazlar için farklı düzenler tasarlamak ve uygulamak büyük önem taşıyor. Özellikle 3 yaşındaki nokia 5800'ümde tüm web sitelerimizin kenar çubuğu içeriğini almak için kaydırmam gereken iyi görünüyor. Küçük şirketler ve serbest çalışanlar için web siteleri tasarlıyor ve uyguluyoruz.

Geçerli olabilecek başka bir neden de, kendi ayrı site haritası ( http://www.google.com/support/webmasters/bin/answer.py?hl=tr&answer=34648 ) ile mobil sürümler için tamamen ayrı bir web sitesi sunmaktır. siteyi korumanın kolay ve giriş düzeyinde bir yoludur.


Peki, konuşlandırılan veya orta döngülü bir siteye duyarlı bir tasarım sunmak kesinlikle zor, ancak bence başka bir mobil alt alana sahip olmak yerine böyle bir şey uygulamak çok daha kolay olurdu. Neyse ki Rails, devralınan şablonlarla bu görevi biraz soyutlıyor.
Nic

Peki, bizim durumumuzda müşteri aslında mobil versiyonu bir rakibe dış kaynak kullandı :( Ben şahsen farklı bir site yerine şablonlarla da giderdim.
Pelshoff

2

Verileri güvenilir bir şekilde kurtarmayı garanti edebiliyorsanız, her şey yolunda demektir.

Ancak birisinin, bir masaüstü bilgisayarın pencereli tarayıcısına bir web sayfası yüklediğini düşünün. Her şeyi okumak için onları tam ekran açmaya mı zorluyorsunuz, yoksa boyutu küçültülmüş pencereye yerleştiriyor ve ekranı kapladığında çok fazla boş alan mı sunuyorsunuz? Sayfa yüklendiğinde CSS'ye bir kez hizmet veriyorsunuz!

Telefonu döndürürken yatay / dikey modları değiştiren bir telefon tarayıcısına ne dersiniz? Çok küçük bir çözünürlüğe sahip olan ve normalde yakınlaştırma kullanan bir tarayıcı hakkında ne düşünüyorsunuz, ancak bildirilen çok küçük çözünürlüğe zaten adapte oldunuz ve sayfa okunamaz hale geliyor mu?

İyi bir evrensel, ölçeklenebilir CSS yapma standart yönergelerini izleyin ve tarayıcının sayfayı doğru çözünürlüğe ölçeklendirmesini sağlayın.


9
CSS3'te farklı ekran boyutları için otomatik olarak değişen dinamik kurallara izin veren yeni bir özellik var.
Steffan Donal

@Ruirize Tam olarak - içeriği dinamik olarak uyarlayan kurallara sahip statik CSS kullanın - tamam. Ekran boyutunuz için içeriği statik olarak ayarlayan kurallara sahip dinamik olarak oluşturulmuş CSS isteyin - no.
SF.

2
OP, işleri (diğer şeylerin yanı sıra) ekran boyutuna göre dinamik olarak ayarlayan medya sorgularını kullanmaktan bahsediyor. Fazladan dosya yüklenmedi.
Travis Northcutt

1
@SF .: bir Google Takvim penceresini yeniden boyutlandırmaya çalışın (eski mavi temayı değil, yeni kırmızı temayı), nasıl ele aldıklarını ürpertici havalı.
Yalan Ryan

2
@SF: Orijinal yazı, medya sorgularından bahsediyordu, üstbilgilere veya w / e'ye göre farklı CSS sunmuyordu.
Pewpewarrows
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.