Chrome Dev Summit birkaç hafta önce sona erdi. Etkinlikle ilgili bir dizi rapordan ilkini burada bulabilirsiniz. Mobil ve cihazlar arası geliştirmeye yoğun bir şekilde odaklanıldı. Bu nedenle, ilk olarak bu konuyu ele alacağız.
Paul Kinlan tarafından yazılan Mobil web uygulamaları için en iyi kullanıcı deneyimi kalıpları
İlk 1.000 sitenin mobil uyumluluğunu analiz ettikten sonra bazı sorun alanları tespit ettik: %53'ü hâlâ yalnızca masaüstü deneyimi sunuyor, sitelerin %82'sinde mobil cihazlarda etkileşimle ilgili sorunlar var ve sitelerin %64'ünde kullanıcıların okumakta zorlanacağı metinler bulunuyor.
Mobil web deneyiminizi önemli ölçüde iyileştirmek için hızlı çözümler
- Her zaman bir görüntü alanı tanımlayın
- İçeriği görüntü alanına sığdırma
- Yazı tipi boyutunu okunabilir bir düzeyde tutun
- Web yazı tiplerinin kullanımını sınırlama
- Dokunma hedeflerini uygun şekilde boyutlandırın ve aralarındaki boşluğu ayarlayın
- Giriş öğeleri için semantik türleri kullanma
PageSpeed Insights, sitenizin mobil uyumluluğunu belirlemek için kullanıcı deneyimi analizi kullanıma sundu. Bu analiz, sitenizin mobil kullanıcı deneyimiyle ilgili yaygın sorunları bulmanıza yardımcı olur. Yenilikleri inceleyin.
Slaytlar: Mobil web uygulamaları için en iyi kullanıcı deneyimi kalıpları
Alice Boxhall tarafından yazılan Multi-device Accessibility
Kullanıcılar, sitelerinize ve hizmetlerinize çok çeşitli erişilebilirlik koşullarına sahip çok sayıda cihazdan erişecektir. Doğru semantik öğeleri ve doğru ARIA rollerini kullanarak tarayıcının ve yardımcı teknolojilerin sayfanızı daha iyi anlamasına yardımcı olursunuz.
Slaytlar: Çoklu Cihaz Erişilebilirliği
Erişilebilirlik sorunlarını anlama ve ele almayla ilgili temel yöntemler
- Yalnızca klavyeyle iyi bir kullanıcı deneyimi sunduğunuzdan emin olun
- 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, Android'de ise TalkBack'i kullanın.
- Erişilebilirlik Geliştirici Araçları Chrome uzantısını deneyin
- İnternete daha çeşitli bir kitlenin katılması, sitelerinizi erişilebilir hâle getirme ihtiyacını daha da artırıyor
Matt Guant tarafından yazılan Chrome WebView'i kullanarak mobil uygulamalar oluşturma
Geliştiricilerin geçmişte WebView için oluşturma sürecinde yaşadığı sorunları hepimiz biliyoruz: Sınırlı HTML5 özellikleri, hata ayıklama aracı yok, derleme aracı yok. Android 4.4 (KitKat)'te Chromium destekli bir WebView kullanıma sunuldu. Geliştiriciler artık WebView'i kullanarak harika yerel uygulamalar oluşturmak için çok çeşitli yeni araçlara sahip.
Web Görünümü, Chrome için kullandığınız araçlarla tam uzaktan hata ayıklama özelliğini destekler. Ayrıca, Grunt ile güvendiğiniz web geliştirme iş akışınızı alıp Gradle aracılığıyla yerel yığın araçlarınızın içine entegre edebilirsiniz. Dünyaları daha da birleştiren bir özellik olarak, JavaScript'ten yerel kodunuzu test etmek için Chrome Geliştirici Araçları'nı kullanmanızı sağlayan akıllı bir hile vardır.
Slaytlar: Chrome WebView'i kullanarak mobil uygulamalar oluşturma
Etkin WebView geliştirmeyle ilgili önemli noktalar
- Önemli olan yeni özellikler değil, artık iş akışınızı hızlandırmak için kullanabileceğiniz araçlardır.
- Yerel kullanıcı arayüzünü taklit etmeye çalışmayın. Ancak web içeriği olduğunu belirten bazı işaretleri kaldırdığınızdan emin olun.
- Uygun olduğunda özelliklerin yerel uygulamalarını kullanın. Yani büyük dosyalar için XHR yerine DownloadManager'ı kullanın.
Matt Gaunt tarafından yazılan İş akışınızı cihazlar arası bir dünya için optimize etme
Masaüstü, mobil, tablet, giyilebilir cihazlar ve diğer form faktörleri için geliştirme yapmamız gerekiyorsa iş akışınızı nasıl optimize ederek hayatınızı daha az stresli hale getirebilirsiniz? LiveReload, Grunt, Yeoman ve kısa süre önce kullanıma sunulan Mini Mobil Cihaz Laboratuvarı ile hızlı iterasyon için sağlam bir çok cihazlı yaklaşım mevcuttur. Son olarak, test etmek istediğiniz fiziksel donanıma sahip değilseniz bazı sağlayıcılar bunu bulut üzerinden sunar.
Slaytlar: İş akışınızı cihazlar arası bir dünya için optimize etme
Önemli noktalar
- Desteklememiz gereken cihaz sayısı her geçen gün artıyor.
- Grunt ve Yeoman ile iş akışınızı doğru şekilde ayarlama
- Mini Mobil Cihaz Laboratuvarı ile tarayıcı ve cihazlar arası testleri basitleştirme
- Chrome DevTools Emülasyonu, stok emülatörleri, Saucelabs, Browserstack ve appexperience gibi bulut tabanlı emülatörleri ve üçüncü taraf emülatör Genymotion'u kullanarak emülasyon seçiminizde akıllı olun.
- Mobil test, kablosuz bağlantınızda test yapmaktan daha fazlasını ifade eder. Daha yavaş ağ hızlarını simüle etmek için bir proxy kullanın.
Ağ bağlantısı: Jake Archibald tarafından sağlanan isteğe bağlı
Bu konuşmadan birçok şey öğrendik: Jake sunum yaparken ayakkabı giymiyor; Business Kinlan'ın yakında yeni bir kitabı çıkacak; Çevrimdışı, tarayıcı tedarikçileri tarafından ciddiye alınıyor ve yakında çevrimdışıyken iyi çalışan harika deneyimler oluşturmanıza yardımcı olacak araçlara sahip olacaksınız.
ServiceWorker, ilgi çekici çevrimdışı öncelikli deneyimler oluşturmak için ihtiyaç duyduğumuz esnekliği kolayca sunar ve AppCache'in neden olduğu sıkıntılardan bizi kurtarır. Hatta Polyfill kullanarak API ile denemeler yapabilirsiniz.
Slaytlar: Ağ bağlantısı: isteğe bağlı
ServiceWorker'ın yardımı
- Sonraki nesil aşamalı geliştirmede, ağı potansiyel bir geliştirme olarak ele alırız.
- ServiceWorker, ağ istekleri üzerinde tam, komut dosyası yazılabilir ve hata ayıklama yapılabilir kontrol sahibi olmanızı sağlar.
- Çevrimdışı bir deneyiminiz varsa bunu göstermeden önce ağın bağlantısının kesilmesini beklemeyin. Bu işlem çok uzun sürebilir.