Chrome Geliştirici Zirvesi birkaç hafta önce tamamlandı. Etkinlikle ilgili bir dizi raporun ilkini burada bulabilirsiniz. Mobil ve cihazlar arası geliştirmeye büyük önem verdiğimiz için ilk olarak bunu ele alıyoruz!
Mobil web uygulamaları için en iyi kullanıcı deneyimi kalıpları, Paul Kinlan tarafından
İlk 1.000 sitenin mobil uyumluluğu incelendikten sonra bazı sorunlu alanlar tespit edildi: %53'ü hâlâ yalnızca masaüstüne yönelik bir deneyim sunarken, sitelerin %82'si mobil bir cihazda etkileşimle ilgili sorun yaşıyor, %64'ünde ise kullanıcıların okumakta zorlanacakları metinler bulunuyor.
Mobil web deneyiminizi önemli ölçüde iyileştirecek hızlı isabetler
- Her zaman bir görüntü alanı tanımlayın
- İçeriği görüntü alanına sığdır
- Yazı tipi boyutunu okunabilir bir düzeyde tutun
- Web Yazı Tiplerinin kullanımını sınırlayın
- Dokunma hedeflerini uygun şekilde boyutlandırın ve boşluk bırakın
- Giriş öğeleri için anlamsal türleri kullanın
PageSpeed Insights, sitenizin ne kadar mobil uyumlu olduğunu belirlemek için kısa bir süre önce kullanıcı deneyimi analizini kullanıma sundu. Bu analiz, sitenizin mobil kullanıcı deneyimiyle ilgili yaygın sorunları bulmanıza yardımcı olacak. Yenilikleri inceleyin.
Slaytlar: Mobil web uygulamaları için en iyi kullanıcı deneyimi kalıpları
Alice Boxhall'dan Çoklu Cihaz Erişilebilirlik
Kullanıcılar, sitelerinize ve hizmetlerinize çok çeşitli erişilebilirlik gereksinimleri olan çok sayıda cihazdan erişecektir. Doğru semantik öğelerini ve doğru ARIA rollerini kullanarak tarayıcının ve yardımcı teknolojinin sayfanızı çok daha iyi anlamasına yardımcı olursunuz.
Slaytlar: Çoklu Cihaz Erişilebilirlik
A11y sorunlarını anlama ve ele almanın temel yolları
- Yalnızca klavyenin kullanıldığı iyi bir kullanıcı deneyimi sunduğunuzdan emin olma
- Doğru öğe seçimi ve ARIA ile arayüzünüzün anlamını ifade edin
- Test etmek için masaüstünde ChromeVox'u ve Android'de TalkBack'i kullanın.
- Erişilebilirlik Geliştirici Araçları Chrome uzantısını deneyin
- Daha çeşitli bir kitlenin internette gezinmesi, sitelerinizi erişilebilir hale getirme ihtiyacını daha da artırıyor.
Matt Guant'tan Chrome Web Görünümü'nü kullanarak Mobil Uygulamalar geliştirme
Geliştiricilerin Web Görünümü için geçmişte bir yapı oluştururken yaşadığı sorunları hepimiz biliyoruz: Sınırlı HTML5 özellikleri, hata ayıklama aracı ve oluşturma aracı yok. Android 4.4'te (KitKat) Chromium destekli WebView'un kullanıma sunulmasıyla birlikte geliştiriciler, WebView'u kullanarak mükemmel yerel uygulamalar oluşturmak için artık çok sayıda yeni araca sahip.
Web Görünümü, Chrome için kullandığınız araçlarla aynı uzaktan hata ayıklamayı destekler. Ayrıca güvenilir web geliştirme iş akışınızı Grunt ile alıp Gradle aracılığıyla yerel yığın araçlarınıza entegre edebilirsiniz. Dünyalar birleştiğinde JavaScript'teki yerel kodunuzu test etmek için Chrome Geliştirici Araçları'nı kullanmanın akıllıca bir yolu var.
Slaytlar: Chrome Web Görünümü'nü kullanarak Mobil Uygulamalar oluşturma
Etkili Web Görünümü geliştirme ana fikirleri
- Önemli olan yeni özellikler değil, iş akışınızı hızlandırmak için artık kullanabileceğiniz araçlar
- Yerel kullanıcı arayüzü emülasyonuna çalışmayın. Ancak bunun Web İçeriği olduğunu belirten bazı bilgileri kaldırdığınızdan emin olun.
- Uygun olduğunda özelliklerin yerel uygulamalarını kullanın. ör.büyük dosyalar için XHR yerine DownloadManager'ı kullanın.
Matt Gaunt'tan İş Akışınızı cihazlar arası bir dünya için optimize etme
Masaüstü, cep telefonu, tablet, giyilebilir cihazlar ve diğer form faktörlerine yönelik uygulama geliştirmemiz gerektiğinde, iş akışınızı stressiz hale getirecek şekilde nasıl optimize edebilirsiniz? LiveUpload, Grunt, Yeoman ve yeni kullanıma sunulan Mini Mobile Device Lab ile hızlı yineleme için birden fazla cihaza yönelik sağlam bir yaklaşım vardır. Son olarak, test etmek istediğiniz fiziksel donanıma sahip değilseniz bazı sağlayıcılar bunu bulut üzerinden de gerçekleştirebilir.
Slaytlar: İş akışınızı cihazlar arası bir dünya için optimize etme
Önemli noktalar
- İhtiyaç duyduğumuz cihazların sayısı her geçen gün artacak.
- Grunt ve Yeoman ile iş akışınızı doğru işleme
- Mini Mobile Device Lab ile tarayıcılar arası ve cihazlar arası testi basitleştirme
- Chrome DevTools Emülasyonu, Stock Emülatörleri, Saucelabs, Browserstack ve appexperience gibi Cloud Tabanlı Emülatörler ve üçüncü taraf emülatör Genymotion ile emülasyon tercihinizi yapın
- Mobil test için kablosuz bağlantınızı test etmekten ibaret değildir. Daha yavaş ağ hızlarını simüle etmek için proxy kullanın
Ağ bağlantısı: Jake Archibald tarafından isteğe bağlıdır
Bu konuşmadan çok şey öğrendik: Jake sunum yaparken ayakkabı giymiyor; Business Kinlan'ın yakında yeni bir kitabı çıkacak; tarayıcı satıcıları çevrimdışına çok önem veriyor ve çok yakında çevrimdışı olduğunuzda da iyi deneyimler oluşturmanıza yardımcı olacak araçlara sahip olacaksınız.
ServiceWorker, AppCache'in neden olduğu sıkıntılara yol açmadan, ilgi çekici çevrimdışı ilk deneyimleri kolayca oluşturmak için ihtiyaç duyduğumuz esnekliği sağlayacak. Hatta Polyfill kullanarak API ile denemeler de yapabilirsiniz.
Slaytlar: Ağ bağlantısı: isteğe bağlı
Kurtarıcı ServiceWorker
- Yeni nesil progresif geliştirmede, reklam ağını potansiyel bir geliştirme olarak görüyoruz.
- ServiceWorker size ağ istekleri üzerinde tam, komut dosyası oluşturma ve hata ayıklaması yapılabilir kontrol sunar
- Çevrimdışı bir deneyiminiz varsa, ağın gösterilmeden önce başarısız olmasını beklemeyin. Bu işlem uzun sürebilir.