web-gelistirme-sc.com

Mobil web tarayıcıları için tasarım

Tüm modern mobil web tarayıcılarında çalışacak bir web sitesi tasarlamak için en iyi yaklaşım nedir?

WebKit tabanlı tarayıcıları hedeflemek yeterli mi?

8
rick schott

Hayır, WebKit'i hedeflemek yeterli değil. Yapılacak ilk şey, mobil pazarın iki segmenti olduğunu düşünmektir: dokunmatik tabanlı ve dokunmatik tabanlı değil. Bu, mobil kullanıcı deneyiminizi nasıl tasarladığınızı etkiler. Neyse ki, dokunmatik tabanlı olanlar WebKit'e (Android, iPhone ve WebOS) önemli ölçüde yönelecek. Diğerleri öncelikle IE Mobil (Windows Mobile 6.5 üzerinde IE Mobile 6 ve Windows Phone 7'de IE7/IE8 tabanlı yeni bir tane) ve Opera Motorları ve yetenekleri oluşturma hakkında daha fazla bilgi için bu Wikipedia'daki mobil tarayıcıların listesi bölümüne bakın.

Dokunmatik tabanlı platformlar için Sencha Touch gibi bir kütüphane, tüm cihazlarda karşılaştırılabilir deneyimler oluşturmanıza yardımcı olabilir, ancak tüm cihazlarda eşit deneyimler oluşturmak zor olacaktır. Aslında, denememenizi tavsiye ederim . Dokunmatik ve dokunmatik olmayan mobil platformlar arasındaki fark o kadar büyük hale geliyor ki neredeyse masaüstü tabanlı bir kullanıcı arayüzünü mobil boyutlu bir ekrana sığdırmaya çalışmak gibi UX farkı gibi - iPhone'un "zum" paradigmasını kullandıkları için dokunmatik tabanlı platformlarda iyi çalışıyor - ancak eski veya dokunmasız platformlar için bu yaklaşımdan yararlı bir şey elde etmek için zorlanacaksınız.

Bununla birlikte, LukeW'nin makalesini ve müteakiben sorunuzu cevaplamak zorunda olmayan ancak iyi bir ilke olarak düşünülebilecek önce mobil cihazlar için tasarım konusundaki görüşmeleri düşünün: tüketicilerin yapmak istedikleri şeyleri belirleyerek tasarım yapmaya başlayın ve bunları hızlı ve kolay bir şekilde kullanıma sunun. Bu kadar = hepsi platformlarında sürekli olarak iyi bir tasarım, bu nedenle mobil tasarımınızı yönlendiren bir desen olarak kullanabilirsiniz.

12
Rahul

Dün bir iPhone 3 ile bazı deneyler yaptım. İşte deneyimlerim:

  • Genişliğin 320 piksel olduğunu varsaymayın, bu nedenle akışkan genişliği düzeni kullanın.

  • Doğru dokümanı kullanın. XHTML Mobile 1.2 kullanıyorum. Ama bunun doğru olup olmadığından emin değilim.

  • Düğmeleri çok büyük yapın.

  • Fareyle üzerine gelme yok, bu yüzden farklı kullanıcı arabirimi öğelerinin ne yaptığını belirtmek için simgeler kullanın.

4
neoneye

Mobil terimi, telefon alanının dışında büyüyor ve beş ila dokuz inç dokunmatik ekran gerektiren tabletler gibi cihazları içermeye başlıyor. Ek olarak, bir mobil tasarım hem yatay hem de dikey yönlendirmeleri hesaba katmalıdır. Neoneye söylediklerinin üstüne, birkaç tavsiye/öneri daha.

  • Ekranın hemen kenarında metin bulunmadığından emin olmak için bir kenar boşluğu veya dolgu kullanın.
  • Akışkan genişliği düzeni kullanmanın üstünde (genişlikler 320 pikselden 1024 piksel'e kadar çıkabilir), kullandığınız tasarım öğelerinin iyice sarıldığından emin olun. Örneğin, düğmeler yatay listeden daha iyi sarılmış görünüyor.
  • Metin biraz daha büyük, ancak okunaklı olmalıdır. Bana göre, iyi tipografik stil en azından burada aynı derecede önemlidir. Web'e Uygulanan Tipografik Stil Unsurları iyi bir referanstır.
3
waymost

Kitleniz biraz daha kalifiye olabilirse, çoğu müşterinin birincil cihaz kullandığını veya tarayıcı oluşturduğunu öğrenmek için bazı eğitimli varsayımlar yapabilirsiniz. Öncelikle birincil kitlenizin temel ihtiyaçlarını karşılayın. Uygulamanızı "başlangıçta" eşit olarak tüm platformlara dağıtmaya çalışmak bir görevi çok yıldırıcı olabilir.

Karşılaştığım bazı yararlı makaleler:

Mobil Referans http://www.quirksmode.org/mobile/

2
hungrysquirrel